DEV Community: VIMAL KUMAR

The "Invisible Tunnel": Host from Your Laptop via Oracle Cloud and Tailscale

VIMAL KUMAR — Sun, 01 Mar 2026 08:50:00 +0000

Have you ever wanted to turn your local machine into server for your cools Projects.

In this guide, I’ll show you how to use an Oracle Cloud Free Tier instance as a "Public Gateway" to your laptop using Tailscale. No public ports open on your home router, no complex VPN configs—just a secure, encrypted tunnel.

The Architecture
We are creating a bridge.

The Laptop: Runs your app (e.g., port 3000).

Tailscale: Connects your laptop and VPS into a private "Tailnet."

Oracle VPS: Acts as a Reverse Proxy using Nginx to take public traffic (Port 80/443) and send it down the tunnel.

1. The Tailscale Magic First, install Tailscale on both your laptop and your Oracle VPS.

curl -fsSL https://tailscale.com/install.sh | sh
sudo tailscale up

Once both are authenticated, they will have private IPs (like 100.x.y.z). These IPs can "see" each other globally as if they were on the same Wi-Fi.

2. Enable "Exit Node" (The Tunneling Part) If your goal is to use the VPS as a tunnel for your other devices (so your home PC appears to have the VPS's IP address), you must advertise it as an exit node in your VPS:

sudo tailscale up --advertise-exit-node

3. Approve the Exit Node (Admin Console)

For security, Tailscale doesn't allow a device to become an exit node automatically.

Open your Tailscale Admin Console.
Find your VPS in the Machines list.
Click the three dots (...) > Edit route settings.
Check the box for Use as exit node and click Save.
- 4. How to use it on your other PC

Now that the VPS is ready, you can "tunnel" through it from your laptop or mobile:

On Windows/Mac: Click the Tailscale icon in the system tray > Exit Node > Select your VPS.
On Linux: Run tailscale up --exit-node=<vps-tailscale-ip>.
On Android/iOS: Open the app > Tap the "Exit Node" entry > Select your VPS.

Now You can run any server on any port in your local laptop
and you can access from VPS by

curl -I http://<laptop-tailscale-ip>:3000

It will show your laptop server details
means you have enable connection between VPS and local laptop

5. Now you have to redirect your VPS public ip to laptop tunnel using ngnix (so anyone to your VPS public ip it will show your local server response )

Install Nginx on the VPS:

sudo apt install nginx

6. Configure Nginx on the VPS On your VPS, create a new configuration file for your proxy:

sudo nano /etc/nginx/sites-available/tailscale-proxy

Configure Nginx to Forward Traffic:
Edit your Nginx config to "proxy" requests from the VPS public IP to your Home PC’s Tailscale IP.

Nginx

Paste the following configuration into the file:

Nginx
server {
    listen 80;
    server_name _; # e.g., 1.2.3.4 or example.com _means all

    location / {
        # Redirect traffic to your Home PC's Tailscale IP
        proxy_pass http://100.10.20.30:3000; 

        # Standard proxy headers to pass user info to your app
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Optional: Handle WebSockets (useful for React/Next.js dev servers)
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

7. Enable the Configuration Link the file to the sites-enabled directory and test the Nginx syntax:

Bash

Enable the site

sudo ln -s /etc/nginx/sites-available/tailscale-proxy /etc/nginx/sites-enabled/

Test for syntax errors

sudo nginx -t

If it says "test is successful", restart Nginx

sudo systemctl restart nginx

Result: When someone visits your VPS's public IP, the VPS sends that traffic through the encrypted Tailscale tunnel to your local PC.

You can test by going to your VPS public IPS

Use https://canyouseeme.org/ if you face issue to debug

Turn Your Laptop into a Server: Host Web Apps Locally with Coolify and Cloudflare Tunnels

VIMAL KUMAR — Wed, 25 Feb 2026 04:49:02 +0000

Have you ever thought about using your own laptop as a server to host web apps so anyone on the internet can access them globally?

Let me introduce you to a powerful combination: Cloudflare Tunnels and Coolify. Together, these tools allow you to transform your local PC into your very own Vercel, Netlify, or Heroku.

If your internet connection allows for standard port forwarding, setting this up is a breeze. However, many Internet Service Providers (ISPs) use CGNAT (Carrier-Grade NAT). If you are behind CGNAT, your public IP and ports cannot be accessed from the outside world, even if you configure port forwarding on your router.

How to know you are behind CGNAT:

Look at your router's "WAN IP" or "Internet IP" in its settings.
Go to a site like whatsmyip.org.
If the two numbers are different, you are behind CGNAT.
- Common CGNAT IP range: 100.64.0.0 to 100.127.255.255.

If you are behind CGNAT, don't worry—that's exactly where Cloudflare Tunnels come in to save the day. Additionally, while you can deploy apps using just a Cloudflare Tunnel, Coolify is the secret ingredient if you want a beautiful, Vercel-like UI to manage and deploy multiple projects effortlessly.

Let’s get started!

Step 1: Install Coolify

First, we need to install Coolify. You can do this with a single command in your terminal.

If you on your PC then go to terminal for VPS user SSH into your server and past below command

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | sudo bash

Note: This script will also install Docker Engine if you don't already have it

Once the installation is complete:

Local Machine: Open your browser and go to http://localhost:8000 to create your root user account.
VPS Users: If you are doing this on a VPS, navigate to http://<your-public-ip>:8000.

Now you have a dashboard ready to deploy Node.js, Next.js, Python, WordPress, or any database directly on your own hardware!

Step 2: Deploy a Demo Project

Let's deploy a demo project to see how it works.

In Coolify, select Public Repository.
Paste in your repository link. For this demo, I'll use: https://github.com/vimal-verma/vimalverma.in
Select Docker in the Build Pack settings and click Continue.

Before hitting deploy, verify your Network section has the following values (this is crucial for linking a custom domain later):

Ports Exposes: 3000

Port Mappings: 3000:3000

Click Deploy. Once finished, Coolify will generate a link for your web app that looks something like this:
http://xo0gcogkks04ks4sgkk84oww.<your-public-ip>.sslip.io

Can you access this link?

If you are using a VPS or your ISP does not use CGNAT, this link will work immediately. Congratulations, you've just deployed an app on your self-hosted Vercel alternative!

You can also access your web app locally by replacing the port. For example, if your Coolify dashboard is at http://10.0.0.1:8000/, your deployed app is running at http://10.0.0.1:3000/.

if you want to link to custom domain add a DNS record type A target your public IP then update domain value in coolify dashboard save and redeploy
and Done

Step 3: Bypassing CGNAT with Cloudflare Tunnels

if that public link isn't accessible for you (likely due to CGNAT), don't worry. We are going to put your app online securely using Cloudflare Tunnels.

First, download and install cloudflared from the official Cloudflare developer docs. link

Once installed, authenticate your local machine:

cloudflared tunnel login

Create a new tunnel and give it a name:

cloudflared tunnel create <YOUR_TUNNEL_NAME>

Note: This command will output a UUID. Copy this UUID, as you will need it for the configuration.

Next, create a configuration file. Inside your ~/.cloudflared directory, create a config.yml file and add the following fields:

url: http://localhost:8000
tunnel: <Tunnel-UUID>
credentials-file: /root/.cloudflared/<Tunnel-UUID>.json

Route your DNS to your desired subdomain (ensure your main domain is already managed in your Cloudflare account):

cloudflared tunnel route dns <Tunnel-UUID or NAME> <subdomain.example.com>

Finally, run the tunnel:

cloudflared tunnel run <Tunnel-UUID or NAME>

(Tip: If you have multiple tunnels, you can specify the config path using: cloudflared tunnel --config /path/to/your/config.yml run <NAME>)

Check the tunnel

cloudflared tunnel info

Now, if you visit subdomain.example.com, it will securely serve your Coolify dashboard. You can log in remotely using the same email and password you set up locally!
Now if you want to add custom link to your subdomain then go to

Step 4: Routing Your Custom Domain to Your App

Now that the tunnel is active, you probably want to route traffic directly to your published app (running on port 3000) rather than just the Coolify dashboard.

Go to your Cloudflare Dashboard:
then Networking > Tunnels

Your local tunnel will be visible click on that and go in routes section and click on add routes then select published application
now add subdomain - www
Service URL - http://localhost:3000
and click on add route

Now go in coolify dashword go inside projects and select one then go to Configuration > general and change domains to www.example.com and save and Redeploy

And you're done! Your locally hosted application is now live and accessible to the world at www.example.com.

Happy self-hosting!

My submission to Google Cloud Run Portfolio Challenge

VIMAL KUMAR — Mon, 26 Jan 2026 05:15:18 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hello! I'm Vimal Kumar, a dedicated Software Developer with a passion for building digital solutions that make a difference. With a bachelor's degree in computer science and years of hands-on experience, I specialize in creating robust web applications using modern technologies like React, Next.js, and Node.js.

In this portfolio i am trying to make it interactive and Playful,

I have added a Robot which follow you in each section of Portfolio and narrate you some detail about that.
A terminal mode is added which can be enable by clicking on robot or setting
I have added Guide Mode which can be enable through setting icon or terminal (if Guide mode is active then Robot will Show each section of Portfolio by scrolling like a Guide.)
I have added mini game (in 404 page and also in home page which can be enable through setting icon or terminal)

Portfolio

Live link

How I Built It

I am using Next.Js to build my Portfolio Website with help of antigravity

Framework: Next.js
Styling: Custom CSS
Icons: Lucide React
Animations: customized HTML5 Canvas
Language: JavaScript
Robot - SVG generated by Gemini and Customize in Figma to achieve different emotion of Robot

Here are GitHub Repo-

vimal-verma / vimalverma.in

Vimal's Interactive Portfolio

Welcome to my interactive portfolio built with Next.js! This project features a unique user experience with an interactive Robot Guide and a fully functional Terminal interface.

Features

🤖 Interactive Robot Guide

Personal Assistant: A friendly robot that guides you through the portfolio.
Voice Interaction: Uses Web Speech API to speak to visitors.
Expressions: Dynamic facial expressions (happy, excited, sleepy, confused, love).
Mini-Game: Catch falling energy bolts to charge the robot!
Interactive: Follows mouse movement, reacts to clicks, and dances.

💻 System Terminal

Command Line Interface: Access portfolio sections via commands.
Commands:
- help: List available commands.
- about, projects, skills, experience: Navigate to sections.
- game: Start the mini-game.
- robot <expression>: Change robot expressions.
- theme: Toggle dark/light mode.
- message: Send a contact message.
- joke: Hear a programming joke.

Getting Started

First, run the…

View on GitHub

What I'm Most Proud Of

Robot expression and emotion, which I am managed to pull
Clicking on Robot will open Terminal (you can type help to list all command)
emit ❤️ emoji when cursor move around robot
Robot get confusion if you move cursor too Fast
Robot eyes follow Cursor
Robot eyes and mouth change color in each section of portfolio
Robot dance command in terminal - have fun

🤖 Interactive Robot Guide

Personal Assistant: A friendly robot that guides you through the portfolio.
Voice Interaction: Uses Web Speech API to speak to visitors.
Expressions: Dynamic facial expressions (happy, excited, sleepy, confused, love).
Mini-Game: Catch falling energy bolts to charge the robot!
Interactive: Follows mouse movement, reacts to clicks, and dances.

💻 System Terminal (click on robot to activate)

Command Line Interface: Access portfolio sections via commands.
Commands:
- help: List available commands.
- about, projects, skills, experience:
  - Navigate to sections. (If terminal is not in full screen).
  - Show details within terminal in full screen mode
- game: Start the mini-game.
- robot <expression>: Change robot expressions.
- theme: Toggle dark/light mode.
- message: Send a contact message from terminal.
- joke: Hear a programming joke.

Here are screenshot of some part of portfolio

Here is terminal example

Here is Lighthouse score

Thanks Dev and Google AI team.

Discover BiodataMaker.org: The Ultimate Free Tool for Creating Professional Biodatas and Invitations in Minutes

VIMAL KUMAR — Tue, 30 Dec 2025 11:58:20 +0000

In today's fast-paced world, first impressions matter—whether you're applying for a job, introducing yourself for a marriage proposal, or sharing a wedding invitation. That's where BiodataMaker.org comes in: a completely free, user-friendly online platform that lets you create stunning, professional biodatas, resumes, digital cards, and invitations without any design skills or software downloads.

What is BiodataMaker.org?

Launched as a simple yet powerful web tool, BiodataMaker.org is designed to make document creation effortless and accessible. "Biodata" (short for biographical data) is summarizing personal details—especially for matrimonial matches, job applications, and student profiles. This site takes the hassle out of formatting and design, delivering high-quality results instantly.

Key highlights:

100% Free: No subscriptions, watermarks, or hidden costs. Download as PDF or image anytime.
No Signup Needed: Start creating right away—no accounts or logins.
Privacy-First: All data processing happens in your browser; nothing is stored on servers.

Standout Features That Make It a Game-Changer

Diverse Templates: Choose from over 25 ready-made designs:
- Marriage biodatas (Traditional, Modern, Royal, etc.).
- Job resumes (Professional, Creative, Minimalist).
- Student profiles (Fresher, Academic CV).
Invitation & Card Maker: Newer features include - beautiful digital wedding/event invitations and smart digital business cards (with QR codes, social links, and customizable themes).
Easy Customization:
- Upload photos and crop them on the spot.
- Add/remove/rearrange fields.
- Real-time previews as you edit.
- Drag-and-drop studio for fully custom layouts.
How It Works (In Just 3 Steps):
- Select a template.
- Fill in your details (personal, family, education, etc.).
- Download or share instantly.

Why It Matters in 2025

In an era of digital matchmaking (via apps and sites) and quick job applications, a well-crafted biodata can set you apart. BiodataMaker.org democratizes this by making premium-quality designs available to everyone—for free. It's mobile-friendly, secure, and perfect for sharing on WhatsApp or email.

Whether you're a parent crafting a marriage biodata, a job seeker needing a quick resume, or someone planning an event, this tool is worth bookmarking.

Head over to biodatamaker.org and try it yourself—your next impressive document is just minutes away!
Have you used BiodataMaker.org? Share your experience in the comments!

[Boost]

VIMAL KUMAR — Thu, 11 Dec 2025 08:20:10 +0000

Join the Web NFC Revolution: Contribute to the Open-Source Project at webnfc.org!

VIMAL KUMAR ・ Dec 10 '25

#webnfc #nfc #opensource

Join the Web NFC Revolution: Contribute to the Open-Source Project at webnfc.org!

VIMAL KUMAR — Wed, 10 Dec 2025 10:37:52 +0000

The Web NFC API is one of the most exciting web platform features in years. It lets web apps read and write NFC tags directly from the browser — no native app required. Imagine progressive web apps that can configure smart posters, exchange contact info, automate home devices, or even serve as digital tickets… all with a simple tap.

But for Web NFC to reach its full potential, we need great documentation, examples, tools, and real-world testing across devices and browsers.

That’s exactly why we created webnfc.org — an open-source hub dedicated entirely to Web NFC.

What is webnfc.org Offers Today

A complete beginner-friendly Web NFC tutorial series
Ready-to-run code examples (reading NDEF messages, writing tags, formatting tags, etc.)
An online NFC Tag Emulator for testing without physical tags A live Web NFC Playground where you can experiment in the browser right now
Browser compatibility tables and troubleshooting guides
Curated list of real-world Web NFC demos and production sites And the best part? Everything is open source and community-driven.

We Need Your Help to Make It Even Better!

Whether you’re a seasoned web developer or just starting your Web NFC journey, there’s a meaningful way for you to contribute:

Write or Improve Tutorials & Docs First-timer friendly! Even fixing a typo helps. Add new guides (e.g., “Using Web NFC with React/Vue/Svelte”, “Secure Web NFC practices with NFC”)
Contribute Code Enhance the NFC Tag Emulator (add new tag types, better UI) Build new playground features (real-time tag visualizer, bulk write tools) Improve the example gallery with creative demos
Share Your Real-World Projects Submit your Web NFC-powered PWA to our showcase Write a case study or blog post about how you used Web NFC
Help with Testing & Bug Reports Test on different devices (Android phones, tablets, Chromebooks) Report browser quirks and help us keep the compatibility table up-to-date
Spread the Word Star the repo ⭐ Share webnfc.org with your followers Give a lightning talk at your local meetup

How to Get Started (It Takes Less Than 5 Minutes)

Visit https://webnfc.org

Click the GitHub icon (or go directly to https://github.com/vimal-verma/webnfc.org)
Star the repository

Say hello in the Discussions or Issues — we’re a friendly bunch
Every contribution, no matter how small, moves the entire Web NFC ecosystem forward.

Let’s build the definitive resource for Web NFC together.
See you on GitHub!
The Web NFC Community ❤️

P.S. Already built something cool with Web NFC? Reply to this post or open a PR — we’d love to feature your project!

My Create-React-app blog website's post appeared in google search, why?

VIMAL KUMAR — Fri, 11 Jun 2021 03:28:25 +0000

My Create-React-app blog website's post appeared in google search, why?

Jun 11 '21 Comments: 1 Answers: 0

I was just searching my blog title in google and result blow my mind, How google can read title of my blog that render in client side.

As i know When googlebot go to any Create-React-app website, it show a blank index.html then how googlebot read content on my blog…

Open Full Question

I am considering to make Vdev.in Open Source

VIMAL KUMAR — Sat, 05 Jun 2021 02:30:15 +0000

What is Open Source ?

Open Source is everywhere. The term “Open Source” refers to something people can modify and share because its design is publicly accessible. You can also contribute in any open source project, 28% of casual contributions to an open source are documentation, such as a typo fix, reformatting, or writing a translation.You Just need to track those issues related to the project And try to solve those issues and Open Pull Request.

Why I am considering to make it Open Source?

3 Months ago, i have started a Project called Vdev.in and which is mainly a portfolio and resume generator website, where you can make your own portfolio website without doing any coding, and now i am considering to make it an open source because i want to make it better with your help.

Some features of Vdev.in are

1 You can write your own blog
2 Share your portfolio as an unique link

3 Download Your resume

4 You can add your Projects

5 You can add your achivements

6 You can connect your social media handle's

7 You can add some Custom CSS
8 Receive direct messages from your audience

9 You can use our Vdev.in api

What Next ?

I am planning to move Front end from React.js to Next.js, It is very important in SEO Point of View and many more.

Thanks for reading,

Should i make it opensource ?

you can reach to me from my profile

Free Portfolio and Resume builder

VIMAL KUMAR — Wed, 28 Apr 2021 09:42:20 +0000

Updating portfolio is frustrating, right?

As a developer portfolio is best place to Showcase skill, work and Achievements and It's is really valuble for your career. So we need to keep Portfolio updated and Updating portfolio is frustrating, right?
So, we've got you covered
We are happy to announce that Vdev is now open for Developer (still in beta), So please take a try and review how is it and how to improve it.

Get your portfolio ready today

Now you know the value of a portfolio for your career, get started on making your very own.
Go to Vdev and Create your account and add your skills, projects and Achievements and Done Now you have your own portfolio.
It's is really easy to update and You can Customize by adding Custom Css.

Already has portfolio

Power Your portfolio with Vdev Api (Customize Your portfolio in your style with Vdev Api)
React vdev api template
Html vdev api template

App link

Vdev - A portfolio and resume generator

VIMAL KUMAR — Tue, 30 Mar 2021 10:06:38 +0000

Hello 👋

I am happy to announce my latest project Vdev (A portfolio and resume generator)

vdev.in

Vdev generate Your portfolio based on info you filled in form and Show your info in a nice-way

Here is demo of generated Portfolio

Here is demo of resume Portfolio

Please Take a try and leave your suggestions/thoughts/opinions in the comments section.

Customize npm init default values

VIMAL KUMAR — Mon, 01 Mar 2021 12:14:36 +0000

npm init is a first process of any new node project and we all have to setup author, version and license manually, This tutorial help you to config those things globally .

This is default npm init -y result value

for chang default value of npm init command you need to follow this Synopsis

npm config set <key>=<value>

Change global author name by

npm config set init-author-name "vimal kumar"

Change global author email by

npm config set init-author-email "vimal@letskhabar.com"

Change global author web url by

npm config set init-author-url "https://vimal.letskhabar.com/"

Change global default license

npm config set init-license "MIT"

Change global default version

npm config set init-version "0.0.1"

For more check this npm documentation

All the change has been saved in your ~/.npmrc directory as shown in image below

Now when you create new project with npm init -y you can see your default value has been changed according to your setup.

Enjoy, Thanks for reading.

Your favourite submission of dohackathon

VIMAL KUMAR — Sun, 10 Jan 2021 14:47:59 +0000

Comment below your favourite submission of dohackathon

Photo by Jo Szczepanska on Unsplash