DEV Community: VIMAL KUMAR

Bloom & Nurture: A Private Pregnancy Companion Built with Gemma 2 for a Friend

VIMAL KUMAR — Sat, 03 Oct 2026 08:08:43 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

A few weeks ago, I was catching up with a close friend who recently entered her second trimester (15 weeks along). As we talked about her journey, what struck me most was how much daily mental coordination pregnancy requires—managing fluctuating energy levels, staying on top of hydration, remembering daily vitamins, and navigating constant questions about what her body and baby are experiencing each week.
To support her through this special chapter, I built Bloom & Nurture—a warm, all-in-one pregnancy companion web app powered by open-source AI (Google Gemma 2).
Designed to be gentle, intuitive, and easy to use for anyone without any technical setup, Bloom & Nurture brings together all the essential daily tools an expectant mother needs:

Ask Gemma AI (A Compassionate 24/7 Companion): A conversational companion tuned specifically for pregnancy. Whenever she wonders about sudden twinges, safe exercises, nutrition ideas, or sleep positions, she can chat freely with Gemma. It responds with medical warmth, structuring its answers in clear, beautiful bullet points with bold highlights and essential safety guidance on when to consult her doctor.
Personalized Week-by-Week Guide (Weeks 1 to 40): The app automatically detects her current stage (Week 15, Trimester 2) and puts her exact week right on screen. She can see:
- Her baby's adorable fruit size comparison (like an Apple 🍎 at Week 15!).
- Exact length (~10.1 cm) and weight (~70 g) milestones.
- What baby is doing inside (sensing light through the tummy, bones hardening from cartilage).
- What mom's body is experiencing, along with doctor-approved self-care tips.
- Quick filters to explore past or future trimesters whenever she wants.
Smart Hydration & Daily Vitamin Tracker: Staying well-hydrated is critical for maintaining healthy amniotic fluid levels and preventing muscle cramps. The app includes:
- A visual hydration progress ring.
- Quick one-tap water logging (+250ml, +500ml).
- Soothing audio chimes and configurable reminder intervals.
- A clean checklist for prenatal vitamins, iron, and calcium.
Essential Labor & Care Tools:
- Kick Counter: A calming tool ready for when she starts feeling active kicks, ensuring healthy fetal movements within 2 hours.
- Contraction Timer: A simple one-tap timer that measures duration and intervals, automatically calculating whether contractions meet the clinical "5-1-1 Rule" (5 minutes apart, 1 minute long, for 1 hour) so parents know when to head to the hospital.
- Hospital Bag Checklist: A categorized, interactive checklist covering essentials for mom, baby, and birth partner.
Private & Hassle-Free by Design: The app requires no account creation, passwords, or complex configurations. Everything saves instantly and safely to her device, and the AI runs directly on open weights for complete personal privacy.

Demo

Live Web App: pregnancy-sxq4.onrender.com
GitHub Repository: github.com/vimal-verma/bloom

Key Screenshots & Highlights:

1. Daily Journey Dashboard (Week 15 • Apple 🍎)

Personalized stage tracker with daily countdown, baby fruit size comparison, trimester progress bar, and today's schedule at a glance.

2. Ask Gemma AI (Private Obstetric Companion)

Tuned specifically with obstetric and maternal guidelines. Answers questions about symptoms, nutrition, and fetal development in clean, structured Markdown bullet points with medical safety disclaimers.

3. Daily Hydration & Prenatal Medicine Tracker

Helps prevent cramps and maintain amniotic fluid levels with interactive glass logging, customizable reminder schedules, soothing audio chimes, and prenatal vitamin checklists.

4. Week-by-Week Visual Pregnancy Guide (Weeks 1 to 40)

Automatically detects and centers on mom's active week. Explores baby anatomy milestones, maternal body changes, and practical self-care tips for every stage of pregnancy.

5. Maternal Care Tools

Practical peace-of-mind tools including a Fetal Movement & Kick Counter (2-hour window logging), a Contraction Timer with automatic clinical **5-1-1 Rule* triage indicator, and a Hospital Bag Checklist.*

Code

The complete source code is open source and available on GitHub:

vimal-verma / Bloom

🌸 Bloom & Nurture — Pregnancy & Daily Wellness Companion

A gentle, compassionate, and 100% private pregnancy companion powered by open-source AI (Google Gemma 2 via Ollama). Built with love for an expectant friend at Week 15 (Trimester 2).

🌐 Live Web App: https://pregnancy-sxq4.onrender.com/
📦 GitHub Repository: https://github.com/vimal-verma/bloom

📸 App Showcase

1. Daily Journey Dashboard (Week 15 • Apple 🍎)

Personalized stage tracker with daily countdown, baby fruit size comparison, trimester progress bar, and today's schedule at a glance.

2. Ask Gemma AI (Private Obstetric Companion)

3. Daily Hydration & Prenatal Medicine Tracker

Helps prevent cramps and maintain amniotic fluid levels with interactive glass logging, customizable reminder schedules, soothing audio chimes, and prenatal vitamin checklists.

4. Week-by-Week Visual Pregnancy Guide (Weeks

…

View on GitHub

Repository highlights:

Modelfile: Custom Ollama configuration fine-tuning Gemma 2:2b into a specialized pregnancy assistant (pregnancy-gemma) with obstetric safety guardrails.
app/api/chat/route.js: Resilient streaming API endpoint supporting dual providers: local Ollama inference and Google Gemini 2.0 Flash fallback with automatic model discovery and streaming SSE.
app/components/MarkdownRenderer.jsx: Custom Tailwind-styled Markdown engine rendering bold highlights, clean headings, and bullet points.
render.yaml: One-click blueprint deployment for Render.

How I Built It

1. The Core: Open-Source AI with Gemma 2 & Ollama

At the heart of the application is Google Gemma 2 (2B), an open-weight, high-efficiency model that runs blazingly fast on consumer laptops:

Obstetric Grounding: Using an Ollama Modelfile, I gave Gemma 2 a tailored system personality (Pregnancy Gemma). It injects dynamic trimester and gestational week context into every conversation, instructing the model to provide evidence-based reassurance while strictly enforcing clinical red-line warnings (e.g. severe bleeding, reduced fetal movement, vision changes).
Streaming Inference: Connected the Next.js server-side route to Ollama's /api/chat streaming endpoint, piping tokens directly to the browser with zero latency.

2. Modern Web Architecture

Next.js 16 (App Router) + React 19 + Turbopack: High-performance client-side hydration paired with lightweight server routes.
Tailwind CSS: Crafted a calming, warm maternal color palette using soft rose golds, coral accents, glassmorphic cards, and soothing micro-interactions.
Dual-Mode AI Bridge: For desktop use, mothers can run Gemma completely offline on their laptop (http://localhost:11434). For mobile browsing or cloud hosting, the app includes built-in Ngrok tunnel support and a Google Gemini 2.0 Flash cloud connector with automatic fallback.

Why Does Open Innovation Matter?

Pregnancy is the ultimate test case for why open-source AI matters:

Absolute Privacy for Sensitive Health Data: Maternal health and cycle data are among the most sensitive personal data points that exist. With closed SaaS APIs, user prompts and health status are sent to remote corporate servers, where data policies can change overnight. By building around open-weight Gemma 2 running locally in Ollama, my friend's queries and ultrasound notes never leave her hardware.
Zero Operating Cost & Forever Free: Closed API tokens incur ongoing costs that force apps to impose subscriptions or display ads. Open weights run locally for free, meaning this tool can remain forever free for any expectant parent who needs it.
Tailored Prompting & Safety Customization: With open models, developers have full authority over model behavior, temperature, system prompts, and safety rules without arbitrary content blocking or hidden moderation shifts.

Prize Categories

I am entering this project in the following categories:

🌟 Best Use of Gemma

Gemma 2 (gemma2:2b) is the foundational engine of Bloom & Nurture. We customized Gemma 2 using an Ollama Modelfile to create a dedicated, compassionate obstetric assistant that understands fetal development, gestational weeks, and trimester nutrition, providing private, localized medical guidance right on the mother's device.

🚀 Best Use of Render

The application is fully configured for Render with a declarative render.yaml blueprint. It compiles Next.js with Turbopack and seamlessly handles webhooks, environment variables, and remote AI tunneling for 24/7 web access.

Handing It Over to My Friend

When I showed the app to my friend and
When she entered her due date, the entire interface immediately transformed for her:

Week 15 • Trimester 2 • Baby is approximately the size of an Apple 🍎!
Seeing the little apple milestone made her smile right away—she had just entered the second trimester and was excited to see what lay ahead. From there, she began exploring the features:

Testing Ask Gemma AI: She opened the chat and typed a question that had been on her mind all week: > "I'm at Week 15 and my nausea is finally fading, but I've been feeling sudden sharp twinges on the sides of my lower belly when I sneeze or get up quickly. Also, my nose has been weirdly congested. Is this normal, and when will I start feeling baby's first movements?" Within seconds, Gemma generated a beautifully formatted, reassuring reply:
- Clearly explaining Round Ligament stretching as the uterus rises up out of the pelvis into the lower abdomen.
- Demystifying Pregnancy Rhinitis (increased blood flow and hormones causing harmless nasal swelling) with gentle tips like using a saline spray or humidifier.
- Answering her kick question with excitement: explaining that first gentle fluttering movements (known as "quickening") usually begin between Weeks 16 and 20.
- Recommending good calcium intake (1,000 mg/day) to support baby's skeleton as it hardens from cartilage into bone.
- Concluding with clear, calming medical guidance on when to check in with her doctor.
Exploring the Water & Vitamin Tracker: She tapped the "+250ml" button, heard the gentle success chime, and watched the circular hydration ring advance toward her daily target. She was thrilled to have a clean checklist for her daily prenatal vitamins and calcium so she wouldn't have to second-guess herself later in the day.
Discovering the Guide & Upcoming Care Tools: Browsing the Week-by-Week Guide, she loved seeing what changes to expect over the next few weeks. Knowing that the app also includes a Kick Counter ready for when her flutters begin, plus a Contraction Timer and Hospital Bag Checklist for later in her pregnancy, gave her an immediate feeling of preparedness. Her reaction summed up everything I hoped to achieve: > "Having everything I need in one calm, beautiful place—from the daily water chimes to an AI that answers my questions with kindness and clear bullet points—takes so much anxiety off my shoulders. It feels like having a warm, knowledgeable companion walking with me every single day until delivery." Seeing how much confidence and comfort it brought her was the most rewarding part of this challenge. It was proof that AI is at its best when it genuinely helps someone you love feel supported and cared for.

Thank you to DEV, GitHub, Hacktoberfest, and the partners for inspiring this build!

How to Read and Write NFC Tags Directly in the Browser with the Web NFC API

VIMAL KUMAR — Sat, 29 Aug 2026 07:47:51 +0000

Near Field Communication (NFC) used to require native iOS or Android mobile applications. With the Web NFC API, modern web apps can now read and write physical NFC tags directly in the browser—no app store downloads needed!
Whether you are building digital business cards (vCards), smart event passes, Wi-Fi credentials sharing, or hardware tap-to-pay experiences, Web NFC unlocks a whole new dimension of web-to-physical interactions.
In this guide, we'll cover:

📱 Browser & device support
📖 Reading data from NFC tags (NDEFReader.scan)
✍️ Writing text, URLs, and vCards (NDEFReader.write)
🔒 Locking tags to read-only (makeReadOnly)
⚠️ Security & permission requirements

📱 Browser & Hardware Requirements

Before writing code, keep in mind:

Browser Support: Currently supported natively in Chrome for Android (v89+).
Protocol: Requires HTTPS (https://) or localhost during development.
Hardware: An Android device with an active NFC chip and standard NDEF-compatible NFC tags (e.g., NTAG213, NTAG215, NTAG216).

Feature Detection Always verify browser support before prompting the user:

function checkNfcSupport() {
  if ('NDEFReader' in window) {
    console.log('✅ Web NFC is supported!');
    return true;
  } else {
    console.warn('⚠️ Web NFC is not available on this browser/device.');
    return false;
  }
}

Reading NFC Tags To start scanning, instantiate NDEFReader and call .scan(). Must be triggered by a user action (e.g., a button click).

async function startScanning() {
  try {
    const ndef = new NDEFReader();
    await ndef.scan();
    console.log('📡 NFC Scan started. Bring a tag close to your phone...');
    // Event listener for reading NDEF messages
    ndef.addEventListener('reading', ({ message, serialNumber }) => {
      console.log(`✅ Tag Detected! Serial Number: ${serialNumber}`);
      for (const record of message.records) {
        console.log(`Record Type: ${record.recordType}`);
        console.log(`MIME Type:   ${record.mediaType || 'N/A'}`);
        // Handle Text Records
        if (record.recordType === 'text') {
          const textDecoder = new TextDecoder(record.encoding);
          const textContent = textDecoder.decode(record.data);
          console.log(`> Text Payload: ${textContent}`);
        }
        // Handle URL Records
        else if (record.recordType === 'url') {
          const textDecoder = new TextDecoder();
          const urlContent = textDecoder.decode(record.data);
          console.log(`> URL Payload: ${urlContent}`);
        }
        // Handle vCards / Custom MIME Types
        else if (record.mediaType === 'text/vcard') {
          const vcardText = new TextDecoder().decode(record.data);
          console.log(`> vCard Content:\n${vcardText}`);
        }
      }
    });
    ndef.addEventListener('readingerror', () => {
      console.error('❌ Error reading NFC tag. Try positioning the tag closer.');
    });
  } catch (error) {
    console.error(`Error starting scan: ${error.message}`);
  }
}

Writing Data to NFC Tags Writing to an NFC tag replaces existing NDEF records with new payloads.

A. Writing a Simple URL or Text

async function writeUrlToTag(urlToSave) {
  try {
    const ndef = new NDEFReader();
    await ndef.write({
      records: [
        {
          recordType: 'url',
          data: urlToSave
        }
      ]
    });
    console.log('🎉 Successfully wrote URL to NFC tag!');
  } catch (error) {
    console.error(`Write failed: ${error.message}`);
  }
}

B. Writing a Digital Contact Card (vCard)
You can write vCards using mediaType: 'text/vcard':

async function writeVCardToTag(contact) {
  const vcardPayload = [
    'BEGIN:VCARD',
    'VERSION:3.0',
    `FN:${contact.name}`,
    `TEL:${contact.phone}`,
    `EMAIL:${contact.email}`,
    `URL:${contact.website}`,
    'END:VCARD'
  ].join('\r\n');
  try {
    const ndef = new NDEFReader();
    await ndef.write({
      records: [
        {
          recordType: 'mime',
          mediaType: 'text/vcard',
          data: new TextEncoder().encode(vcardPayload)
        }
      ]
    });
    console.log('📇 vCard written to NFC card successfully!');
  } catch (error) {
    console.error(`vCard write error: ${error.message}`);
  }
}

Locking Tags (Making Them Read-Only) ⚠️ Warning: Making a tag read-only is permanent and irreversible!

async function lockTagPermanently() {
  const confirmed = confirm('Are you sure you want to permanently lock this tag? This cannot be undone!');
  if (!confirmed) return;
  try {
    const ndef = new NDEFReader();
    await ndef.makeReadOnly();
    console.log('🔒 Tag locked successfully. It can no longer be overwritten.');
  } catch (error) {
    console.error(`Failed to lock tag: ${error.message}`);
  }
}

🛡️ Best Practices & Security
User Gesture Requirement: Scanning and writing must be triggered by an explicit user gesture (e.g., button click).
HTTPS Requirement: Modern Web NFC will fail on non-secure contexts (http://), except for local development (localhost).
Handling Timeout: Use AbortController to handle scan timeouts or cancel operations if the user navigates away.

const controller = new AbortController();
async function scanWithTimeout() {
  const ndef = new NDEFReader();
  await ndef.scan({ signal: controller.signal });

  // Abort scan after 15 seconds if no tag is tapped
  setTimeout(() => controller.abort(), 15000);
}

🚀 Live Demo & Open Source Tools
Want to test Web NFC directly in your browser without writing boilerplates?

Check out NfcTool.org — a free suite of browser-based Web NFC tools for:

📖 Scanning & Inspecting NFC Tags
✍️ Programming NFC Cards
🔒 Locking & Formatting NDEF Payloads
📇 Generating NFC vCards & QR Codes
💬 What are you building with Web NFC?

Are you experimenting with Web NFC for event check-ins, smart cards, inventory tags, or IoT devices? Share your thoughts and projects in the comments below! 👇

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 NfcTool.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://NfcTool.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.