DEV Community: Yogesh Chavan

I Built The Most Advanced Job Application Tracker

Yogesh Chavan — Sat, 08 Aug 2026 09:14:45 +0000

If you're actively applying for jobs, you probably know the struggle:

Did I already apply to this company?
Which resume version did I send?
What salary did I mention when I applied?
What was the budget mentioned in the job posting?
When did I apply for this one?
Which interviews are scheduled this week?
What were the HR contact details again?
What exactly were the requirements for this role?
When is my next interview?
Where did I even find this posting?
How many of my applications are actually turning into interviews?

Every one of those is answerable. The problem is that the answers are scattered across a spreadsheet, a notes app, your inbox, and your memory — and reassembling them takes longer than the follow-up you were trying to send.

Spreadsheets are where most people start, and they hold up until somewhere around application number twelve. After that, searching, filtering, and keeping the thing current becomes its own small job — and a spreadsheet still won't tell you that six applications have been sitting in "Applied" for a month, or whether your last twenty went better than the twenty before them.

That's why I built HireLoop — an advanced job application tracker meant to reduce the mental load of a job search rather than add to it.

Live app: hireloop.yogeshchavan.dev — free to use, with a demo account if you'd rather look around before signing in.

Check out the application demo video below:

Check out some preview images of the application

The short version

With HireLoop you can:

Track every application in one place — status, dates, salary, source, and links
See where your search stands at a glance on a dashboard
Move applications through a Kanban pipeline
Search, filter, and sort as the list grows
See interviews and deadlines on a calendar
Analyse interview rates, offer rates, application trends, and which sources actually work
Store notes, resume versions, HR contacts, salary details, and job links per application
Mark the ones that matter as favourites
Keep it private, behind Google or GitHub sign-in

The rest of this post is the detail behind those lines.

The stack

Next.js 16 (App Router) with React 19 and TypeScript
Tailwind CSS v4 with shadcn/ui components
Neon PostgreSQL via Drizzle ORM
better-auth for Google and GitHub sign-in
Recharts for charts, @dnd-kit for the board, Zod for validation

Trying it

The app is live at hireloop.yogeshchavan.dev and free to use. There's also a seeded demo account, so you can look around without signing in at all — hit Try Demo Account on the login page and you'll land in a tracker with sample applications already in it.

Wrapping up

Job hunting is stressful enough on its own. The tools around it should be taking weight off, not adding a maintenance task you feel guilty about skipping.

HireLoop exists because the interesting part of a job search isn't the list — it's the question of whether what you're doing is working, and that question needs structured data and honest math to answer. If you're in a search right now, the demo at hireloop.yogeshchavan.dev is the fastest way to see whether that framing is useful to you.

About Me

I'm a freelancer, mentor, and full-stack developer with 9+ years of experience, working primarily with React, Next.js, and Node.js.

Alongside building real-world web applications, I'm also an Industry/Corporate Trainer, training developers and teams in modern JavaScript, Next.js, and MERN stack technologies with a focus on practical, production-ready skills.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

Stop Writing Every Job Application Email from Scratch

Yogesh Chavan — Fri, 03 Jul 2026 11:46:26 +0000

If you're actively looking for a job, you've probably experienced this.

You find a role that matches your skills.

You update your resume (or at least think about it).

Then comes the application email.

You open a blank email and spend the next 10–15 minutes trying to write something that sounds professional, personalized, and different from the last email you sent.

Now repeat that process for 20, 50, or even 100 job applications.

It quickly becomes one of the most repetitive parts of job searching.

The Problem With Generic Application Emails

Most applicants eventually fall into one of two patterns.

Option 1: Copy and paste the same email

This is the fastest approach, but it usually produces emails that could be sent to any company.

They rarely mention why you're a good fit for a specific role or how your experience aligns with the job requirements.

Option 2: Rewrite every email manually

The opposite approach is to carefully tailor every application.

While this produces better emails, it also consumes a significant amount of time.

When you're applying to multiple jobs every day, those minutes add up quickly.

Personalization Doesn't Have to Be Slow

Most job descriptions follow a similar structure.

They list:

Required skills
Preferred experience
Responsibilities
Location
Employment type
Additional requirements

Your resume already contains your experience and skills.

The real challenge is connecting those two pieces of information in a way that feels relevant to the specific position.

That's a task AI is well suited for.

Building ApplyAI

To simplify this process, I built ApplyAI.

The idea was straightforward:

Upload your resume once.
Paste a LinkedIn job URL or the job description from any job portal.
Let AI analyze both.
Generate customized email matching with uploaded resume and job description

Instead of starting with a blank page every time, the application generates a draft tailored to the role.

Watch Quick Demo Below:

What It Generates

For each job posting, ApplyAI creates:

A personalized email subject line
A tailored job application email
Skills and experience matched to the job requirements

The generated email isn't locked.

You can review it, edit any section, regenerate it if needed, and copy it with a single click.

Remembering Important Details

Many recruiters ask applicants to include additional information such as:

Current CTC
Expected CTC
Notice period
Availability
Preferred location

These requests are easy to overlook when applying to many positions.

ApplyAI checks the job description and reminds you to include these details whenever they're requested.

Built for Frequent Job Applications

When you're applying for several positions each week, organization becomes just as important as writing.

The application keeps a history of previously generated emails, making it easy to revisit or reuse past applications.

Instead of searching through your inbox or local files, everything stays in one place.

Privacy by Design

One of the goals while building ApplyAI was to avoid unnecessary data sharing.

The application can be self-hosted, allowing your resume and generated emails to remain in your own database.

Your data stays under your control rather than being stored in someone else's cloud service.

Setting It Up

The project is designed to be simple to run locally.

The setup takes only a few minutes, and the same application can also be deployed to production if you'd like to host it online.

Watch Complete Demo Below:

Final Thoughts

Writing thoughtful application emails is valuable, but writing the same email dozens of times isn't.

Automating the repetitive parts lets you spend more time doing the things that actually improve your chances of getting interviews—researching companies, preparing for technical rounds, improving your resume, and practicing interview questions.

If you're applying to multiple jobs every week, having a tool that generates personalized drafts can save hours while making every application more relevant to the role you're targeting.

GET THE APPLICATION SOURCE CODE + SETUP VIDEO HERE

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

Master Redux Toolkit & RTK Query Without Spending Weeks Reading Documentation

Yogesh Chavan — Sun, 28 Jun 2026 06:49:16 +0000

If you're a React developer, you've probably reached a point where your application has started becoming difficult to manage.

As your project grows, you'll eventually need to handle:

Global state management
API data fetching
Loading and error states
Data caching
Cache invalidation
Scalable project architecture

This is exactly where Redux Toolkit and RTK Query shine.

The problem?

Most developers spend weeks reading documentation, watching random YouTube videos, and still struggle to connect everything together.

That's why I'm hosting a live online webinar where you'll learn everything by live in a hands-on demo.

📅 Webinar Details

Title: Mastering Redux Toolkit & RTK Query
Date: 28th June 2026 (Sunday)
Time: 6:00 PM IST
Duration: 3 Hours
Mode: Live Online (Zoom)

What You'll Learn

We'll start from the basics and gradually move to advanced concepts.

Redux Fundamentals

What Redux actually is
Why Redux exists
Understanding the Store
Understanding Actions
Understanding Reducers

Redux Toolkit

Creating your first Slice
Managing application state
Store configuration
Writing clean Redux code
Redux Toolkit best practices

Async Operations

Working with createAsyncThunk
Fetching data from APIs
Handling loading states
Error handling
Success responses

RTK Query

RTK Query from scratch
API integration
Data fetching
Automatic caching
Cache invalidation
Refetching strategies
Mutations

Real-World Project

Together we'll build a complete application that demonstrates:

State management
API integration
CRUD operations
Production-ready folder structure
Best practices used in real projects

Bonus for Every Attendee

Every attendee will receive:

RTK Query Cheatsheet
Complete webinar recording
Full application source code

Once you register for the webinar, even if you can't attend live, you'll still receive all of the above after the webinar.

Why Attend This Webinar?

Instead of spending weeks trying to understand Redux from scattered tutorials, you'll learn everything in one structured session.

Here's what makes this webinar different:

Learn by building a real application
Beginner-friendly explanations
Step-by-step implementation
Real-world examples
Production-ready best practices
Live Q&A session
Get your doubts cleared in real time

No Prior Redux Knowledge Required

Never used Redux before?

No problem.

We'll start from absolute basics and build everything step by step, making this webinar perfect for beginners.

Is This Webinar For You?

This webinar is perfect if you:

Know React but struggle with state management
Want to learn Redux Toolkit properly
Want to master RTK Query
Want to build scalable React applications
Need to fetch API data efficiently
Want to understand caching strategies
Want to prepare for React interviews
Want to write cleaner and more maintainable code

Why Learn Redux Toolkit & RTK Query?

Many React developers eventually struggle with problems like:

Prop drilling
Managing complex application state
Repeated API requests
Manual loading and error handling
Keeping cached data synchronized
Poor project organization

Redux Toolkit dramatically reduces Redux boilerplate, while RTK Query handles API fetching, caching, synchronization, and invalidation with very little code.

Together, they help you build modern, scalable React applications much faster.

What You'll Walk Away With

By the end of this workshop, you'll be able to:

Build scalable React applications
Manage complex application state confidently
Fetch API data the modern way
Implement caching like a professional
Structure large React projects
Use Redux Toolkit in production applications
Build APIs using RTK Query with confidence

Reserve Your Seat Now

Seats are intentionally limited to keep the session interactive.

If you've been putting off learning Redux Toolkit and RTK Query, this is your opportunity to master both in just 3 hours through practical, hands-on learning.

Register now and start building production-ready React applications with confidence.

REGISTER FOR THE WEBINAR HERE

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

HireHub: Launch Your Own Job Board And Hiring Platform Without Spending Months on Development

Yogesh Chavan — Sat, 20 Jun 2026 09:00:51 +0000

Finding the right talent and helping job seekers discover opportunities shouldn't require building a complex platform from scratch.

That's exactly why I built HireHub — a complete, production-ready job board and hiring platform designed for entrepreneurs, startups, recruitment agencies, communities, and businesses looking to launch their own hiring marketplace quickly.

I have built many such products, which you can check out on my Portfolio page.

Why Build a Job Board?

The online recruitment industry continues to grow as companies increasingly rely on digital hiring solutions. Businesses need efficient ways to attract talent, while job seekers expect modern search experiences, streamlined applications, and personalized recommendations.

Building such a platform from scratch can take months of development, testing, and refinement.

HireHub eliminates that challenge.

Meet HireHub

HireHub is a modern multi-role job board platform that provides dedicated experiences for:

Job Seekers
Employers
Administrators

Everything is designed to deliver a seamless hiring experience from job posting to candidate selection.

Try it out for FREE

Check out the application demo using the Watch Demo button in the header

Features for Job Seekers

Advanced Job Search

Help users find relevant opportunities quickly with powerful filtering options:

Search by job title
Filter by location
Job type - part-time, full-time
Employment type filters

One-Click Applications

Candidates can apply for jobs effortlessly using their profile information, resume, and cover note in a single click.

AI-Powered Experience

Candidate can upload their resume, and AI will extract all the details from the resume and fill out the application details like personal info, skills, education, experience, and more.

Personalized Dashboard

Job seekers can:

Track applications
Save jobs
Manage profiles
Upload resumes
View application history

Features for Employers

Create and Manage Job Listings

Employers can:

Post jobs
Edit listings
Close positions
Track applications

Applicant Management

Review and manage candidates through a clean dashboard designed to simplify the hiring process.

Company Profiles

Allow organizations to showcase:

Company information
Branding
Open positions
Hiring details

Recruitment Workflow

Streamline hiring operations from job creation to candidate selection.

Modern Technology Stack

HireHub is built using modern web technologies to ensure performance, scalability, and maintainability.

Technologies Used - Next.js 16, Shadcn/UI, Tailwind CSS, PostgreSQL database with Drizzle ORM.

Benefits include:

In-built SEO support
Fast page loads
Responsive design
Mobile-friendly experience
Modern UI/UX
Scalable architecture

Who Can Use HireHub?

HireHub is ideal for:

Recruitment Agencies
HR Consultancies
Startup Founders
Community Builders
Niche Job Boards
Freelance Marketplaces
Industry-Specific Hiring Platforms
Educational Institutions
Corporate Hiring Portals

Whether you're targeting tech jobs, healthcare roles, remote work opportunities, or industry-specific hiring, HireHub provides a solid foundation.

Save Months of Development Time

Instead of spending months building:

Authentication
User management
Employer dashboards
Job management systems
Candidate tracking
Admin panels
Search functionality

You can launch with a proven platform and focus on growing your business.

Customization Available

Need additional features?

The platform can be customized to fit your specific business requirements, including:

Custom branding
Additional user roles
Payment integrations
Subscription plans
Premium job listings
Advanced analytics
Custom workflows

Ready to Launch Your Own Job Board?

HireHub gives you everything you need to launch a professional hiring platform quickly and efficiently.

Whether you're building a niche recruitment marketplace, a startup hiring portal, or a large-scale job board, HireHub provides the foundation to get started immediately.

Live Demo

https://hirehub.yogeshchavan.dev

Interested in Purchasing or Customizing HireHub?

Get in touch to discuss customization and feature requirements.

Launch faster. Hire smarter. Grow your recruitment business with HireHub.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

Cypress Testing: Complete Beginner's Guide

Yogesh Chavan — Sat, 06 Jun 2026 06:51:34 +0000

Section 1: Getting Started with Cypress

1. Installing and Setting Up Cypress

Prerequisites

Before installing Cypress, ensure you have Node.js installed on your machine. Cypress requires Node.js 18.x or 20.x and above. You should also have an existing React project or create a new one.

Check your Node.js version by running this command in your terminal:

node --version
# Should output v18.x.x or higher

Creating a React Project (Optional)

If you don't have an existing React project, create one using Vite which is the recommended approach for new React projects:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

Installing Cypress

Navigate to your React project directory and install Cypress as a development dependency. Cypress is a fairly large package, so the installation might take a minute or two:

npm install cypress --save-dev

# Or using yarn
yarn add cypress --dev

Opening Cypress for the First Time

After installation, open Cypress for the first time. This will create the initial folder structure and configuration files:

npx cypress open

When Cypress opens for the first time, you'll see a welcome screen where you can choose between E2E Testing and Component Testing. Select E2E Testing to get started with end-to-end tests.

Cypress will then prompt you to choose a browser. You can select Chrome, Firefox, Edge, or Electron. Choose your preferred browser and click Start E2E Testing in [Browser].

Adding NPM Scripts

Add convenient scripts to your package.json for running Cypress tests:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "test:e2e": "start-server-and-test dev http://localhost:5173 cy:run"
  }
}

Tip: Use npm run cy:open for interactive development with the Cypress Test Runner. Use npm run cy:run for headless execution in CI/CD pipelines.

2. Understanding Cypress Project Structure

Project Directory Overview

After initializing Cypress, you'll notice several new folders and files in your project. Understanding each directory and file is essential for organizing your tests effectively.

my-react-app/
├── cypress/
│   ├── downloads/
│   ├── e2e/
│   │   └── spec.cy.js
│   ├── fixtures/
│   │   └── example.json
│   └── support/
│       ├── commands.js
│       └── e2e.js
├── cypress.config.js
├── package.json
└── src/
    └── (your React app)

Key Directories and Files

`cypress/e2e/`

This is where your test files live. Each test file should have the .cy.js extension (or .cy.ts for TypeScript). Cypress will automatically discover and run all test files in this directory.

`cypress/fixtures/`

Fixtures are used to store static test data, typically in JSON format. You can use fixtures to mock API responses or provide consistent test data across multiple tests.

// cypress/fixtures/user.json
{
  "name": "John Doe",
  "email": "john@example.com",
  "role": "admin"
}

`cypress/support/commands.js`

This file is where you define custom Cypress commands. Custom commands help you create reusable test logic that can be shared across multiple test files.

// cypress/support/commands.js

// Custom command to login
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('[data-testid="email"]').type(email);
  cy.get('[data-testid="password"]').type(password);
  cy.get('[data-testid="submit"]').click();
});

`cypress.config.js`

This is the main configuration file for Cypress. Here you can set the base URL, viewport dimensions, timeouts, and many other options.

// cypress.config.js
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:5173',
    viewportWidth: 1280,
    viewportHeight: 720,
    defaultCommandTimeout: 10000,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Tip: Always set a baseUrl in your cypress.config.js. This allows you to use cy.visit('/') instead of cy.visit('http://localhost:5173/'), making your tests cleaner and easier to maintain.

Configuring ESLint for Cypress

When you open Cypress test files in VS Code, you might see ESLint errors like the following:

// Error shown in VS Code:
// 'describe' is not defined. eslint(no-undef)
// 'it' is not defined. eslint(no-undef)
// 'cy' is not defined. eslint(no-undef)
// 'beforeEach' is not defined. eslint(no-undef)

This happens because ESLint doesn't know about Cypress global variables. These are not actual errors — your tests will still run. However, to fix these warnings and get proper IntelliSense support, install the Cypress ESLint plugin:

npm install eslint-plugin-cypress --save-dev

Then update your ESLint configuration file (eslint.config.js). First, add the import at the top of the file:

import cypressPlugin from 'eslint-plugin-cypress';

Then add the following configuration to your ESLint config:

plugins: {
  cypress: cypressPlugin,
},
extends: [
  js.configs.recommended,
  'plugin:cypress/recommended',
  reactHooks.configs.flat.recommended,
  reactRefresh.configs.vite,
],
env: {
  'cypress/globals': true,
},

3. Writing Your First Cypress Test

Test File Structure

Cypress uses Mocha's BDD syntax for structuring tests. If you've used Jest or Mocha before, you'll feel right at home. Tests are organized using describe blocks for grouping and it blocks for individual tests.

Let's create your first test file. First, here's the React component we'll be testing — a simple Home page component:

// src/pages/Home.jsx
import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div className="home">
      <h1>Welcome to Our App</h1>
      <p>This is the home page of our application.</p>
      <nav>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
        <Link to="/counter">Counter</Link>
      </nav>
    </div>
  );
};

export default Home;

Setting Up the App with Routing

To use this Home component, we need to set up React Router in our application. First, install react-router-dom:

npm install react-router-dom

Now, set up your App.jsx with routing to use the Home component:

// src/App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Start your development server to run the application:

npm run dev
# App will be available at http://localhost:5173

Writing the Test

Now, create a new file called home.cy.js in the cypress/e2e directory to test this component:

// cypress/e2e/home.cy.js

describe('Home Page', () => {
  beforeEach(() => {
    // Visit the home page before each test
    cy.visit('/');
  });

  it('should display the welcome message', () => {
    cy.contains('Welcome to Our App').should('be.visible');
  });

  it('should have a navigation menu', () => {
    cy.get('nav').should('exist');
    cy.get('nav a').should('have.length.at.least', 1);
  });
});

Code Explanation

cy.visit('/') — Navigates to the home page of your application. The '/' path uses the baseUrl configured in cypress.config.js.
cy.contains('Welcome to Our App') — Searches the DOM for an element containing the specified text.
.should('be.visible') — Asserts that the element is visible on the page. This checks that the element exists, is in the viewport, and is not hidden by CSS.
cy.get('nav') — Selects the nav element from the DOM.
.should('exist') — Asserts that the element exists in the DOM. Unlike 'be.visible', this doesn't check if the element is actually visible to the user.
.should('have.length.at.least', 1) — Asserts that there is at least one matching element (in this case, at least one link inside the nav).

Important: Make sure inside cypress.config.js file, you have set the baseUrl to http://localhost:5173 for this test to pass. This allows cy.visit('/') to navigate to your local development server.

When you run npm run cy:open and select E2E Testing, you'll see the Cypress Test Runner interface. It will display your test files under the cypress/e2e folder. You should see your home.cy.js file listed there. Click on it to run the tests.

Understanding the Test Structure

describe() — Groups related tests together. You can nest describe blocks for better organization. The first argument is a string describing what you're testing.
beforeEach() — Runs before each test in the describe block. Perfect for setup tasks like visiting a page or logging in. There's also afterEach(), before(), and after().
it() — Defines an individual test case. Each it block should test one specific behavior. The first argument describes what the test should do.

Want the Complete Guide?

This article is an excerpt from my Cypress Testing - Complete Beginner's Guide. For the full, in-depth walkthrough — with every concept explained step-by-step and ready-to-use code examples — check out the complete guide.

Here's everything you'll learn inside:

→ What is Cypress & why it's replacing Selenium for modern web testing
→ Installing and setting up Cypress from scratch
→ Writing your first Cypress test (step-by-step with a real React app)
→ Selecting elements the right way — so your tests never break randomly
→ Interacting with elements — clicks, typing, dropdowns, file uploads & more
→ Assertions and expectations that actually work (and auto-retry)
→ Working with aliases and handling Cypress's async behavior
→ Testing React components in complete isolation
→ Mocking API calls with cy.intercept() for fast, reliable tests
→ Testing forms, validation, and real-time user input
→ Testing authentication flows — login, logout & protected routes
→ Best practices used by top engineering teams to keep test suites maintainable

If you found this article helpful, the full guide takes it much further.

Want More Such Guides? Check out the Ultimate React Ebooks Collection with 20+ useful and practical guides.

Don't Miss This!

Don't miss the Lifetime/Pro Subscription — get lifetime access to all my 30+ current and all future courses, ebooks, webinars along with Applications Source Code Bundle (Bonus Offer), for just $10 / ₹850 (95% OFF).

⚡ Limited-Time Offer
⚡ One-Time Payment
⚡ Lifetime Access
⚡ All Future Courses/ebooks/webinars Included

The discount won't stay forever. Grab it while it's available.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

What's hiding behind that link? There's only one way to find out.

Yogesh Chavan — Fri, 05 Jun 2026 08:49:21 +0000

You get a message with a link: https://bit.ly/4xgurWK

No context. No preview. Just a short URL pointing somewhere unknown.

Most people do one of two things — click it and hope for the best, or ignore it entirely. Neither is great. There's a third option, and it's what I built RevealURL for.

The Problem With Short Links

URL shorteners are genuinely useful. They tame long, unwieldy links for sharing on social media, in print, or in messages.

But they come with a tradeoff: you can no longer see where you're going before you arrive.

That tradeoff is mostly harmless when you trust the sender. But in practice, short links show up in:

Phishing emails that impersonate your bank
Spam DMs on Twitter/X, Instagram, and WhatsApp
QR codes on random posters and flyers
Newsletter footers from lists you barely remember joining

The link itself tells you nothing. And by the time your browser has loaded it, it's too late — the request has already been made, tracking pixels have fired, and if something was malicious, the damage may already be done.

What RevealURL Does

RevealURL resolves a shortened URL all the way to its final destination — without ever opening it in your browser.

Paste a link, hit Reveal, and within seconds you'll see:

The final destination URL — exactly where the link ends up, after all redirects are followed.

The full redirect chain — every hop along the way, with its HTTP status code. A well-behaved link usually has one or two hops. Five or more is a red flag worth knowing about.

A safety score — a heuristic 0–100 rating that checks for things like raw IP addresses, missing HTTPS, suspicious keywords in the URL, look-alike punycode domains, high-abuse TLDs, and unusually deep subdomain structures.

A URL breakdown — protocol, domain, path, and query parameters laid out clearly so you can read what's actually in the link.

The key detail: the resolution happens on the server. Your browser never touches the destination. You see the result; the link never sees you.

A Quick Example

Take a link like https://bit.ly/4xgurWK. That's Bitly link shortener, and it wraps nearly every URL posted on the platform. Paste it into RevealURL and you'll see:

Hop 1: https://bit.ly/4xgurWK → 301 → the actual destination
Final URL: https://courses.yogeshchavan.dev/
Safety score: 100 / 100 — Safe

Now imagine that final URL was http://198.51.100.4/login instead. The score would drop significantly, and you'd see exactly why — raw IP address, no HTTPS, suspicious path. You'd know not to click before clicking.

What It Doesn't Do

Worth being clear about what the tool is and isn't:

It's not a virus scanner. It doesn't download or execute anything at the destination — it only inspects HTTP headers and the URL structure itself.
It doesn't log your queries. There's no database, no account system, no tracking. URLs are resolved on demand and the result goes straight to your browser.

Who It's For

If any of these sound familiar, it might be useful:

You receive links from strangers or automated systems and want a sanity check
You're curious what's hiding behind a shortened URL before sharing it further
You're a developer and want to quickly inspect redirect chains without writing a curl one-liner
You're teaching someone about link safety and want a visual, approachable tool

Try It

revealurl.yogeshchavan.dev

No signup. No install. Paste a link, see where it goes.

The next time someone sends you a sketchy-looking short URL — or even one that looks totally fine — you'll know exactly where it leads before you commit to clicking.

Don't Miss This!

⚡ Limited-Time Offer
⚡ One-Time Payment
⚡ Lifetime Access
⚡ All Future Courses/ebooks/webinars Included

The discount won't stay forever. Grab it while it's available.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

I Built an App That Puts You Anywhere in the World — Without Leaving Your Room

Yogesh Chavan — Wed, 03 Jun 2026 07:26:13 +0000

A few months ago, I needed a fresh set of professional photos for my online presence. The kind of shots where you're standing in front of the Eiffel Tower looking effortlessly cool, or walking down a street in Tokyo with the perfect golden-hour light behind you.

The problem? A professional photoshoot costs $500+, takes weeks to schedule, and requires you to actually be at that location. And if you're a freelancer or creator on a budget, that math just doesn't work.

So I built Frame.

The idea is simple

You upload a few selfies. You pick a destination — Paris, Bali, the Sahara, a quiet street in Santorini, literally anywhere. Frame then generates a full gallery of studio-quality portraits of you, in that location, with natural poses and DSLR-level aesthetics.

Your face stays perfectly recognizable in every shot. That was the non-negotiable part for me. What's the point of AI-generated photos if they don't actually look like you?

How it works

The whole process takes about a minute:

Upload 1–10 clear photos of yourself — different angles help, skip the sunglasses.
Search for any location on earth — landmarks, beaches, cities, deserts. There are 40+ popular destinations ready to go, or you can type in anything you can imagine.
Tweak if you want — lighting, mood, camera angle, aspect ratio. Or just let the defaults handle it.
Generate — you get a full gallery of varied poses: walking, candid, side profile, looking away. No stiff stock-photo energy.

Check out the application demo below.

Who's actually using this

I originally built it for myself, but it turns out a lot of people have the same problem:

Creators who need fresh content for social media without doing a full shoot every month.
Founders and professionals who want a sharp headshot for LinkedIn or their website but don't want to spend a day at a studio.
Brand teams running product shoots on tight budgets and tighter timelines.
Anyone who just wants to see what they'd look like standing on a cliff in Santorini (no judgment — I did this first).

A few things I'm proud of

Privacy is baked in. Your reference photos live only on your account and are deleted immediately once the photoshoot is generated. This wasn't an afterthought — it was a design decision from day one.

The prompt guide. Not everyone knows how to describe the shot they want. So I built a curated collection of ready-made prompts for iconic spots — Eiffel Tower, Bali Beach, Tokyo streets, and more. Just pick one, copy it, and go.

The output quality. I spent a lot of time tuning the DSLR aesthetic. The photos don't look AI-generated in the way you'd expect. They look like someone actually hired a photographer.

Generated Sample Photos

Here are some of the generated sample photos to see it in action.

Try it yourself

Frame is live at frame.yogeshchavan.dev.

It's FREE to use.

Upload a selfie, pick a place, and see what comes back. That's the best way to judge it.

I'd genuinely love to hear what you think. What locations did you try? What would you want to see added?

Don't Miss This!

⚡ Limited-Time Offer
⚡ One-Time Payment
⚡ Lifetime Access
⚡ All Future Courses/ebooks/webinars Included

The discount won't stay forever. Grab it while it's available.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

Learn MERN Stack by Building and Deploying a Real FullStack Application — Live 2-Day Webinar

Yogesh Chavan — Fri, 22 May 2026 06:55:52 +0000

If you've been putting off learning fullstack development, this weekend is your chance to finally make it happen.

I'm hosting a live, hands-on 2-Day MERN Stack Webinar where we'll build and deploy a complete fullstack application from scratch — no slides, no fluff, just real code.

📅 Dates & Timings

Day	Date	Time
Day 1	23rd May (Friday)	6:00 PM – 9:00 PM IST
Day 2	24th May (Saturday)	6:00 PM – 9:00 PM IST

Platform: Zoom (Live)
Recording: Yes — all registered participants get access to the recording

What You'll Build

By the end of this 2-day webinar, you'll have a fully deployed fullstack application — built with the MERN stack (MongoDB, Express.js, React, Node.js) — running live on the internet.

📌 Day-by-Day Breakdown

🔥 Day 1 — React Fundamentals (Frontend)

We start from the very beginning and build up to a complete React frontend:

Understand the core concepts of React from scratch
Build UI components the right way
Manage state and structure your project effectively
Create a real, working frontend application

No prior React experience required. We'll cover every concept clearly.

🔥 Day 2 — Backend + Integration + Deployment

Once the frontend is ready, we build the backend and connect everything:

Learn Node.js and Express.js fundamentals
Build REST APIs from scratch
Connect your React frontend to the backend
Deploy the fullstack application to production

By the end of Day 2, your app will be live and accessible to anyone on the internet.

🎯 Who Is This For?

This webinar is designed for:

Beginners who want to get started with React
Beginners who are just starting with MERN stack development
Developers who want hands-on, practical experience over theory
Students preparing for real-world projects or job interviews
Anyone who wants to understand how frontend and backend connect in a real application

If you've only worked with one side of the stack — or haven't started at all — this is the right starting point.

✅ Why This Webinar Is Different

Most tutorials teach you concepts. This webinar teaches you by doing.

Hands-on coding throughout — no PowerPoint, no passive watching
Real project — something you can add to your portfolio
Live session — ask questions, get answers in real time
Recording included — can't attend live? You still get the full recording plus the complete application source code

⚠️ Limited Seats — Register Now

Seats are limited and it's first-come, first-served. If you can't make it live, register anyway — you'll get the recording and the full source code of the application we build.

👉 Register Here

If you've been postponing learning fullstack development, this is your sign to start. See you this weekend. 🚀

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

I Built a Tool for Turning Customer Reviews Into Shareable Cards — Here's What It Does

Yogesh Chavan — Wed, 20 May 2026 06:31:03 +0000

Social proof is one of the most persuasive things you can put on a landing page or a social media post.

But taking a raw review — a chunk of text from an email, a tweet, or a form submission and turning it into something that looks polished enough to actually share is tedious. You're either wrestling with Figma/Canva, or settling for a plain screenshot.

I got tired of that friction, so I built Testimonial Generator.

What it actually does

At its core, it's a visual editor for testimonial cards. You paste in the review text, the person's name, their role or location, and the card renders live on the right side of the screen as you type. No page reloads, no "click Preview to see changes" — what you see is what you export.

The output is a crisp PNG or JPG, ready to drop into your website, a slide deck, a newsletter, or a social post.

The customization is real

This isn't a "pick a color" tool. Every element of the card is adjustable:

Card style — five layout variants: Default, Quote (with big decorative quotation marks), Centered, Bordered (with an accent bar), and Social
Colors — background, text, muted text, border, avatar background — all individually controllable
Typography — choose your font family
Avatar — upload a photo or fall back to auto-generated initials with a colored background
Star rating — show 1–5 stars, or hide them entirely
Tags — add a pill label ("Verified", "G2", "AppSumo", whatever fits your context)
Background images — upload a background photo with optional transparency and fade overlay
Spacing — padding, border radius, shadow size, and card width are all adjustable with sliders
Border — toggle on/off with a custom color

The live preview reflects every change instantly.

Presets so you don't start from scratch

There are 14+ built-in presets covering light, dark, quote, centered, and bordered styles. If you find settings you want to reuse — for a specific brand, a specific campaign — you can save your own presets.

Collage builder

If you have multiple reviews you want to share at once, the collage builder lets you combine several cards into a single image. Useful for hero sections, social proof carousels, or pitch decks.

Collection pages

The part I find most useful for collecting new testimonials: you can create a public page on a custom slug where customers can submit their own reviews, including photos.

You give them the link, they fill it out, and the responses come back to your dashboard ready to be turned into cards.

Free plan gives you one collection page. Pro removes the limit.

No account required to start

The generator, collage builder, presets, and export all work without signing in. An account is only needed if you want cloud-synced presets or multiple collection pages.

Pricing is simple: Free forever, $4/month (billed yearly) for Pro.

Try it out!

If you collect testimonials from customers, users, or clients and you want a faster way to make them shareable, give it a go: testimonial-generator.com

No installation, no signup wall. Open it, paste a review, export a card, quickly create public pages to accept feedbacks

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on LinkedIn for regular content that I share every day.

Beginner's Guide to Docker: From Zero to Hero

Yogesh Chavan — Sat, 16 May 2026 06:49:38 +0000

Docker has fundamentally changed how developers build, ship, and run software. If you've ever heard "it works on my machine" — Docker is the fix. This guide walks you through everything you need to get started, from core concepts to writing your first Dockerfile and managing multi-container apps.

What is Docker?

Docker is an open-source platform that packages applications inside lightweight, isolated environments called containers. A container bundles your code, runtime, system libraries, and configuration into a single portable unit, so an app that runs on your laptop runs identically on a colleague's machine or a production cloud server.

Released in 2013, Docker builds on long-standing Linux kernel features (namespaces and cgroups) but wraps them in a developer-friendly CLI, a public image registry (Docker Hub), and a declarative file format for building images.

Why Use Docker?

Before Docker, deploying apps meant carefully matching server environments, language runtimes, and OS patches. A single mismatch could break production. Docker solves this and brings several other benefits:

Consistency — the same image runs identically on every machine
Speed — containers start in seconds and use far fewer resources than VMs
Isolation — each container has its own filesystem, processes, and network stack
Reproducibility — a Dockerfile is a recipe; anyone can rebuild the exact same image
Microservices-friendly — small, single-purpose containers compose into larger systems easily
Massive ecosystem — Docker Hub hosts hundreds of thousands of ready-to-use images

Containers vs. Virtual Machines

Both containers and VMs provide isolation, but they work very differently. A VM includes a full guest OS on top of a hypervisor, while a container shares the host kernel and isolates only the application and its dependencies.

Feature	Virtual Machine	Docker Container
Boot time	Minutes	Seconds
Size on disk	Gigabytes	Megabytes
OS overhead	Full guest OS	Shares host kernel
Isolation level	Hardware-level	Process-level
Performance	Lower (virtualized)	Near-native
Portability	Limited	Excellent

Note: Containers don't replace VMs in every situation. VMs are still preferable when you need a completely different OS or strict hardware-level isolation.

Core Docker Concepts

Five terms come up constantly. Understand these and everything else makes sense.

Image — a read-only template containing your app and its dependencies. Think of it like a class in OOP — a blueprint.
Container — a running instance of an image. You can run many containers from one image.
Dockerfile — a text file with step-by-step instructions for building an image.
Registry — a server that stores and distributes images. Docker Hub is the default public registry.
Volume — a mechanism for persisting data outside a container's lifecycle.

How Docker Works

Docker uses a client-server architecture. When you run docker run nginx:

The Docker CLI sends your command to the Docker Daemon (dockerd) over a REST API.
The daemon checks if the image exists locally; if not, it pulls it from Docker Hub.
The daemon creates a container, allocates a writable filesystem layer, attaches networking, and starts the process.
Output streams back to your terminal.

On Linux, the daemon talks directly to the kernel. On macOS and Windows, Docker Desktop runs a small Linux VM under the hood — but you barely notice.

Installing Docker

macOS and Windows

Install Docker Desktop — an all-in-one bundle that includes the daemon, CLI, Docker Compose, and a GUI for managing images and containers.

Linux (Ubuntu/Debian)

# Update package index
sudo apt-get update

# Install prerequisites
sudo apt-get install ca-certificates curl gnupg

# Add Docker's official GPG key
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg \
  | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

# Add the Docker repository
echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/docker.gpg] \
https://download.docker.com/linux/ubuntu jammy stable" \
  | sudo tee /etc/apt/sources.list.d/docker.list

# Install Docker Engine
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

Tip: After installation on Linux, add your user to the docker group so you don't need sudo for every command: sudo usermod -aG docker $USER, then log out and back in.

Verifying the Installation

docker --version
# Output: Docker version 25.0.0, build ...

docker info

# Run the official hello-world image
docker run hello-world

The hello-world image is tiny (a few kilobytes) and prints a friendly message confirming that the daemon, CLI, image pulling, and container execution all work.

Running Your First Container

Let's run something more interesting — an Nginx web server — in a single command:

# Run nginx in the background and map port 8080 -> 80
docker run -d -p 8080:80 --name my-nginx nginx

# Open http://localhost:8080 in your browser
# When done, clean up
docker stop my-nginx
docker rm my-nginx

Breaking down that command:

docker run — create and start a new container from an image
-d — detached mode; run in the background
-p 8080:80 — publish container port 80 to host port 8080
--name my-nginx — give the container a friendly name
nginx — the image to run

Best Practice: Always give containers explicit names with --name. Without it, Docker assigns a random name like elated_einstein, making them harder to manage in scripts.

Docker Images

A Docker image is a read-only, layered filesystem snapshot containing everything needed to run your software: the OS base, language runtime, application code, dependencies, and metadata.

Images are identified by name:tag — for example, node:20-alpine refers to Node.js v20 built on Alpine Linux. If you omit the tag, Docker assumes :latest.

Pulling Images from Docker Hub

Docker Hub is the world's largest public registry of container images. You can pull any public image with a single command:

docker pull nginx
docker pull nginx:1.25-alpine
docker pull node:20-alpine
docker pull postgres:16

Note: Tags like alpine mean the image is built on Alpine Linux, which is often under 10 MB. Prefer Alpine variants when image size matters.

Listing and Removing Images

You can see all images stored locally with the following commands:

# List all local images
docker images

# Remove a single image
docker rmi nginx:latest

# Remove all unused images
docker image prune

# Remove ALL images (be careful!)
docker rmi $(docker images -q)

Warning: docker image prune and docker system prune can free a lot of disk space, but they also delete images and containers you might still need. Read the prompt carefully before confirming.

Fixing the "Image Is Being Used" Error

A common error when removing images:

$ docker rmi nginx:latest

Error response from daemon: conflict: unable to remove repository reference
"nginx:latest" — container eebd38aa4c91 is using its referenced image

This is not a bug. Docker is protecting you: an image cannot be deleted while a container — even a stopped one — still depends on it. The fix is to deal with the container first. You have two options.

Option 1: Remove the container first (recommended)

# 1. Find the container using the image
# Use -a so STOPPED containers show up too
docker ps -a

# 2. Remove that container (use -f if it is still running)
docker rm eebd38aa4c91

# or by name:
docker rm my-nginx

# 3. Now the image deletes cleanly
docker rmi nginx:latest

The container ID in your error message (here, eebd38aa4c91) is exactly the one you need to remove in step 2 — Docker tells you which container is the blocker.

Option 2: Force-remove the image

The -f (or --force) flag tells Docker to remove the image anyway. It does this by untagging the image — the underlying layers stay on disk as long as the container references them, and are cleaned up once that container is gone.

# Force-remove the image reference
docker rmi -f nginx:latest

# The container eebd38aa4c91 still exists and still runs,
# but the image is now "dangling" (untagged, shown as <none>)
docker images

# REPOSITORY TAG    IMAGE ID     SIZE
# <none>     <none> 6f8edba05e38 161MB

Warning: Forcing removal does not actually free disk space while a container is still using the image — it only removes the name/tag. Prefer Option 1: remove the container first, then the image. That genuinely reclaims the space.

Tip: To clean up everything related to an image in one go: stop and remove all containers created from it, then remove the image. The one-liner docker rm -f $(docker ps -aq --filter ancestor=nginx) removes every container based on the nginx image, after which docker rmi nginx succeeds.

Image Tags and Versions

Common tag patterns you'll see on Docker Hub:

latest — the most recent stable build (avoid in production)
20.10.0 — a specific semantic version, fully reproducible
20-alpine — major version on Alpine Linux
20-slim — a slimmer Debian variant
bullseye / bookworm — built on a specific Debian release

Warning: Avoid :latest in production. It's a moving target — pin to specific versions like node:20.10.0-alpine for reproducible builds.

Image Layers Explained

Every image is built from a stack of layers. Each instruction in a Dockerfile produces a layer. Layers are cached and shared between images, which is what makes Docker so efficient. If two images both start with the same base layer (FROM node:20-alpine, for example), they share that layer on disk.

You can inspect the layers of any image:

# Show the history (layers) of an image

docker history nginx:latest

Note: The order of instructions in a Dockerfile directly affects layer caching. Place rarely-changing instructions (installing OS packages) before frequently-changing ones (copying source code). We'll cover this in detail in Section 4.

Working with Containers

Starting Containers (docker run)

The docker run command is the workhorse of the Docker CLI. It creates a new container from an image and starts it. The general syntax is:

docker run [OPTIONS] IMAGE [COMMAND] [ARG...]

Here are the options you'll use over and over:

Flag	Effect
`-d`	Run in the background (detached)
`-it`	Interactive + TTY (for shells)
`-p HOST:CONTAINER`	Publish a port
`--name NAME`	Assign a name
`-e KEY=VALUE`	Set an environment variable
`-v HOST:CONTAINER`	Mount a volume
`--rm`	Auto-remove when the container exits
`--network NAME`	Attach to a specific network

A few realistic examples:

# Interactive Ubuntu shell, auto-removed on exit
docker run -it --rm ubuntu:22.04 bash

# Redis in the background
docker run -d -p 6379:6379 --name cache redis:7-alpine

# Postgres with a named volume for persistence
docker run -d \
  --name db \
  -e POSTGRES_PASSWORD=secret \
  -v pgdata:/var/lib/postgresql/data \
  -p 5432:5432 \
  postgres:16

Detached Mode and Naming

By default docker run attaches your terminal to the container, which is useful for short-lived commands but not for long-running services. Adding -d runs the container in the background and prints its ID. Combine that with --name so you can refer to the container by a friendly handle.

# Bad: random name, you'll need the ID later
docker run -d nginx

# Good: predictable name, easy to script
docker run -d --name web nginx

Stopping, Starting, Restarting

# Gracefully stop a container (sends SIGTERM, then SIGKILL after 10s)
docker stop web

# Start a stopped container
docker start web

# Restart (stop + start)
docker restart web

# Force-kill immediately (sends SIGKILL)
docker kill web

# Pause / unpause (freeze the process)
docker pause web
docker unpause web

Note: docker stop is almost always what you want. docker kill is for unresponsive containers — it skips the graceful shutdown signal.

Removing Containers

# Remove a stopped container
docker rm web

# Force-remove a running container (stop + remove)
docker rm -f web

# Remove all stopped containers
docker container prune

# Remove every container on the system
docker rm -f $(docker ps -aq)

Tip: If you don't need the container after it exits — for example, a one-off CLI tool — add --rm to docker run so cleanup happens automatically.

Executing Commands Inside a Container

The docker exec command runs an additional process inside an already-running container. The most common use is opening a shell to debug or inspect state:

# Open an interactive bash shell inside the "web" container
docker exec -it web bash

# Some minimal images don't have bash -- use sh instead
docker exec -it web sh

# Run a one-off command without a shell
docker exec web ls /etc/nginx

# Run a command as a different user
docker exec -u root -it web bash

Viewing Logs

# Print all logs
docker logs web

# Follow logs in real time
docker logs -f web

# Show the last 100 lines
docker logs --tail 100 web

# Show logs with timestamps
docker logs -t web

# Show logs from the last 5 minutes
docker logs --since 5m web

Best Practice: Configure your app to log to stdout/stderr instead of writing to files inside the container. This is the 12-factor approach and lets Docker and orchestrators like Kubernetes collect logs centrally.

Inspecting Containers

For deep introspection — IP address, mount points, environment, network settings, and more — use docker inspect:

# Print full JSON details of a container
docker inspect web

# Extract a specific field using a format template
docker inspect -f '{{ .NetworkSettings.IPAddress }}' web

# Get the exit code of a stopped container
docker inspect -f '{{ .State.ExitCode }}' web

Writing Dockerfiles

A Dockerfile is a plain text file with instructions Docker follows to build a custom image. Each instruction produces a new layer. Dockerfiles are the foundation of reproducible builds.

Anatomy of a Dockerfile

Here is a minimal example. We'll dissect every line below:

# Use an official Node.js LTS image as the base
FROM node:20-alpine

# Set the working directory inside the container
WORKDIR /app

# Copy dependency manifests first (better caching)
COPY package*.json ./

# Install production dependencies
RUN npm ci --omit=dev

# Copy the rest of the application source code
COPY..

# Document the port the application listens on
EXPOSE 3000

# Define environment variables
ENV NODE_ENV=production

# Default command to run when the container starts
CMD ["node", "server.js"]

Common Instructions

Instruction	Purpose
`FROM`	Sets the base image — every Dockerfile starts here
`WORKDIR`	Sets the working directory for subsequent instructions
`COPY`	Copies files from the build context into the image
`RUN`	Executes a command during the build (e.g., installing packages)
`ENV`	Sets an environment variable (persists at runtime)
`ARG`	Defines a build-time variable (disappears after the build)
`EXPOSE`	Documents which port the container listens on
`USER`	Sets the user the container runs as
`CMD`	Default command when the container starts (overridable)
`ENTRYPOINT`	Fixed executable — combined with CMD for default flags

Note: CMD vs ENTRYPOINT — use CMD for default arguments that are easy to override at runtime. Use ENTRYPOINT when your image is a specific executable. They work well together: ENTRYPOINT for the binary, CMD for default flags.

Your First Dockerfile: A Node.js App

Let's containerize a minimal Express app. The project structure looks like this:

my-app/
├── package.json
├── server.js
├── .dockerignore
└── Dockerfile

Step 1: Create the project

mkdir my-app
cd my-app
npm init -y
npm install express

Step 2: Create server.js

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello from inside a Docker container!');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
});

Step 3: Create the Dockerfile

# Start from the official Node.js 20 image (Alpine = small)
FROM node:20-alpine

# Set the working directory inside the container
WORKDIR /app

# Copy ONLY the dependency manifests first (better caching)
COPY package*.json ./

# Install dependencies inside the container
RUN npm install --omit=dev

# Copy the rest of the application source code
COPY . .

# Document the port the app listens on
EXPOSE 3000

# The command that runs when the container starts
CMD ["node", "server.js"]

Step 4: Create .dockerignore

node_modules
npm-debug.log
.git
.env

Why exclude .env? Environment variables should be injected at runtime via -e flags or Docker secrets, not baked into the image. Committing secrets into an image is a serious security risk.

This article covers only a portion of the 40 pages complete Beginner's Guide to Docker. The full guide goes much deeper — with more examples, real-world walkthroughs, and step-by-step projects across all the sections below:

Section 1: Introduction to Docker
What is Docker? · Why Use Docker? · Containers vs Virtual Machines · Core Docker Concepts · How Docker Works · Installing Docker · Running Your First Container

Section 2: Docker Images
What Is an Image? · Pulling Images from Docker Hub · Listing and Removing Images · Fixing the "Image Is Being Used" Error · Image Tags and Versions · Searching the Registry · Image Layers Explained

Section 3: Working with Containers
Starting Containers · Detached Mode and Naming · Listing Containers · Stopping, Starting, Restarting · Removing Containers · Executing Commands Inside a Container · Viewing Logs · Inspecting Containers

Section 4: Writing Dockerfiles
What Is a Dockerfile? · Anatomy of a Dockerfile · Common Instructions Explained · Your First Dockerfile (Node.js App) · Building the Image · Updating Your Code · The Build Cache and Layer Ordering · .dockerignore · Multi-Stage Builds

Section 5: Data Persistence with Volumes
Why Containers Are Ephemeral · Bind Mounts vs Named Volumes · Creating and Using Volumes · Real-World Example: Postgres Volume

Section 6: Docker Networking
Default Networks · Creating a User-Defined Bridge · Connecting Containers by Name · Publishing Ports · Inspecting Networks

Section 7: Docker Compose
Why Compose? · Installing Docker Compose · Your First docker-compose.yml · Common Compose Commands · Real Example: Node.js + Postgres + Redis · Environment Variables and .env Files

Section 8: Best Practices & Next Steps
Image Size Optimization · Security Tips · Tagging and Versioning Strategy · Where to Go From Here

👉 Get the complete guide here

Also worth reading: If you're interested in staying up to date with the React ecosystem, check out React 18: A Complete Guide to Every New Feature — a deep dive into everything that changed in React 18.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on Linkedin for regular content that I share every day.

React 18: A Complete Guide to Every New Feature

Yogesh Chavan — Mon, 11 May 2026 06:40:40 +0000

React 19 is already here.

But surprisingly, many React developers are still not familiar with the most useful features introduced in React 18.

That's exactly why I created this guide, to help you clearly understand the powerful features React 18 provides and how they improve real-world React applications.

React 18 is the most significant release since React 16 introduced Hooks. At its core, React 18 is about one big idea: concurrent rendering, and everything else flows from it.

This guide walks through every major feature and API introduced in React 18, with practical code examples you can use today.

Concurrent Rendering
New Root API — createRoot
Automatic Batching
startTransition and useTransition
useDeferredValue
Suspense Improvements
useId
useSyncExternalStore
useInsertionEffect
Strict Mode Changes
React Server Components
Migration Guide

1. Concurrent Rendering

Concurrent Rendering is the flagship feature of React 18, and it changes how React works at a fundamental level. In all previous versions, rendering was synchronous and uninterruptible.

Once React started rendering a component tree, it had to finish before the browser could do anything else. This could make the UI feel sluggish during expensive updates.

With Concurrent Rendering, React gains the ability to pause, resume, and even abandon renders. It can yield to the browser event loop mid-render, keeping the UI responsive even during heavy work. Think of it as React learning how to multitask.

Blocking vs. Concurrent Rendering

Feature	React 17 (Blocking)	React 18 (Concurrent)
Rendering	Synchronous, uninterruptible	Can pause and resume
Update priority	All updates treated equally	Urgent vs. non-urgent
UX during heavy work	Can feel janky	Stays responsive
Opt-in required	N/A	Yes, via `createRoot()`

How It Works

React 18 builds on the Fiber architecture to assign priorities to different updates:

High priority: User interactions like clicks and keystrokes
Normal priority: Data-driven re-renders
Low priority: Background updates wrapped in startTransition

If a high-priority update arrives while a low-priority render is in progress, React can interrupt the low-priority work, handle the urgent update, then resume where it left off.

Note: Concurrent Rendering is completely opt-in. Existing code using ReactDOM.render() continues to work in React 18 without any changes. You only get concurrent features after switching to createRoot().

2. New Root API — createRoot

To unlock concurrent features, you need to migrate from ReactDOM.render() to the new createRoot() API. The old API still works in React 18, but it triggers a deprecation warning and opts you out of everything new.

Before (React 17)

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

After (React 18)

import { createRoot } from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

The returned root object also exposes root.unmount() to tear down the component tree, replacing the old ReactDOM.unmountComponentAtNode().

hydrateRoot for SSR

If you're using server-side rendering, replace ReactDOM.hydrate() with hydrateRoot():

import { hydrateRoot } from 'react-dom/client';
import App from './App';

const root = hydrateRoot(
  document.getElementById('root'),
  <App />
);

// You can still call root.render() later to update the tree
root.render(<App newProp="value" />);

Tip: In micro-frontend architectures, you can create multiple independent roots on a single page — each is fully isolated and concurrent.

3. Automatic Batching

Batching is when React groups multiple state updates into a single re-render. This has always existed, but until React 17 it only applied inside React event handlers.

Updates inside setTimeout, Promise callbacks, or native event listeners each triggered their own separate re-render.

React 18 fixes this. Now all state updates are batched automatically, regardless of where they originate.

React 17 — Inconsistent Batching

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  // ✅ Batched — 1 re-render (inside React event handler)
  const handleClick = () => {
    setCount(c => c + 1);
    setFlag(f => !f);
  };

  // ❌ NOT batched — 2 separate re-renders in React 17
  const handleAsync = () => {
    setTimeout(() => {
      setCount(c => c + 1); // re-render 1
      setFlag(f => !f);     // re-render 2
    }, 1000);
  };
}

React 18 — Automatic Batching Everywhere

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  // ✅ Batched — 1 re-render
  const handleAsync = () => {
    setTimeout(() => {
      setCount(c => c + 1);
      setFlag(f => !f);
    }, 1000);
  };

  // ✅ Also batched inside fetch/promise callbacks
  const fetchData = async () => {
    const data = await fetch('/api/data');
    setCount(c => c + 1); // batched
    setFlag(true);        // batched — single re-render!
  };
}

Opting Out with flushSync

If you need an update to be applied synchronously (for example, to read a DOM measurement immediately after a state change), use flushSync:

import { useState } from "react";
import { flushSync } from 'react-dom';

const handleClick = () => {
 const [count, setCount] = useState(0);
 const [flag, setFlag] = useState(false);

  flushSync(() => {
    setCount(c => c + 1);
  });
  // DOM is updated here before the next line executes

  flushSync(() => {
    setFlag(f => !f);
  });
  // Total: 2 re-renders
};

Tip: Automatic batching is a free performance win. Just upgrading to React 18 with createRoot gives you this — no code changes required. Use flushSync only when you specifically need synchronous DOM updates.

4. startTransition and useTransition

Some state updates are urgent — typing in a search box must feel instant. But the results list it drives might be expensive to render. Before React 18, both updates had equal priority, making the input feel sluggish.

The Transition API lets you tell React: this update is non-urgent — keep the UI responsive and get to it when you can.

startTransition — The Standalone Function

import { startTransition } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = (e) => {
    const value = e.target.value;

    // Urgent: update the input immediately
    setQuery(value);

    // Non-urgent: React can interrupt this if the user keeps typing
    startTransition(() => {
      const filtered = expensiveSearch(value);
      setResults(filtered);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleSearch} />
      <ResultsList items={results} />
    </div>
  );
}

useTransition — With a Pending State

The useTransition hook is the recommended approach because it also gives you isPending — a boolean you can use to show a loading indicator while the transition is running.

import { useState, useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('home');

  const selectTab = (nextTab) => {
    startTransition(() => {
      setTab(nextTab);
    });
  };

  return (
    <div>
      <TabButton isActive={tab === 'home'} onClick={() => selectTab('home')}>
        Home
      </TabButton>
      <TabButton isActive={tab === 'posts'} onClick={() => selectTab('posts')}>
        Posts (slow)
      </TabButton>

      {isPending && <Spinner />}

      <div style={{ opacity: isPending ? 0.7 : 1 }}>
        {tab === 'home' && <HomePage />}
        {tab === 'posts' && <PostsPage />}
      </div>
    </div>
  );
}

Real-World Example: Live Search Over a Large List

import { useState, useTransition, useMemo } from 'react';

const ITEMS = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  name: `Item ${i}`,
}));

function LiveSearch() {
  const [query, setQuery] = useState('');
  const [deferredQuery, setDeferredQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value); // immediate — input stays responsive

    startTransition(() => {
      setDeferredQuery(value); // deferred — filters the big list
    });
  };

  const filtered = useMemo(
    () => ITEMS.filter(item =>
      item.name.toLowerCase().includes(deferredQuery.toLowerCase())
    ),
    [deferredQuery]
  );

  return (
    <div>
      <input value={query} onChange={handleChange} placeholder="Search..." />
      {isPending ? <p>Filtering...</p> : <p>{filtered.length} results</p>}
      <ul>
        {filtered.slice(0, 50).map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Warning: You cannot wrap state updates that control an input's value in a transition. Input values must always be urgent. Only wrap the downstream, results-driven update.

5. useDeferredValue

useDeferredValue is the sibling of useTransition. While useTransition wraps the setter, useDeferredValue wraps the value itself. This makes it ideal when you don't control the state update — for example, when a value comes in as a prop.

import { useState, useDeferredValue } from 'react';

function App() {
  const [query, setQuery] = useState('');

  // deferredQuery lags behind query during concurrent renders
  const deferredQuery = useDeferredValue(query);

  // When query !== deferredQuery, a transition is in progress
  const isStale = query !== deferredQuery;

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      {/* Dim results while the deferred value catches up */}
      <div style={{ opacity: isStale ? 0.5 : 1 }}>
        <SearchResults query={deferredQuery} />
      </div>
    </div>
  );
}

useTransition vs. useDeferredValue

	`useTransition`	`useDeferredValue`
What it wraps	The state setter	The value / prop
`isPending` available	Yes	No (check manually with `===`)
Best for	When you own the state update	When value comes from props

6. Suspense Improvements

Suspense has existed since React 16.6, but React 18 dramatically expands what it can do. The key improvements are full support in concurrent mode, Suspense on the server via Streaming SSR, and truly composable loading states across an entire page.

Nested Suspense Boundaries

Each <Suspense> boundary is independent. A component deep in the tree can suspend without affecting siblings that are already loaded.

import { Suspense } from 'react';

function Dashboard() {
  return (
    <div>
      <Suspense fallback={<HeaderSkeleton />}>
        <Header />
      </Suspense>

      <Suspense fallback={<SidebarSkeleton />}>
        <Sidebar />
      </Suspense>

      <Suspense fallback={<MainContentSkeleton />}>
        <MainContent>
          {/* Nested boundaries for fine-grained control */}
          <Suspense fallback={<ChartSkeleton />}>
            <Chart />
          </Suspense>
          <Suspense fallback={<TableSkeleton />}>
            <DataTable />
          </Suspense>
        </MainContent>
      </Suspense>
    </div>
  );
}

SuspenseList — Coordinating Loading Order

SuspenseList lets you control the order in which suspended components reveal themselves, preventing a jarring "popcorn" effect.

import { Suspense, SuspenseList } from 'react';

function ProfilePage() {
  return (
    <SuspenseList revealOrder="forwards" tail="collapsed">
      <Suspense fallback={<AvatarSkeleton />}>
        <ProfileAvatar />
      </Suspense>
      <Suspense fallback={<DetailsSkeleton />}>
        <ProfileDetails />
      </Suspense>
      <Suspense fallback={<PostsSkeleton />}>
        <ProfilePosts />
      </Suspense>
    </SuspenseList>
  );
  // revealOrder: 'forwards' | 'backwards' | 'together'
  // tail: 'collapsed' (show only next skeleton) | 'hidden'
}

Streaming SSR

The biggest SSR improvement in React 18 is HTML streaming. Instead of waiting for all data to be ready before sending any HTML, React can stream the page in chunks:

The shell HTML is sent immediately so the browser can start rendering
Suspended sections are streamed in as their data resolves
Each section hydrates independently — no all-or-nothing hydration
Users can interact with loaded parts while others are still loading

Note: Streaming SSR uses renderToPipeableStream (Node.js) or renderToReadableStream (Edge/Web Streams). Frameworks like Next.js 13+ handle this automatically.

7. useId

When building accessible UI, you often need to link a <label> to an <input> using a unique id. Generating these with Math.random() or a counter works on the client but causes hydration mismatches in SSR because the server and client generate different values.

useId solves this by producing stable, collision-free IDs that are consistent across environments.

import { useId } from 'react';

// ❌ Wrong — breaks SSR hydration
function PasswordField() {
  const id = Math.random().toString(); // different on server vs client!
  return (
    <>
      <label htmlFor={id}>Password</label>
      <input id={id} type="password" />
    </>
  );
}

// ✅ Correct — stable and SSR-safe
function PasswordField() {
  const id = useId(); // e.g. ":r0:", ":r1:", etc.
  return (
    <>
      <label htmlFor={id}>Password</label>
      <input id={id} type="password" />
    </>
  );
}

Deriving Multiple IDs from One Call

For accessible components that need several linked IDs, derive them from a single useId call with a suffix — this is more efficient than calling useId multiple times.

function FormField({ label, type = 'text', hint }) {
  const id = useId();
  const inputId = `${id}-input`;
  const hintId  = `${id}-hint`;

  return (
    <div>
      <label htmlFor={inputId}>{label}</label>
      <input
        id={inputId}
        type={type}
        aria-describedby={hint ? hintId : undefined}
      />
      {hint && <p id={hintId}>{hint}</p>}
    </div>
  );
}

Warning: Do not use useId to generate list keys. Keys should come from your data (e.g. item.id). useId is specifically for accessibility attributes like id, htmlFor, and aria-*.

8. useSyncExternalStore

This hook is primarily for library authors building state management solutions (Redux, Zustand, MobX, etc.). It provides a safe, concurrent-mode-compatible way to subscribe to data stores that live outside React.

The problem it solves is called tearing: in concurrent mode, React can render a component tree partially and then pause.

If your component reads from an external store at different points during that render, it might see two different values — a visual inconsistency. useSyncExternalStore prevents this.

import { useSyncExternalStore } from 'react';

// Subscribing to the browser's online/offline status
function useOnlineStatus() {
  return useSyncExternalStore(
    // subscribe: called when React needs to resubscribe
    (callback) => {
      window.addEventListener('online', callback);
      window.addEventListener('offline', callback);
      return () => {
        window.removeEventListener('online', callback);
        window.removeEventListener('offline', callback);
      };
    },
    // getSnapshot: returns the current value (client)
    () => navigator.onLine,
    // getServerSnapshot: value to use during SSR
    () => true
  );
}

function StatusBadge() {
  const isOnline = useOnlineStatus();
  return (
    <div className={isOnline ? 'badge-green' : 'badge-red'}>
      {isOnline ? 'Online' : 'Offline'}
    </div>
  );
}

Note: If you use Redux Toolkit, Zustand, or Jotai, they already integrate useSyncExternalStore internally. You only need this hook when writing your own state management library or React integration.

9. useInsertionEffect

useInsertionEffect is a specialized hook aimed squarely at CSS-in-JS library authors. It fires synchronously before any DOM mutations, which allows CSS rules to be injected into the DOM before React reads layout in useLayoutEffect.

The execution order is: useInsertionEffect → useLayoutEffect → useEffect.

import { useInsertionEffect } from 'react';

// Inside a CSS-in-JS library — not your application code
function useCSS(rule) {
  useInsertionEffect(() => {
    if (!isInserted(rule)) {
      insertStyleSheet(rule);
    }
  });

  return getClassName(rule);
}

Warning: Unless you are writing a CSS-in-JS library, you should not use useInsertionEffect. For regular side effects use useEffect, and for DOM measurements use useLayoutEffect.

10. Strict Mode Changes

React 18's Strict Mode introduces a new development-only check: it intentionally mounts, unmounts, and remounts every component. This means effects run twice in development:

mount → run effect → cleanup effect → remount → run effect again

This simulates a future React feature (the "offscreen" API) where components can be hidden and reshown — like navigating away from and back to a tab. Your effects need to be resilient to this.

What Breaks and How to Fix It

// ❌ Breaks in Strict Mode — no cleanup, double fetch
useEffect(() => {
  fetch('/api/data').then(r => r.json()).then(setData);
}, []);

// ✅ Fixed — use AbortController for cleanup
useEffect(() => {
  const controller = new AbortController();
  fetch('/api/data', { signal: controller.signal })
    .then(r => r.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') throw err;
    });
  return () => controller.abort();
}, []);

// ❌ Breaks — subscribes without unsubscribing
useEffect(() => {
  const subscription = dataStream.subscribe(handler);
  // Missing cleanup!
}, []);

// ✅ Fixed — always return a cleanup function
useEffect(() => {
  const subscription = dataStream.subscribe(handler);
  return () => subscription.unsubscribe();
}, []);

Tip: If your app behaves oddly in Strict Mode after upgrading to React 18, that's React catching a real bug — missing cleanup in your effects. Fix the cleanup rather than disabling Strict Mode.

11. React Server Components

React Server Components (RSC) are a new paradigm designed alongside React 18's concurrent architecture. They let you write components that render exclusively on the server and are never sent to the client as JavaScript — meaning zero bundle size impact.

While RSC require framework support (Next.js App Router being the primary implementation), understanding them is increasingly essential.

Server vs. Client Components at a Glance

Capability	Server Component	Client Component
`async`/`await` at component level	✅ Yes	❌ No
`useState` / `useEffect`	❌ No	✅ Yes
Browser APIs	❌ No	✅ Yes
Direct database / filesystem access	✅ Yes	❌ No
`onClick` and other event handlers	❌ No	✅ Yes
Bundle size impact	0 bytes	Adds to bundle
Context API	❌ No	✅ Yes

Server Component Example

// No directive needed — Server Component by default in Next.js App Router
async function ProductPage({ id }) {
  // Direct database access — no useEffect, no fetch boilerplate
  const product = await db.products.findById(id);
  const reviews = await db.reviews.findByProduct(id);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>

      {/* Client Components can be composed inside Server Components */}
      <AddToCartButton productId={id} />

      {reviews.map(review => (
        <ReviewCard key={review.id} review={review} />
      ))}
    </div>
  );
}

Client Component Example

'use client'; // This directive opts the component into the client bundle

import { useState } from 'react';

function AddToCartButton({ productId }) {
  const [added, setAdded] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleAdd = async () => {
    setLoading(true);
    await addToCart(productId);
    setAdded(true);
    setLoading(false);
  };

  if (added) return <p>Added to cart ✓</p>;

  return (
    <button onClick={handleAdd} disabled={loading}>
      {loading ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

The composition model is powerful: Server Components handle data fetching and heavy lifting, while Client Components handle interactivity.

The two types compose naturally — Server Components can render Client Components, passing only serializable props across the boundary.

12. Migration Guide

Migrating from React 17 to React 18 is largely additive. Existing code keeps working, and you can adopt new features incrementally.

Step 1: Update Your Packages

npm install react@18 react-dom@18

# TypeScript users
npm install --save-dev @types/react@18 @types/react-dom@18

Step 2: Switch to the New Root API

// Before
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// After
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

Step 3: Audit Your Effects for Missing Cleanup

With Strict Mode double-invoking effects, any effect that doesn't clean up after itself will surface as a bug. Go through your useEffect calls and ensure every subscription, timer, and fetch has a corresponding cleanup:

// The correct pattern for every useEffect that starts something
useEffect(() => {
  const subscription = subscribe(handler);
  return () => subscription.unsubscribe(); // always clean up
}, [dependency]);

Step 4: Adopt New Features Gradually

Once the basics are in place, adopt new features where they make the most impact:

// Free win: automatic batching requires no changes
// Just upgrading + createRoot gives you this

// High impact for search/filter UIs: useTransition
const [isPending, startTransition] = useTransition();
startTransition(() => setResults(filter(items, query)));

// Useful when value comes from props: useDeferredValue
const deferredQuery = useDeferredValue(searchQuery);

// Accessible forms with SSR: useId
const id = useId();
return <><label htmlFor={id} /><input id={id} /></>;

React 18 API Quick Reference

API	Type	Purpose
`createRoot`	Function	Opt in to concurrent features
`hydrateRoot`	Function	SSR hydration with concurrent mode
`useTransition`	Hook	Non-urgent state updates with `isPending`
`startTransition`	Function	Mark updates as non-urgent (no `isPending`)
`useDeferredValue`	Hook	Defer re-rendering of non-urgent parts
`useId`	Hook	Stable, SSR-safe unique IDs
`useSyncExternalStore`	Hook	Safe subscriptions to external stores
`useInsertionEffect`	Hook	CSS-in-JS injection (library authors)
`flushSync`	Function	Force synchronous state flush
Automatic Batching	Behavior	Fewer re-renders in async contexts
Suspense (SSR)	Feature	Streaming HTML from the server

Key Takeaways

Upgrade to createRoot first — it unlocks every concurrent feature in this guide.
Automatic batching is a free performance improvement that comes with the upgrade alone.
Use useTransition and startTransition to keep UIs responsive during expensive updates.
Use useDeferredValue when the value driving an expensive render comes from props.
Use useId for accessible form relationships in SSR apps, never for list keys.
If Strict Mode breaks your app after upgrading, that's a real bug — fix the missing cleanup, don't disable Strict Mode.
useSyncExternalStore and useInsertionEffect are for library authors; most application developers won't need them directly.
React Server Components are the future, but they require a supporting framework. If you're on Next.js 13+, explore the App Router.

The common thread across all of React 18 is this: the library is getting smarter about when and how it does work, so you can focus on describing what your UI should look like — and React handles the rest.

This article content is taken from my React 18 Features Guide ebook.

If you found this guide useful and want to go deeper, check out The Ultimate React Ebooks Collection — a curated bundle of 20 ebooks and practical guides covering React, Next.js, JavaScript, interview prep, real-world projects, and more.

Everything you need to go from solid fundamentals to a production-ready React developer, in one place.

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/

Follow me on Linkedin for regular content that I share every day.

I Built An Application For Live Quizzes To Engage Audience With AI Integration

Yogesh Chavan — Mon, 27 Apr 2026 10:10:29 +0000

Whether you're a teacher looking to make learning fun, a trainer running corporate workshops, or someone hosting a party, QuizPulse makes engagement effortless.

Ever wanted to run a live quiz for your team, class, or event — but existing tools felt too clunky or too expensive?

I built QuizPulse to fix exactly that.

Here's what makes it different:

✅ AI-Generated Questions: Describe your topic and AI writes the questions. Upload a PDF, and it generates quiz content automatically. No more hours spent crafting questions from scratch.

✅ Zero Setup for Players: Share a 6-digit PIN. Players join instantly from any browser. No downloads, no accounts, no friction.

✅ Real-Time Sync: Every player sees the question at the exact same moment. Answers lock in live.

✅ Live Leaderboards: Scores update in real-time with smooth animations. The energy stays high and the competition stays fierce. 🏆

✅ Works Everywhere: Phones, tablets, laptops. Any device with a browser.

Perfect for:

🎓 Classrooms & teachers: Test knowledge before training or reinforce learning after each topic

💼 Corporate training & workshops: Keep employees engaged and measure understanding

👥 Team building events: Create memorable, interactive experiences

🎉 Parties & trivia nights: Fun, casual competition for any gathering

How it works in 3 steps:

1️⃣ Create a quiz (AI-assisted or manually)

2️⃣ Share the 6-digit PIN with your audience

3️⃣ Host the quiz live and watch the leaderboard heat up

Try it free: livequiz.yogeshchavan.dev

Check out the short preview below of the application

Check out some of the application screenshots below.

Why QuizPulse?

Real-Time Sync

Questions appear simultaneously for all players. No lag, no confusion. Everyone sees the same question at the exact same moment, creating that electrifying game-show atmosphere.

AI-Powered Question Generation

Stop spending hours crafting quiz questions. Simply describe your topic and let AI generate engaging questions instantly. You can even upload a PDF and QuizPulse will extract relevant questions automatically — perfect for turning study materials or training documents into interactive quizzes.

Zero Setup for Players

Players join with a simple 6-digit PIN. That's it. No app downloads, no account creation, no friction. Works on any device with a browser — phones, tablets, laptops.

Live Leaderboards

Watch scores update in real-time with smooth animations. Keep the competitive spirit alive as participants race to the top. Nothing motivates like seeing your name climb the rankings.

How It Works

1. Create Your Quiz
Use AI to generate questions from any topic or PDF, or write your own. Set time limits, customize the experience to fit your needs.

2. Share the PIN
Launch your quiz and share the 6-digit game PIN. Players simply visit the site and enter the code — they're in within seconds.

3. Play Live
Control the pace, watch real-time results roll in, and celebrate winners together. The energy is contagious.

Built for Modern Teams

QuizPulse is built with the latest web technologies for a seamless experience:

Fast & Responsive: Works flawlessly on any device
Beautiful Design: A modern, sleek interface that looks professional
Analytics Dashboard: Track participation and quiz performance
Export Results: Download detailed reports of quiz sessions

Get Started in Minutes

Sign up for free at livequiz.yogeshchavan.dev
Create your first quiz (AI makes it fast)
Share the PIN with your audience
Watch engagement soar

No credit card required. No complicated setup. Just pure, interactive fun.

Start Hosting Free Today

Ready to transform your next meeting, class, or event? QuizPulse is free to get started.

Try it free: livequiz.yogeshchavan.dev

Would love to hear your feedback! Drop a comment or share with someone who runs quizzes, workshops, or classroom sessions. 🙌

About Me

I'm a freelancer, mentor, and full-stack developer with 12+ years of experience, working primarily with React, Next.js, and Node.js.

I've also created various courses with 3000+ students enrolled.

My Portfolio: https://yogeshchavan.dev/