DEV Community: Yogesh Chavan

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?

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.

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.

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/

Next.js 16 Complete Beginner's Guide

Yogesh Chavan — Mon, 20 Apr 2026 07:32:36 +0000

In this article, you will learn everything you need to know about Next.js 16. This is a completely beginner-friendly guide.

Download this complete 110 pages PDF Guide

Section 1: Next.js Fundamentals

1. What is Next.js & Why React Developers Should Care

Next.js is a powerful React framework created by Vercel that enables developers to build full-stack web applications with ease. It extends React's capabilities by providing built-in solutions for routing, rendering, data fetching, and optimization. Unlike plain React which only handles the view layer, Next.js provides a complete framework for building production-ready applications.

Before Next.js, React developers had to manually configure webpack, set up routing with React Router, implement server-side rendering, and handle code splitting. Next.js eliminates this complexity by providing sensible defaults while remaining highly customizable. Version 16 brings significant improvements including enhanced performance, better TypeScript support, and improved developer experience.

Why React Developers Should Learn Next.js

As a React developer, learning Next.js is a natural progression that will significantly enhance your capabilities. Here are the key reasons why Next.js has become the go-to framework for React applications:

1. SEO Optimization - Unlike client-side rendered React apps where content is generated in the browser, Next.js can render pages on the server. This means search engine crawlers see fully rendered HTML, dramatically improving your site's visibility in search results.

2. Performance Out of the Box - Next.js automatically optimizes your application with features like automatic code splitting, image optimization, font optimization, and intelligent prefetching.

3. Multiple Rendering Strategies - Choose the best rendering approach for each page: Static Site Generation (SSG), Server-Side Rendering (SSR), Incremental Static Regeneration (ISR), or Client-Side Rendering (CSR).

4. Full-Stack Capabilities - Build API endpoints directly within your Next.js application using Route Handlers. No need for a separate backend server for simple to moderate API needs.

5. File-Based Routing - Create pages and routes simply by adding files to the app directory. No need to configure a router or maintain route definitions separately.

6. Built-in TypeScript Support - Next.js 16 comes with excellent TypeScript integration out of the box, providing better developer experience and catching errors at compile time.

💡 Tip: Next.js is used by major companies including Netflix, TikTok, Twitch, Hulu, Nike, and many more. Learning it opens doors to enterprise-level opportunities.

Key Features at a Glance

Feature	Description	Benefit
App Router	New routing system with RSC	Better performance & DX
Server Components	Components render on server	Smaller bundles
Streaming	Progressive page rendering	Faster perceived load
Route Handlers	API endpoints in Next.js	Full-stack in one project
Image Optimization	Auto image resizing	Faster loading images
Font Optimization	Self-hosted fonts	Better Core Web Vitals

2. Next.js vs CRA vs Vite

Comparing React Development Approaches

When starting a new React project, developers typically choose between three popular options: Create React App (CRA), Vite, or Next.js. Each has its strengths and ideal use cases.

Create React App (CRA)

Create React App was the official way to start React projects for years. It provides a zero-configuration setup for client-side React applications. However, CRA is no longer recommended by the React team.

Pros: Simple setup, good for learning React basics, well-documented

Cons: Client-side only (poor SEO), slow build times, no longer actively recommended

Vite

Vite is a modern build tool that offers lightning-fast development experience. It uses native ES modules and provides instant hot module replacement.

Pros: Extremely fast dev server, quick builds, modern architecture, framework-agnostic

Cons: Client-side focused (needs plugins for SSR), less opinionated, requires more configuration for full-stack

Next.js

Next.js is a full-featured React framework that provides everything you need for production applications out of the box.

Pros: Full-stack capabilities, multiple rendering strategies, built-in optimizations, excellent DX, strong community

Cons: Steeper learning curve, Vercel-centric ecosystem, more opinionated

Feature Comparison

Feature	CRA	Vite	Next.js
Server Rendering	No	Plugin	Built-in
Static Generation	No	Plugin	Built-in
API Routes	No	No	Built-in
File-based Routing	No	No	Built-in
Image Optimization	No	No	Built-in
Dev Server Speed	Slow	Fast	Fast
Production Ready	Basic	Good	Excellent

When to Choose Each Option

Choose CRA if you're learning React basics (though consider alternatives now)
Choose Vite for SPAs, prototypes, or when you need maximum flexibility
Choose Next.js for production apps, SEO-critical sites, or full-stack projects

⚠️ Important: The React team now recommends using a framework like Next.js for new projects instead of Create React App.

3. App Router vs Pages Router (Which One & Why)

Understanding Next.js Routing Systems

Next.js has two routing systems: the older Pages Router (pages/ directory) and the newer App Router (app/ directory). Understanding the differences helps you make the right choice for your project.

Pages Router (Legacy)

The Pages Router has been the standard since Next.js began. Files in the pages/ directory automatically become routes.

pages/
├── index.tsx        -> /
├── about.tsx        -> /about
├── blog/
│   └── [slug].tsx   -> /blog/:slug
└── api/
    └── users.ts     -> /api/users

Key Characteristics:

Uses getServerSideProps, getStaticProps for data fetching
All components are Client Components by default
Layouts require workarounds (_app.tsx, _document.tsx)
Simpler mental model

App Router (Recommended)

The App Router, introduced in Next.js 13 and now stable, uses the app/ directory with React Server Components as the foundation.

app/
├── page.tsx           -> /
├── layout.tsx         -> Shared layout
├── about/
│   └── page.tsx       -> /about
├── blog/
│   └── [slug]/
│       └── page.tsx   -> /blog/:slug
└── api/
    └── users/
        └── route.ts   -> /api/users

Key Characteristics:

React Server Components by default
Native async/await for data fetching
Nested layouts, loading states, error boundaries
Streaming and Suspense support

Key Differences

Feature	Pages Router	App Router
Default Components	Client	Server
Data Fetching	getServerSideProps	async/await
Layouts	_app.tsx workaround	Native nested
Loading States	Manual	loading.tsx
Error Handling	_error.tsx	error.tsx (nested)
Streaming	Limited	Full support

Why Choose the App Router?

For new projects, the App Router is recommended because:

Better Performance - Server Components reduce JavaScript sent to client
Simpler Data Fetching - Use async/await directly in components
Nested Layouts - Share UI between routes without re-rendering
Built-in Loading/Error States - Automatic handling with special files
Future-Proof - All new Next.js features target the App Router

💡 Tip: If you're starting a new project, use the App Router. Only use Pages Router for legacy projects or specific compatibility needs.

4. Setting Up Your First Next.js Project

Prerequisites

Before creating a Next.js project, ensure you have:

Node.js 18.17 or later - Download from nodejs.org
npm, yarn, or pnpm - Package manager (npm comes with Node.js)
Code editor - VS Code recommended with ESLint and Prettier extensions

Creating a New Project

Open your terminal and run:

npx create-next-app@latest my-nextjs-app

You'll be prompted with configuration options:

Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? Yes
Would you like to customize the default import alias? No

Recommended choices for beginners:

TypeScript: Yes (better DX and error catching)
ESLint: Yes (code quality)
Tailwind CSS: Yes (rapid styling)
src/ directory: No (simpler structure)
App Router: Yes (modern approach)

Running the Development Server

Navigate to your project and start the development server:

cd my-nextjs-app
npm run dev

Open http://localhost:3000 in your browser. You should see the Next.js welcome page!

Available Scripts

{
  "scripts": {
    "dev": "next dev",        // Start development server
    "build": "next build",    // Create production build
    "start": "next start",    // Run production server
    "lint": "next lint"       // Run ESLint
  }
}

💡 Tip: Use npm run dev -- -p 3001 to run on a different port if 3000 is already in use.

5. Understanding the Project Structure

Project Directory Overview

After creating a new Next.js project, you'll see this structure:

my-nextjs-app/
+-- app/
|   +-- favicon.ico
|   +-- globals.css
|   +-- layout.tsx
|   +-- page.tsx
+-- public/
|   +-- (static files)
+-- node_modules/
+-- .eslintrc.json
+-- .gitignore
+-- next.config.ts
+-- package.json
+-- postcss.config.mjs
+-- tailwind.config.ts
+-- tsconfig.json

Key Files and Directories

app/ - The main directory for your application code using the App Router.

app/layout.tsx - The root layout component that wraps all pages. Define global UI elements like headers and footers here.

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

app/page.tsx - The home page component, rendered at the root URL (/).

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js!</h1>
    </main>
  )
}

public/ - Static assets like images, fonts, and files. Accessible at the root URL.

next.config.ts - Next.js configuration file for customizing build and runtime behavior.

tailwind.config.ts - Tailwind CSS configuration for customizing your design system.

tsconfig.json - TypeScript configuration with Next.js-specific settings.

📝 Note: The globals.css file contains your global styles. When using Tailwind CSS, this file includes the Tailwind directives.

Section 2: Styling & Assets

1. CSS Modules vs Global CSS

Next.js supports multiple styling approaches out of the box: Global CSS, CSS Modules, Tailwind CSS, and CSS-in-JS libraries. Understanding when to use each helps you build maintainable styles.

Global CSS

Global styles apply to your entire application. Import them in your root layout:

/* app/globals.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
}

a {
    color: #0070f3;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

// app/layout.tsx
import './globals.css'

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    )
}

CSS Modules

CSS Modules scope styles to a component, preventing naming conflicts. Create files with .module.css extension:

/* app/components/Button.module.css */
.button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.primary {
    background: #0070f3;
    color: white;
}

.primary:hover {
    background: #0051a8;
}

.secondary {
    background: #eaeaea;
    color: #333;
}

// app/components/Button.tsx
import styles from './Button.module.css'

type ButtonProps = {
    variant?: 'primary' | 'secondary'
    children: React.ReactNode
}

export function Button({ variant = 'primary', children }: ButtonProps) {
    return (
        <button className={styles.button + ' ' + styles[variant]}>
            {children}
        </button>
    )
}

💡 Tip: CSS Modules automatically generate unique class names like 'Button_primary__x7f3a', ensuring styles never leak between components.

2. Tailwind CSS v4 Setup & Best Practices

What's New in Tailwind CSS v4

Tailwind CSS v4 is a major rewrite with significant improvements: it's up to 10x faster, uses native CSS cascade layers, and has a simplified configuration using CSS instead of JavaScript.

Installing Tailwind CSS v4

# Install Tailwind CSS v4
npm install tailwindcss @tailwindcss/postcss postcss

Configuration with CSS (New in v4)

Tailwind v4 uses CSS-based configuration instead of tailwind.config.js:

/* app/globals.css */
@import "tailwindcss";

/* Custom theme configuration using CSS */
@theme {
    --color-primary: #0070f3;
    --color-secondary: #7928ca;
    --font-sans: "Inter", system-ui, sans-serif;
    --spacing-18: 4.5rem;
}

/* Custom utilities */
@utility container-narrow {
    max-width: 42rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

// postcss.config.mjs
export default {
    plugins: {
        '@tailwindcss/postcss': {}
    }
}

Using Tailwind in Components

// app/components/Card.tsx
export function Card({ title, description, children }) {
    return (
        <div className="rounded-xl border border-gray-200 bg-white p-6
                        shadow-sm hover:shadow-md transition-shadow">
            <h2 className="text-xl font-semibold text-gray-900 mb-2">
                {title}
            </h2>
            <p className="text-gray-600 mb-4">
                {description}
            </p>
            {children}
        </div>
    )
}

Best Practices

Use consistent spacing scale (p-4, p-6, p-8 not p-5, p-7)
Extract repeated patterns into components, not @apply
Use CSS variables for brand colors via @theme
Leverage the new container queries in v4

⚠️ Important: Tailwind v4 no longer requires a tailwind.config.js file. All configuration happens in your CSS using @theme and other directives.

3. Fonts with next/font

Why Use next/font?

next/font automatically optimizes fonts and removes external network requests for improved privacy and performance. It self-hosts font files and eliminates layout shift with automatic font fallbacks.

Using Google Fonts

// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
    subsets: ['latin'],
    display: 'swap',
    variable: '--font-inter',
})

const robotoMono = Roboto_Mono({
    subsets: ['latin'],
    display: 'swap',
    variable: '--font-roboto-mono',
})

export default function RootLayout({ children }) {
    return (
        <html lang="en" className={inter.variable + ' ' + robotoMono.variable}>
            <body className={inter.className}>
                {children}
            </body>
        </html>
    )
}

Using Local Fonts

// app/layout.tsx
import localFont from 'next/font/local'

const myFont = localFont({
    src: [
        {
            path: '../fonts/MyFont-Regular.woff2',
            weight: '400',
            style: 'normal',
        },
        {
            path: '../fonts/MyFont-Bold.woff2',
            weight: '700',
            style: 'normal',
        },
    ],
    variable: '--font-my-font',
})

export default function RootLayout({ children }) {
    return (
        <html lang="en" className={myFont.variable}>
            <body>{children}</body>
        </html>
    )
}

Using with Tailwind CSS

/* app/globals.css - Tailwind v4 */
@import "tailwindcss";

@theme {
    --font-sans: var(--font-inter), system-ui, sans-serif;
    --font-mono: var(--font-roboto-mono), monospace;
}

💡 Tip: Always use display: 'swap' to prevent invisible text while fonts load. This improves Core Web Vitals scores.

4. Images with next/image

Automatic Image Optimization

The next/image component automatically optimizes images: resizing, converting to modern formats (WebP/AVIF), and lazy loading. It prevents layout shift with automatic dimension handling.

Basic Usage

import Image from 'next/image'

// Local image (automatically gets dimensions)
import profilePic from './profile.jpg'

export function Avatar() {
    return (
        <Image
            src={profilePic}
            alt="Profile picture"
            placeholder="blur" // Shows blurred version while loading
        />
    )
}

// Remote image (must specify dimensions)
export function ProductImage({ src, name }) {
    return (
        <Image
            src={src}
            alt={name}
            width={400}
            height={300}
            priority // Load immediately (above the fold)
        />
    )
}

Responsive Images

// Fill container (responsive)
export function HeroImage() {
    return (
        <div className="relative h-[400px] w-full">
            <Image
                src="/hero.jpg"
                alt="Hero image"
                fill
                style={{ objectFit: 'cover' }}
                sizes="100vw"
                priority
            />
        </div>
    )
}

// Responsive with sizes hint
export function BlogImage({ src, alt }) {
    return (
        <Image
            src={src}
            alt={alt}
            width={800}
            height={400}
            sizes="(max-width: 768px) 100vw, 800px"
            className="rounded-lg"
        />
    )
}

Configuring Remote Images

By default, Next.js blocks remote images for security reasons. The next/image component optimizes images on-demand, which means your server fetches, processes, and caches external images. Without restrictions, malicious users could abuse your server to process images from any URL, potentially causing security vulnerabilities and unexpected costs.

To use remote images, you must explicitly whitelist the domains in your next.config.ts file using the remotePatterns configuration:

// next.config.ts
import type { NextConfig } from 'next'

const config: NextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'images.unsplash.com',
            },
            {
                protocol: 'https',
                hostname: '*.cloudinary.com',
            },
        ],
    },
}

export default config

Why This Configuration Matters:

Security - Prevents your server from being used to fetch and process arbitrary external images
Cost Control - Image optimization uses server resources; whitelisting prevents abuse
Performance - Only trusted CDNs and image sources are optimized
Wildcards - Use '.' prefix to allow all subdomains (e.g., '.cloudinary.com')

📝 Note: Use priority prop for Largest Contentful Paint (LCP) images like hero images. This preloads them for better performance.

5. Metadata, SEO & Open Graph Images

Static Metadata

Define metadata in your layout or page files to improve SEO. Next.js automatically generates the appropriate meta tags.

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
    title: {
        default: 'My App',
        template: '%s | My App', // For child pages
    },
    description: 'A Next.js application',
    keywords: ['Next.js', 'React', 'JavaScript'],
    authors: [{ name: 'Your Name' }],
    openGraph: {
        title: 'My App',
        description: 'A Next.js application',
        url: 'https://myapp.com',
        siteName: 'My App',
        images: [
            {
                url: '/og-image.png',
                width: 1200,
                height: 630,
            },
        ],
        locale: 'en_US',
        type: 'website',
    },
    twitter: {
        card: 'summary_large_image',
        title: 'My App',
        description: 'A Next.js application',
        images: ['/og-image.png'],
    },
}

Dynamic Metadata

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

type Props = {
    params: Promise<{ slug: string }>
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { slug } = await params
    const post = await getPost(slug)

    return {
        title: post.title,
        description: post.excerpt,
        openGraph: {
            title: post.title,
            description: post.excerpt,
            images: [post.coverImage],
        },
    }
}

Dynamic OG Images

// app/og/route.tsx
import { ImageResponse } from 'next/og'

export async function GET(request: Request) {
    const { searchParams } = new URL(request.url)
    const title = searchParams.get('title') || 'My App'

    return new ImageResponse(
        (
            <div style={{
                display: 'flex',
                fontSize: 60,
                background: 'linear-gradient(to bottom, #1a1a2e, #16213e)',
                color: 'white',
                width: '100%',
                height: '100%',
                alignItems: 'center',
                justifyContent: 'center',
            }}>
                {title}
            </div>
        ),
        { width: 1200, height: 630 }
    )
}

💡 Tip: Use the template pattern in title metadata so child pages automatically append your site name: 'Blog Post Title | My App'

Section 3: Routing in Depth

1. File-Based Routing Explained

Next.js uses a file-system based router where folders define routes. This means the structure of your app/ directory directly maps to your URL structure.

app/
+-- page.tsx           -> /
+-- about/
|   +-- page.tsx       -> /about
+-- blog/
|   +-- page.tsx       -> /blog
+-- contact/
    +-- page.tsx       -> /contact

Creating Your First Routes

Each route requires a page.tsx file inside its folder. The page file exports a React component that renders when users visit that route.

// app/page.tsx - Home page (/)
export default function HomePage() {
    return (
        <main>
            <h1>Welcome to My App</h1>
            <p>This is the home page.</p>
        </main>
    )
}

// app/about/page.tsx - About page (/about)
export default function AboutPage() {
    return (
        <main>
            <h1>About Us</h1>
            <p>Learn more about our company.</p>
        </main>
    )
}

Nested Routes

Create nested folders for nested routes:

app/
+-- blog/
    +-- page.tsx           -> /blog
    +-- posts/
        +-- page.tsx       -> /blog/posts

// app/blog/page.tsx
export default function BlogPage() {
    return <h1>Blog</h1>
}

// app/blog/posts/page.tsx
export default function PostsPage() {
    return <h1>All Blog Posts</h1>
}

Navigation Between Pages

Use the Link component for client-side navigation:

import Link from 'next/link'

export default function Navigation() {
    return (
        <nav>
            <Link href="/">Home</Link>
            <Link href="/about">About</Link>
            <Link href="/blog">Blog</Link>
            <Link href="/contact">Contact</Link>
        </nav>
    )
}

💡 Tip: Always use the Link component instead of anchor tags for internal navigation. Link enables client-side navigation and automatic prefetching for faster page loads.

2. Pages, Layouts & Nested Routes

Understanding Layouts

Layouts wrap pages and preserve state across navigations. They're perfect for shared UI like headers, sidebars, and footers.

// app/layout.tsx - Root Layout (required)
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
            <body className={inter.className}>
                <header>
                    <nav>My App</nav>
                </header>
                <main>{children}</main>
                <footer>© 2024</footer>
            </body>
        </html>
    )
}

Nested Layouts

Each route segment can have its own layout that nests inside parent layouts:

app/
+-- layout.tsx              -> Root layout
+-- page.tsx                -> Home page
+-- dashboard/
    +-- layout.tsx          -> Dashboard layout (nested)
    +-- page.tsx            -> /dashboard
    +-- settings/
        +-- page.tsx        -> /dashboard/settings

// app/dashboard/layout.tsx
export default function DashboardLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <div className="dashboard">
            <aside>
                <nav>
                    <a href="/dashboard">Overview</a>
                    <a href="/dashboard/settings">Settings</a>
                </nav>
            </aside>
            <section>{children}</section>
        </div>
    )
}

Layout Benefits

Preserved State - Layouts don't re-render when navigating between pages they wrap
No Prop Drilling - Fetch data once in layout, available to all children
Partial Rendering - Only the page content updates, not the entire layout

⚠️ Important: The root layout (app/layout.tsx) is required and must contain html and body tags. Nested layouts should NOT include these tags.

3. Dynamic Routes & Catch-All Routes

Dynamic Segments

Use square brackets to create dynamic routes that match variable paths:

app/
+-- blog/
    +-- [slug]/
        +-- page.tsx       -> /blog/hello-world, /blog/my-post

// app/blog/[slug]/page.tsx
type Props = {
    params: Promise<{ slug: string }>
}

export default async function BlogPost({ params }: Props) {
    const { slug } = await params

    return (
        <article>
            <h1>Post: {slug}</h1>
        </article>
    )
}

Multiple Dynamic Segments

app/
+-- shop/
    +-- [category]/
        +-- [product]/
            +-- page.tsx   -> /shop/electronics/iphone

// app/shop/[category]/[product]/page.tsx
type Props = {
    params: Promise<{ category: string; product: string }>
}

export default async function ProductPage({ params }: Props) {
    const { category, product } = await params

    return (
        <div>
            <p>Category: {category}</p>
            <p>Product: {product}</p>
        </div>
    )
}

Catch-All Segments

Use [...slug] to match any number of segments:

app/
+-- docs/
    +-- [...slug]/
        +-- page.tsx       -> /docs/a, /docs/a/b, /docs/a/b/c

// app/docs/[...slug]/page.tsx
type Props = {
    params: Promise<{ slug: string[] }>
}

export default async function DocsPage({ params }: Props) {
    const { slug } = await params
    // slug = ['a', 'b', 'c'] for /docs/a/b/c

    return (
        <div>
            <p>Path: {slug.join(' / ')}</p>
        </div>
    )
}

💡 Tip: Use [...slug] for optional catch-all routes that also match the parent path (/docs).

4. Route Groups & Folder Conventions

What Are Route Groups?

Route groups organize routes without affecting the URL structure. Wrap folder names in parentheses:

app/
+-- (marketing)/
|   +-- layout.tsx         -> Marketing layout
|   +-- page.tsx           -> / (home page)
|   +-- about/
|   |   +-- page.tsx       -> /about
|   +-- pricing/
|       +-- page.tsx       -> /pricing
+-- (app)/
    +-- layout.tsx         -> App layout
    +-- dashboard/
    |   +-- page.tsx       -> /dashboard
    +-- settings/
        +-- page.tsx       -> /settings

Use Cases for Route Groups

1. Different layouts for different sections:

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
    return (
        <div className="marketing">
            <header>Marketing Header</header>
            {children}
        </div>
    )
}

// app/(app)/layout.tsx
export default function AppLayout({ children }) {
    return (
        <div className="app">
            <Sidebar />
            {children}
        </div>
    )
}

2. Organizing by feature:

app/
+-- (auth)/
|   +-- login/
|   +-- register/
+-- (dashboard)/
    +-- overview/
    +-- analytics/

Private Folders

Prefix with underscore to exclude from routing:

app/
+-- _components/     -> Not a route, just organization
+-- _lib/            -> Not a route, utilities
+-- page.tsx         -> Actual route

📝 Note: Route groups are purely organizational. The parentheses folder name is completely removed from the URL path.

5. Not Found & Error Routes

Custom 404 Page

Create a not-found.tsx file to show when a page doesn't exist:

// app/not-found.tsx
import Link from 'next/link'

export default function NotFound() {
    return (
        <div className="not-found">
            <h1>404 - Page Not Found</h1>
            <p>Sorry, we couldn't find the page you're looking for.</p>
            <Link href="/">Return Home</Link>
        </div>
    )
}

Triggering Not Found

Use the notFound() function to programmatically show the 404 page:

// app/blog/[slug]/page.tsx
import { notFound } from 'next/navigation'

export default async function BlogPost({ params }) {
    const { slug } = await params
    const post = await getPost(slug)

    if (!post) {
        notFound() // Shows the not-found.tsx page
    }

    return <article>{post.content}</article>
}

Error Handling

Create error.tsx to handle runtime errors gracefully:

// app/error.tsx
'use client' // Error boundaries must be Client Components

import { useEffect } from 'react'

export default function Error({
    error,
    reset,
}: {
    error: Error & { digest?: string }
    reset: () => void
}) {
    useEffect(() => {
        console.error(error)
    }, [error])

    return (
        <div className="error">
            <h2>Something went wrong!</h2>
            <button onClick={() => reset()}>Try again</button>
        </div>
    )
}

Nested Error Boundaries

Error files create boundaries at that route segment level. Errors bubble up to the nearest error boundary:

app/
+-- error.tsx              -> Catches all errors
+-- dashboard/
    +-- error.tsx          -> Catches dashboard errors only
    +-- page.tsx

⚠️ Important: error.tsx must be a Client Component (add 'use client' at the top). The reset() function attempts to re-render the segment.

6. Loading UI & Suspense Boundaries

Automatic Loading States

Create a loading.tsx file to show loading UI while a route segment loads:

// app/dashboard/loading.tsx
export default function Loading() {
    return (
        <div className="loading">
            <div className="spinner"></div>
            <p>Loading dashboard...</p>
        </div>
    )
}

How It Works

Next.js automatically wraps your page in a Suspense boundary:

// What Next.js does internally:
<Suspense fallback={<Loading />}>
    <Page />
</Suspense>

Skeleton Components

Create better loading experiences with skeletons:

// app/dashboard/loading.tsx
export default function DashboardLoading() {
    return (
        <div className="dashboard-skeleton">
            <div className="skeleton-header" />
            <div className="skeleton-cards">
                <div className="skeleton-card" />
                <div className="skeleton-card" />
                <div className="skeleton-card" />
            </div>
            <div className="skeleton-table" />
        </div>
    )
}

/* Skeleton animation */
.skeleton-card {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

Manual Suspense Boundaries

Use Suspense directly for more granular control:

import { Suspense } from 'react'

export default function Dashboard() {
    return (
        <div>
            <h1>Dashboard</h1>

            <Suspense fallback={<CardsSkeleton />}>
                <DashboardCards />
            </Suspense>

            <Suspense fallback={<ChartSkeleton />}>
                <RevenueChart />
            </Suspense>
        </div>
    )
}

💡 Tip: Use multiple Suspense boundaries to stream different parts of the page independently. This allows faster content to appear first.

Section 4: Rendering & Data Fetching

1. Rendering Models: CSR, SSR, SSG, ISR

Next.js supports multiple rendering strategies. Choosing the right one depends on your content type and update frequency.

Client-Side Rendering (CSR)

Content is rendered in the browser using JavaScript. The server sends an empty HTML shell.

'use client'

import { useState, useEffect } from 'react'

export default function ClientPage() {
    const [data, setData] = useState(null)

    useEffect(() => {
        fetch('/api/data')
            .then(res => res.json())
            .then(setData)
    }, [])

    if (!data) return <p>Loading...</p>

    return <div>{data.content}</div>
}

Use for: User dashboards, real-time data, personalized content

Server-Side Rendering (SSR)

Content is rendered on the server for each request. Fresh data every time.

// app/products/page.tsx
export const dynamic = 'force-dynamic' // Opt into SSR

export default async function ProductsPage() {
    const products = await fetch('https://api.example.com/products', {
        cache: 'no-store' // Don't cache, always fresh
    }).then(res => res.json())

    return (
        <ul>
            {products.map(p => <li key={p.id}>{p.name}</li>)}
        </ul>
    )
}

Use for: Frequently changing data, user-specific content

Static Site Generation (SSG)

Content is rendered at build time. Fastest performance, cached globally.

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
    const posts = await getPosts()
    return posts.map(post => ({ slug: post.slug }))
}

export default async function BlogPost({ params }) {
    const { slug } = await params
    const post = await getPost(slug)
    return <article>{post.content}</article>
}

Use for: Blog posts, documentation, marketing pages

Incremental Static Regeneration (ISR)

Static pages that revalidate after a time period. Best of both worlds.

// app/products/page.tsx
export const revalidate = 3600 // Revalidate every hour

export default async function ProductsPage() {
    const products = await fetch('https://api.example.com/products')
        .then(res => res.json())

    return (
        <ul>
            {products.map(p => <li key={p.id}>{p.name}</li>)}
        </ul>
    )
}

Use for: E-commerce products, news articles, content that changes periodically

Comparison Table

Strategy	Build Time	Request Time	SEO	Fresh Data
CSR	Fast	Slow	Poor	Yes
SSR	Fast	Slower	Good	Yes
SSG	Slower	Fast	Good	No
ISR	Slower	Fast	Good	Periodic

2. Server Components vs Client Components

Understanding the Difference

In Next.js App Router, components are Server Components by default. They render on the server and send HTML to the client with zero JavaScript.

When to Use Server Components

Server Components Can:

Fetch data directly from databases
Access backend resources and APIs
Keep sensitive data on the server (API keys)

Server Components Cannot:

Use React hooks (useState, useEffect)
Add event listeners (onClick, onChange)
Access browser APIs (localStorage, window)

// Server Component (default) - app/dashboard/page.tsx
async function getData() {
    const res = await fetch('https://api.example.com/data', {
        headers: { 'API-Key': process.env.API_KEY }
    })
    return res.json()
}

export default async function Dashboard() {
    const data = await getData()

    return (
        <div>
            <h1>Dashboard</h1>
            <p>Total users: {data.userCount}</p>
        </div>
    )
}

When to Use Client Components

Use Client Components when you need:

State and lifecycle effects (useState, useEffect)
Event handlers (onClick, onSubmit)
Browser APIs (localStorage, geolocation)

Understanding Hydration

Hydration is the process where React attaches event listeners and makes server-rendered HTML interactive in the browser. When a page loads, the server sends pre-rendered HTML so users see content immediately. Then React 'hydrates' this HTML by attaching JavaScript functionality to make buttons clickable, forms submittable, and state manageable.

How Hydration Works:

Server renders HTML and sends it to the browser (fast initial display)
Browser displays the static HTML immediately (users see content)
JavaScript bundle loads in the background
React hydrates the HTML by attaching event handlers and state
Page becomes fully interactive

Hydration Errors and How to Fix Them

Hydration errors occur when the server-rendered HTML doesn't match what React expects to render on the client. This mismatch confuses React and can cause visual glitches or broken functionality.

Common Causes of Hydration Errors:

Using browser-only APIs like window, localStorage, or document during render
Rendering dates/times that differ between server and client
Using random values or Math.random() during render
Invalid HTML nesting (e.g., div inside p, or p inside p)
Browser extensions modifying the HTML

How to Fix Hydration Errors:

// BAD: Using window during render causes hydration error
export default function BadComponent() {
    const width = window.innerWidth // Error: window is undefined on server
    return <div>Width: {width}</div>
}

// GOOD: Use useEffect for browser-only code
"use client"
import { useState, useEffect } from 'react'

export default function GoodComponent() {
    const [width, setWidth] = useState(0)

    useEffect(() => {
        setWidth(window.innerWidth)
    }, [])

    return <div>Width: {width}</div>
}

// GOOD: Use suppressHydrationWarning for intentional mismatches
export default function TimeDisplay() {
    return (
        <time suppressHydrationWarning>
            {new Date().toLocaleTimeString()}
        </time>
    )
}

// GOOD: Use dynamic import with ssr: false for client-only components
import dynamic from 'next/dynamic'

const ClientOnlyChart = dynamic(() => import('./Chart'), {
    ssr: false,
    loading: () => <p>Loading chart...</p>
})

💡 Tip: Server Components don't hydrate at all - they render only on the server and send pure HTML. This is why they're more performant and can't use hooks or browser APIs.

⚠️ Important: Keep Client Components as leaf nodes in your component tree. Push interactivity down and keep data fetching in Server Components.

3. 'use client' - When & Why to Use It

The Client Boundary

The 'use client' directive marks a file as a Client Component. Place it at the very top of the file, before any imports.

"use client"

import { useState } from 'react'

export default function Counter() {
    const [count, setCount] = useState(0)

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    )
}

Common Patterns

Make small, focused Client Components and compose them within Server Components:

// app/products/page.tsx (Server Component)
import { AddToCartButton } from './AddToCartButton'

async function getProducts() {
    return fetch('https://api.example.com/products').then(r => r.json())
}

export default async function ProductsPage() {
    const products = await getProducts()

    return (
        <div className="products-grid">
            {products.map(product => (
                <div key={product.id}>
                    <h2>{product.name}</h2>
                    <p>${product.price}</p>
                    <AddToCartButton productId={product.id} />
                </div>
            ))}
        </div>
    )
}

// app/products/AddToCartButton.tsx (Client Component)
"use client"

import { useState } from 'react'

export function AddToCartButton({ productId }: { productId: string }) {
    const [added, setAdded] = useState(false)

    return (
        <button
            onClick={() => {
                addToCart(productId)
                setAdded(true)
            }}
        >
            {added ? 'Added!' : 'Add to Cart'}
        </button>
    )
}

💡 Tip: The boundary effect means all components imported into a Client Component also become client components. Design your component tree to minimize the client boundary.

4. Fetching Data in Server Components

Direct Data Fetching

Server Components can fetch data directly using async/await:

// app/posts/page.tsx
async function getPosts() {
    const res = await fetch('https://api.example.com/posts')
    return res.json()
}

export default async function PostsPage() {
    const posts = await getPosts()

    return (
        <ul>
            {posts.map(post => (
                <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    )
}

Database Queries

Query your database directly - no API layer needed:

// app/users/page.tsx
import { db } from '@/lib/db'

export default async function UsersPage() {
    const users = await db.user.findMany({
        orderBy: { createdAt: 'desc' },
        take: 10
    })

    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    )
}

Caching Behavior

Next.js automatically caches fetch requests:

// Cached indefinitely (default)
const data = await fetch('https://api.example.com/data')

// Revalidate every hour
const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 }
})

// No caching - always fresh
const data = await fetch('https://api.example.com/data', {
    cache: 'no-store'
})

⚠️ Important: Sensitive operations like database queries should only happen in Server Components where the code never reaches the client.

5. Parallel & Sequential Data Fetching

Sequential Fetching (Waterfall)

When one fetch depends on another:

// Each fetch waits for the previous one
async function getUser(id: string) {
    const res = await fetch('/api/users/' + id)
    return res.json()
}

async function getUserPosts(userId: string) {
    const res = await fetch('/api/users/' + userId + '/posts')
    return res.json()
}

export default async function UserProfile({ params }) {
    const { id } = await params
    const user = await getUser(id)         // First, get user
    const posts = await getUserPosts(user.id)  // Then, get posts

    return (
        <div>
            <h1>{user.name}</h1>
            <PostsList posts={posts} />
        </div>
    )
}

Parallel Fetching

When fetches are independent, run them simultaneously:

// All fetches start at the same time
async function getUser(id: string) {
    const res = await fetch('/api/users/' + id)
    return res.json()
}

async function getPosts() {
    const res = await fetch('/api/posts')
    return res.json()
}

async function getComments() {
    const res = await fetch('/api/comments')
    return res.json()
}

export default async function Dashboard({ params }) {
    const { id } = await params

    // Start all fetches simultaneously
    const [user, posts, comments] = await Promise.all([
        getUser(id),
        getPosts(),
        getComments()
    ])

    return { user, posts, comments }
}

Practical Example

// app/dashboard/page.tsx
async function getStats() {
    return fetch('https://api.example.com/stats').then(r => r.json())
}

async function getRecentOrders() {
    return fetch('https://api.example.com/orders?limit=5').then(r => r.json())
}

async function getNotifications() {
    return fetch('https://api.example.com/notifications').then(r => r.json())
}

export default async function Dashboard() {
    const [stats, orders, notifications] = await Promise.all([
        getStats(),
        getRecentOrders(),
        getNotifications()
    ])

    return (
        <div>
            <StatsCards stats={stats} />
            <OrdersTable orders={orders} />
            <NotificationsList notifications={notifications} />
        </div>
    )
}

⚠️ Important: Always use Promise.all() / Promise.allSettled() / Promise.race() depending on your requirement when fetching independent data. This can dramatically improve page load times.

Understanding Promise Methods

Promise.all() - Waits for ALL promises to resolve. If any promise rejects, the entire operation fails immediately. Use when you need all data and can't proceed without it.

Promise.allSettled() - Waits for ALL promises to complete (resolve or reject). Never fails early; returns status and value/reason for each. Use when you want partial results even if some requests fail.

Promise.race() - Returns as soon as the FIRST promise settles (resolves or rejects). Use for timeouts or when you only need the fastest response.

// Promise.all - fails if any request fails
const [users, posts] = await Promise.all([getUsers(), getPosts()])

// Promise.allSettled - returns results even if some fail
const results = await Promise.allSettled([getUsers(), getPosts()])
results.forEach(result => {
    if (result.status === 'fulfilled') console.log(result.value)
    if (result.status === 'rejected') console.log(result.reason)
})

// Promise.race - returns first settled promise
const fastest = await Promise.race([fetchFromCDN1(), fetchFromCDN2()])

This article covers the first half of the Next.js 16 Complete Beginner's Guide. For the complete guide including Server Actions, Authentication, Backend APIs, and more, download the full 110-page PDF for FREE.

🚀 Ready to Master Next.js?

Take your skills to the next level by building large-scale, production-ready applications with my comprehensive video course.

👉 Enroll Now.

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/

From Idea to Paid SaaS in 24 Hours — The Claude Code Blueprint Is Live

Yogesh Chavan — Fri, 10 Apr 2026 10:02:39 +0000

What if you could go from a blank VS Code screen to a fully deployed, revenue-generating SaaS app, live on your own domain, in a single day?

That's exactly what "From Idea to Paid SaaS in 24 Hours" teaches you. This is a brand-new, hands-on 5+ hours video course built around Claude Code, the AI-powered development workflow that's changing how indie developers ship software.

FREE Previews From The Course

Why This Course Exists

Most AI coding courses teach you to build toy projects. A to-do app. A chat widget. Something you'd never actually charge money for. And even when they build something real, they stop at localhost.

This course doesn't stop there.

You'll build a production-grade URL shortener SaaS, complete with user authentication, real-time click analytics, QR code generation, payment integration, and SEO-optimized pages. The kind of app people actually pay for.

But this course isn't really about building URL shortner app. It's about giving you the blueprint, the mindset, and the skills to build whatever app lives in your head, and turn it into a real product people pay for.

Then you'll deploy it to your own custom domain (Namecheap, GoDaddy, or any registrar), add analytics to track real user behavior, and learn 4 proven strategies to rank higher on Google Search, with a full Google Search Console walkthrough so you can see exactly how your site performs in search results.

And you'll do it step by step, commit by commit, following the exact workflow used to ship multiple real-world production apps.

What You'll Learn Across 10 Modules

The course covers the entire journey from idea to income:

Strategy: How to find high-value SaaS ideas worth building
Design: Source production-quality design references (no design skills needed)
Development: Build full-stack apps within a 24-hour window
AI Prompting: Generate production-ready UI with single, well-crafted prompts
Security: Implement authentication, validation, and access control the right way
Monetization: Integrate payments and manage webhooks for real revenue
SaaS Architecture: Multi-tenancy, subscription tiers, and scalable data models
Growth: 4 ways to rank your site higher on Google Search + a hands-on Google Search Console demo covering sitemaps, indexing, and search performance tracking
DevOps: Deploy to production on Vercel with your own custom domain (Namecheap, GoDaddy, etc.), CI/CD pipelines, and zero-downtime deployments
Analytics: Add product analytics to track user behavior, measure engagement, and optimize conversion funnels with real data

The Tech Stack

You'll work with a modern, battle-tested stack:

Next.js 16 with TypeScript
PostgreSQL with Drizzle ORM
better-Auth for authentication (email + OAuth)
Tailwind CSS v4 + shadcn/ui for polished interfaces
Zod for validation
Vercel for deployment
Google Search Console for SEO tracking

The Secret Weapon: Token-Efficient Prompting

Here's something most developers get wrong with Claude Code — they burn through their API tokens in hours and hit usage limits before lunch.

This course teaches you a systematic prompting framework that gets 2-3x more output on the same subscription. You'll learn how to ship apps throughout the entire week while retaining 30-40% of your usage limits. That's the difference between building one app a month and shipping one every week.

What's Included

5+ hours of focused video content
1 complete SaaS built from scratch to deployment
6 production app source codes with lifetime access
Claude Prompting Strategies Guide — save up to 60% of your tokens
2-3x Output Optimization Guide — eliminate context bloat and token waste
Drizzle ORM Getting Started Guide — setup, migrations, and query patterns
Claude Code Power Tips Cheatsheet — quick-reference for daily use
50-page Claude Code Getting Started Guide — comprehensive setup documentation

🎁 Massive Bonuses (100% FREE)

You’re not just getting the course… you’re getting real-world assets you can use immediately.

💎 Bonus #1: 6 Production-Ready Apps (Full Source Code)

Build faster by learning from real, working applications:

👉 No toy projects. These are real-world, production-grade builds.

💎 Bonus #2: Premium Guides + Cheatsheets

📘 Claude Code Guide (50 Pages)
→ Learn how to use Claude effectively for real development workflows
📗 Drizzle ORM with Next.js
→ Modern database workflows made simple
⚡ Claude Power Tips Cheatsheet
→ Save hours with proven shortcuts and workflows

🔥 Total Value: Massive
💰 Your Price: Included FREE

Who Is This For?

This course is built for developers who know JavaScript and React basics and want to:

Build and launch their first (or next) SaaS product
Learn how to use AI-assisted development effectively, not wastefully
Ship real products that generate revenue, not portfolio pieces
Master the full stack — from database to deployment to payments

If you've been stuck in tutorial hell or can't seem to bridge the gap between "I built a project" and "I have paying customers," this course was made for you.

Launch Offer — 55% Off

The course is available right now at a special launch price:

~~$29~~ → $13 — one-time payment, no subscriptions, no recurring fees.

You get lifetime access to all course content, source code, bonus guides, and every future update.

Get the course before the launch price expires

Stop watching tutorials. Start shipping products. Build your first paid SaaS in 24 hours.

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/

🚀 Live Webinar Tomorrow: Build a Restaurant Ordering App from Scratch

Yogesh Chavan — Fri, 03 Apr 2026 14:18:12 +0000

Imagine this 👇

Your customers scan a QR code, browse your menu, and place orders instantly — no waiting, no confusion.

In this 3+ hour LIVE webinar through Zoom, I'll show you how to build a complete Restaurant Ordering Application step-by-step 💻

📅 Webinar Details


🗓 Date	4th April, 2026
⏰ Time	4:00 PM IST
🎯 Duration	3+ Hours

🔥 What You'll Learn

📱 Build a seamless digital menu for customers
🛒 Enable users to place orders directly from their phones
⚡ Implement real-time order updates (Pending → Confirmed → Preparing → Ready → Served)
🧑‍💼 Create a powerful Admin Dashboard to manage products & orders
🎨 Design a clean, modern, user-friendly UI
🚀 Learn how to structure and build a real-world full-stack application

💡 Perfect For

✅ Developers who want to build real-world projects

✅ Students looking to level up their portfolio

✅ Anyone interested in building freelancing projects

✅ Anyone who wants to learn how to build any type of application in hours instead of days/months

⚠️ Important Note

This is a LIVE, hands-on session — not just theory. You'll see everything being built in real-time.

🎟 Limited Seats Available

As the webinar will be through Zoom, seats are limited. So, hurry up!

Click the link below to register for the webinar.

Will not be able to join the webinar live? Still register, and you will get a recording of the webinar.

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/

Getting Started with Claude Code - A Complete Beginner's Guide

Yogesh Chavan — Fri, 03 Apr 2026 07:36:46 +0000

1. Introduction to Claude Code

What is Claude Code?

Claude Code is an agentic coding tool developed by Anthropic that lives in your terminal, understands your codebase, and helps you code faster. Unlike traditional AI assistants that simply answer questions and wait for your next prompt, Claude Code can autonomously read your files, run commands, make changes, and work through complex problems while you watch, redirect, or step away entirely.

Think of Claude Code as having a highly capable junior developer working alongside you. You describe what you want in plain language, and Claude Code figures out how to build it. It explores your codebase, plans the approach, implements the solution, and verifies it works — all through natural language commands.

Claude Code is available across multiple platforms including Terminal CLI, VS Code extension, JetBrains IDEs, Desktop app, Web browser, and even Slack integration.

Why Claude Code for React Developers?

For React.js developers, Claude Code offers tremendous value by automating routine tasks and accelerating development workflows:

Component Generation — Describe a component in plain language and Claude builds it with proper TypeScript types, hooks, and styling
Debugging — Paste an error message and Claude traces it through your codebase, identifies the root cause, and implements a fix
Testing — Claude can write comprehensive unit tests, integration tests, and fix failing tests automatically
Refactoring — Modernize legacy code, convert class components to hooks, or restructure your project architecture
Git Operations — Claude handles commits, branches, PRs, and merge conflicts through natural language
Documentation — Generate JSDoc comments, README files, and API documentation from your code

Claude Code vs Traditional AI Assistants

Understanding how Claude Code differs from traditional AI coding assistants helps you leverage its full potential:

Feature	Traditional AI Assistants	Claude Code
Interaction Model	Question-answer format	Agentic, autonomous execution
Code Access	Copy-paste snippets	Reads entire codebase directly
File Modification	Suggests changes only	Edits files with permission
Command Execution	Not supported	Runs bash, npm, git commands
Context	Single conversation	Persistent memory across sessions
Verification	Manual by user	Auto-runs tests, lints code

Prerequisites and Requirements

Before installing Claude Code, ensure you have the following:

Node.js 18+ — Required for the CLI. Check with: node --version
Git — For version control integration. Windows users need Git for Windows
Terminal/Command Prompt — Any modern terminal emulator works
A Code Project — A React project or any codebase to work with
Claude Account — Pro, Max, Teams, Enterprise subscription, or Console account

💡 Tip: If you're new to the terminal, Claude Code documentation includes a helpful terminal guide. Don't worry — the commands are straightforward, and Claude itself can help you learn!

Pricing and Plans

Claude Code is included with Claude subscriptions. Here are your options:

Claude Pro ($20/month) — Perfect for short coding sprints in small codebases with access to both Sonnet and Opus models
Claude Max ($100/month) — Great value for everyday use in larger codebases with more generous usage limits
Claude Max ($200/month) — Power user tier with the most access to Claude models
API Pay-as-you-go — Standard Claude API pricing with no per-seat fees, ideal for teams

2. Installation & Setup

Installing Claude Code on macOS/Linux

The recommended installation method uses the native installer, which automatically keeps Claude Code updated in the background. Open your terminal and run:

# Native installation (recommended)
curl -fsSL https://claude.ai/install.sh | bash

After installation completes, you can start Claude Code immediately by running:

# Navigate to your project
cd your-react-project

# Start Claude Code
claude

Installing Claude Code on Windows

Windows users have two options depending on their terminal. First, ensure you have Git for Windows installed (download from git-scm.com if needed).

For PowerShell:

# Run in PowerShell (look for PS C:\ prompt)
irm https://claude.ai/install.ps1 | iex

For Command Prompt (CMD):

# Run in CMD (look for C:\ prompt without PS)
curl -fsSL https://claude.ai/install.cmd -o install.cmd
install.cmd && del install.cmd

💡 Tip: If you see 'The token '&&' is not a valid statement separator', you're in PowerShell, not CMD. Your prompt shows PS C:\ when in PowerShell. Use the PowerShell command instead.

Alternative Installation Methods

If you prefer package managers, Claude Code is also available through Homebrew and WinGet. Note that these methods do not auto-update.

Using Homebrew (macOS):

# Install via Homebrew
brew install --cask claude-code

# Update manually when needed
brew upgrade claude-code

Using WinGet (Windows):

# Install via WinGet
winget install Anthropic.ClaudeCode

# Update manually when needed
winget upgrade Anthropic.ClaudeCode

Logging In and Authentication

When you first run claude, you'll be prompted to log in. Claude Code supports multiple authentication methods:

Claude Pro/Max/Teams/Enterprise — Recommended for most users, provides seamless access
Claude Console (API) — Uses pre-paid credits, auto-creates a 'Claude Code' workspace for cost tracking
Third-party Providers — Amazon Bedrock, Google Vertex AI, or Microsoft Foundry for enterprise

# Start Claude Code (prompts for login on first use)
claude

# Or explicitly log in
/login

Your credentials are stored securely on your system, so you won't need to log in again. To switch accounts later, use the /login command.

Starting Your First Session

Navigate to any React project directory and start Claude Code:

cd /path/to/your/react-project
claude

You'll see the Claude Code welcome screen with your session information, recent conversations, and latest updates.

Try these first commands to explore:

# Ask about your codebase
what does this project do?

# Get help
/help

# See available commands
?

3. Core Concepts

Understanding the Agentic Loop

Claude Code operates through an 'agentic loop' — a cycle where Claude receives your request, decides what actions to take, executes them, observes results, and continues until the task is complete or needs your input. This is fundamentally different from simple question-answer AI.

Here's how the agentic loop works:

Receive Request — You describe what you want in natural language
Analyze & Plan — Claude examines your codebase and determines what needs to be done
Execute Action — Claude uses tools (read files, run commands, edit code)
Observe Results — Claude sees the output and evaluates success
Iterate or Complete — Claude continues fixing issues or reports completion

This loop continues autonomously until Claude completes the task, encounters an error, or needs permission for a potentially risky action. You can interrupt at any time with Esc.

The Context Window Explained

The context window is Claude's working memory — it holds everything Claude knows about the current conversation including your messages, files read, command outputs, and Claude's responses. Claude's context window is approximately 200,000 tokens.

Understanding context is crucial because:

Performance can degrade as context fills up — Claude may forget earlier instructions
Each file read and command output consumes tokens
Use /clear between unrelated tasks to reset context
Use /compact to summarize and free space during long sessions

💡 Tip: Context management is the single most important skill for effective Claude Code usage. Clear your context between unrelated tasks, and be specific to avoid Claude reading unnecessary files.

Permission Modes

Claude Code has three permission modes that control how much autonomy Claude has:

Normal Mode — Default mode. Claude asks permission for file writes, bash commands, and other potentially risky actions. Safe but requires more interaction.
Auto Mode — A classifier reviews commands and blocks risky ones, while allowing routine operations to proceed. Use Shift+Tab to toggle.
Plan Mode — Claude only reads and analyzes code, never modifies anything. Perfect for exploration and planning complex changes safely.

Built-in Tools

Claude Code comes with powerful built-in tools that it uses automatically:

Tool	Description	Example Use
Read	Read file contents	Analyzing your components
Edit	Modify files with permission	Updating your code
Write	Create new files	Generating new components
Bash	Execute shell commands	Running npm, git, tests
Grep	Search file contents	Finding code patterns
Glob	Find files by pattern	Locating all `.tsx` files
Web	Search and fetch from web	Looking up documentation

You don't need to explicitly invoke these tools — Claude uses them automatically based on what your request requires. For example, asking "add a button to the Header component" triggers Claude to read the Header file, edit it, and potentially run your linter.

4. Basic Commands & Usage

Essential CLI Commands

These are the most important commands for daily use with Claude Code:

Command	Description	Example
`claude`	Start interactive mode	`claude`
`claude "task"`	Run a one-time task	`claude "fix the build"`
`claude -p "query"`	Run query, then exit	`claude -p "explain this"`
`claude -c`	Continue last conversation	`claude -c`
`claude -r`	Resume a previous session	`claude -r`
`claude commit`	Create a Git commit	`claude commit`
`/clear`	Clear conversation history	`/clear`
`/help`	Show available commands	`/help`
`/compact`	Compress context	`/compact`
`Esc`	Stop current action	Press Esc key

Interactive vs Non-Interactive Mode:

# Interactive mode - start a conversation
claude

# Non-interactive mode - single task
claude -p "list all React components in src/"

# Continue most recent conversation
claude --continue

# Resume specific session by name
claude --resume auth-refactor

Exploring Your Codebase

When you join a new project or need to understand unfamiliar code, ask Claude directly:

# Get a high-level overview
what does this project do?

# Understand the architecture
explain the main architecture patterns used here

# Find specific functionality
where is the authentication handled?

# Trace execution flow
trace the user login process from frontend to database

# Ask about specific files
explain what @src/components/Header.tsx does

💡 Tip: Use @ to reference specific files directly. For example, @src/App.tsx includes the file content immediately without Claude needing to search for it, saving context and time.

Making Code Changes

Claude Code can modify your files directly. Here's how to make changes effectively:

# Simple addition
add a loading spinner to the UserList component

# Specific modification
add input validation to the email field in the signup form

# Bug fixes
fix the bug where clicking submit twice sends duplicate requests

# Refactoring
convert the UserCard class component to a functional component with hooks

When Claude proposes changes, it shows you a diff of what will be modified. You can:

Accept — Allow the change and continue
Reject — Decline and provide feedback
Accept All — Enable auto-accept for the session
Esc — Stop and reconsider the approach

Working with Git

Claude Code integrates seamlessly with Git for version control operations:

# Check status
what files have I changed?

# Create commits
commit my changes with a descriptive message

# Branch operations
create a new branch called feature/user-auth

# View history
show me the last 5 commits

# Handle conflicts
help me resolve the merge conflicts

# Create PRs
create a pull request for my changes

💡 Tip: Claude Code works best when you have the gh CLI installed for GitHub operations. It enables direct PR creation, issue management, and more without rate limits.

5. CLAUDE.md & Memory System

What is CLAUDE.md?

CLAUDE.md is a special markdown file that Claude reads at the start of every session. It contains persistent instructions, project conventions, and context that Claude should always know about. Think of it as onboarding documentation specifically for Claude.

You can place CLAUDE.md files in several locations:

Project root (./CLAUDE.md) — Shared with team via Git, contains project-specific instructions
Home folder (~/.claude/CLAUDE.md) — Personal preferences that apply to all your projects
Child directories — Loaded when Claude works with files in those directories

Generate a starter CLAUDE.md automatically:

# Generate CLAUDE.md based on your project
/init

The /init command analyzes your codebase and creates a file with build commands, test instructions, and conventions it discovers.

Creating Effective Instructions

A well-crafted CLAUDE.md significantly improves Claude's effectiveness. Here's an example for a React project:

# Project: React Dashboard

## Commands
- npm run dev: Start development server
- npm run test: Run Jest tests
- npm run lint: Run ESLint
- npm run build: Production build

## Code Style
- Use functional components with hooks, never class components
- Use TypeScript strict mode
- Prefer named exports over default exports
- Use 2-space indentation

## Architecture
- Components in src/components/
- Hooks in src/hooks/
- API calls in src/services/
- State management with Zustand in src/stores/

## Testing
- Write tests for all new components
- Use React Testing Library, not Enzyme
- Run tests before committing

💡 Tip: Keep CLAUDE.md concise — aim for under 200 lines. Long files consume context and reduce instruction adherence. Only include information Claude can't infer from your code.

Auto Memory Feature

Auto Memory lets Claude accumulate knowledge across sessions without you writing anything. As Claude works, it saves notes for itself: build commands, debugging insights, architecture notes, and workflow habits.

Auto Memory is enabled by default and stores files in ~/.claude/projects/<project>/memory/.

# View and manage memory
/memory

# Toggle auto memory on/off
/memory  # Then use the toggle option

# Tell Claude to remember something
remember that the API tests require a local Redis instance

The first 200 lines of MEMORY.md are loaded at the start of every conversation. Claude keeps it concise by moving detailed notes into separate topic files.

Project Rules with `.claude/rules/`

For larger projects, organize instructions into topic-specific files in .claude/rules/. These rules can even be scoped to specific file types, giving you fine-grained control over Claude's behavior across different parts of your codebase.

Tips When Working With Claude Code

Most developers waste tokens in Claude Code without even realizing it 🙂

The #1 reason? Vague prompts that force Claude to read files it doesn't need.

Here's what I learned after using Claude Code for months without hitting my usage limit once 👇

🎯 Be Specific, Not Lengthy

A long prompt isn't a good prompt. A specific prompt is.

❌ "fix the login bug"

✅ "fix the bug where users see a blank screen after entering wrong credentials in LoginForm.tsx"

The second prompt tells Claude exactly where to look. It reads fewer files, uses fewer tokens, and gives a better fix — first try.

📌 Reference Files Directly with `@`

Instead of describing what a file does, just write @src/components/Header.tsx.

Claude reads it immediately without scanning your entire codebase. Huge token saver.

✅ Always Give Claude a Way to Verify

"Fix the infinite loop in SearchBar" leaves Claude guessing if it worked.

"Fix the infinite loop in SearchBar and run npm test" gives Claude a way to confirm.

Verification = fewer back-and-forth messages = fewer tokens used.

🔄 Clear Context Between Unrelated Tasks

One long session mixing different tasks is the fastest way to degrade Claude's output quality and burn tokens. Use /clear between tasks.

Fresh context = sharper responses.

🧠 Break Complex Tasks into Steps

Instead of dumping a 10-requirement prompt, break it down:

Create the component structure
Add TypeScript types
Add loading and error states
Write tests

Claude tracks progress better, and you stay in control.

Check out the video below, where I have created a multi-step form using a single prompt mentioned in the guide.

And There's So Much More to Explore...

This guide has only scratched the surface. The full guide covers many more powerful topics to take your Claude Code skills to the next level:

6. Common Workflows for React Developers

Building React Components with natural language prompts
Debugging React Applications end-to-end
Writing Tests automatically with Claude
Refactoring legacy code and class components

7. Advanced Features

Plan Mode for safely tackling complex, multi-step tasks
Subagents to parallelize work across your codebase
MCP (Model Context Protocol) to connect Claude to external services
Hooks and Skills for customizing Claude's behavior

8. Best Practices & Tips

Effective prompting techniques for better results
Managing context efficiently across long sessions
Common mistakes to avoid as a beginner

9. VS Code Integration

Installing and configuring the VS Code extension
Working with code selections and inline editing
Keyboard shortcuts for a faster workflow

10. Building a Complete React App

Full project setup from scratch
Creating data models, components, and custom hooks
Testing and debugging with Claude alongside you

11. CI/CD Integration

GitHub Actions and GitLab CI/CD integration
Automated PR creation and scheduled tasks

12–16. More Advanced Topics

API & Backend — React Query, authentication flows, custom data-fetching hooks
State Management — Zustand, Redux Toolkit, React Context, and state migration
Performance Optimization — Memoization, code splitting, virtual lists, and image optimization
Troubleshooting — Installation issues, auth problems, context window gotchas
Quick Reference & Cheat Sheet — Essential commands, shortcuts, and common React prompts

📖 To learn more and dive deep into all these topics, check out the Getting Started With Claude Code Guide — the complete resource for React developers looking to supercharge their workflow with Claude Code.

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/

I Built a Multi-Vendor Appointment Booking App

Yogesh Chavan — Tue, 24 Mar 2026 08:13:27 +0000

Appointment booking is a problem that looks simple on the surface — pick a time, confirm, done.

But once you start building it for real businesses, the complexity piles up fast: multiple staff members with different schedules, services with buffer times, conflict detection, client history, revenue analytics, role-based access, and more.

I wanted to build something production-grade that could be used for any service-based business — a salon, Clinis, a fitness studio, Consultants, Spas & Wellness, and have it work without hacks.

This is BookFlow.

Check out the application demo below.

What Is BookFlow?

BookFlow is a multi-tenant appointment booking platform. Businesses sign up, configure their services and staff, and get a public booking link they can share with clients.

Clients can book appointments without an account and receive a booking confirmation email. Staff manage their schedules. Admins see the full picture.

It's not just a booking form — it's a full business operations tool.

Key Features

🏢 Multi-Vendor Architecture

Each business gets their own isolated workspace, branding, and booking URL. One platform, infinite businesses.

👥 Staff Orchestration

Assign services to team members, manage availability across locations, and balance workloads effortlessly.

📊 Revenue Analytics Dashboard

Real-time dashboards with revenue tracking, service breakdowns, and actionable growth insights.

🔔 Smart Notifications

Automated confirmations that keep clients engaged and informed.

🚫 No Booking Overlaps

Intelligent conflict detection prevents double-bookings. Staff availability is automatically blocked once a slot is taken, ensuring clients can only book truly open time slots.

🔒 Enterprise Security

Role-based access control so every team member sees only what they should.

📅 Calendar View

Visualize your entire schedule in daily, weekly, and monthly views. Manage bookings without losing context.

🎨 Custom Branding

Each vendor can upload their logo and set a theme color for a personalized booking experience.

⚡ Frictionless Onboarding

Get your business live in minutes with a guided setup flow. No card required to start.

🌐 Public Booking Pages

Every business gets a clean, shareable booking URL that clients can use directly.

📱 Responsive Design

Works beautifully on desktop and mobile for both business owners and their clients.

🏥 Perfect For

🏥 Clinics · ✂️ Salons · 💼 Consultants · 🏋️ Fitness Studios · 💆 Spas & Wellness · and any appointment-based business.

Few Application Demo Screenshots

For Clients: A Simple Booking Flow

The client-facing side is intentionally minimal. Every organization gets a public URL at /book/[slug]. Clients land there and:

Pick a service (with duration, price, and assigned staff shown upfront)
Choose a date and available time slot
Select a staff member (if multiple are available)
Enter their contact details
Confirm the booking

Available time slots are generated dynamically based on service duration, staff availability for that day, existing bookings, and configurable buffer times between appointments. Double-booking the same staff member is prevented at the database level.

No account required. No friction.

For Staff: A Focused Workspace

Staff members log in and see their own schedule. They can:

View and manage their assigned bookings
See their calendar (daily, weekly, monthly views)
Update booking and payment statuses
Manage their profile and availability

They don't have access to settings, billing, or other staff members' data. The permission model is intentionally narrow here — staff should see what's relevant to them, nothing more.

For Admins: Full Business Control

Organization admins (business owners) get the full picture:

Dashboard — Revenue metrics, booking trends, today's schedule, and a breakdown of revenue by service. The charts are built with Recharts and use loading skeletons so the page doesn't feel janky while data loads.

Bookings — A filterable, searchable list of all appointments with status badges (pending, confirmed, completed, cancelled, no-show) and payment statuses (pending, paid, refunded).

Calendar — A multi-view calendar where you can filter by staff and see color-coded services. Clicking an event shows full booking details.

Services — Create and manage services with custom duration, pricing, buffer time between appointments, color coding, and staff assignments.

Staff — Add team members, configure their weekly availability per day, and assign which services they offer.

Clients — A directory of everyone who has booked, with total booking count, total spent, and last visit date.

Settings — Working hours per day of week, booking policies (minimum advance time, cancellation window), currency, and admin user management.

Organization — Custom slug, logo, theme color, description, and industry.

For Superadmins: Platform Oversight

There's a superadmin layer above individual organizations. From there you can:

View all organizations on the platform
Create new organizations manually
Review and approve/reject onboarding requests from businesses wanting to join
Provide rejection reasons so applicants know what to fix

The onboarding flow supports two plan tiers (Professional and Enterprise). However, you don't need to pay up front while sending onboarding request.

Tech Stack

Layer	Technology
Framework	Next.js (App Router)
Language	TypeScript
Styling	Tailwind CSS + Radix UI
Database	PostgreSQL via Neon (serverless)
ORM	Drizzle ORM
Auth	Better Auth (email/password)
Email	Resend
File Storage	Cloudinary
Data Fetching	TanStack Query (React Query v5)
Forms	React Hook Form + Zod v4
Charts	Recharts

Check out the complete application 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/

Drop a comment or feel free to reach out to me to learn more about this application.

I Built a Digital Products Marketplace using Next.js for Sellers and Buyers

Yogesh Chavan — Sun, 15 Mar 2026 06:35:19 +0000

The digital economy is booming, and creators need a reliable, elegant platform to sell their work. DigiMart is a full-featured digital products marketplace built with the latest web technologies — designed to connect creators with customers seamlessly, securely, and beautifully.

Whether you're a developer selling source code, a designer offering UI kits, or an author publishing eBooks, DigiMart gives you everything you need to grow your digital business.

Check out the complete demo of the application below.

Here's a Live Demo of the application.

What Is DigiMart?

DigiMart is a marketplace where creators can upload, manage, and sell digital products — and buyers can discover, purchase, and download them instantly. It supports a wide range of product categories:

eBooks — educational guides, tutorials, and written content
Templates — ready-to-use project starters and document templates
Source Code — scripts, plugins, full applications, and more
UI Kits — component libraries and design systems
Design Assets — icons, illustrations, graphics, and visual resources

For Buyers: A Frictionless Shopping Experience

Finding and purchasing digital products on DigiMart is fast and intuitive.

Advanced Filtering — narrow results by category, price range, and sort order (newest, top rated, price low-to-high)
Active Filter Badges — see what filters are active and remove them in one click
Real Reviews and Ratings — make informed decisions with community-driven feedback
Secure Payments — powered by DodoPayments for a reliable checkout experience. Can be easily swapped with Stripe/Polar or other payment integration.
Instant Downloads — access your purchases immediately with lifetime download access
Purchase History — revisit and re-download anything you've bought, anytime

For Creators: A Powerful Seller Dashboard

DigiMart gives creators full control over their digital products and storefronts.

Product Uploads — list products with titles, descriptions, images, and downloadable files via Cloudinary.
Status Tracking — products go through a moderated pipeline: pending → approved, with clear feedback if rejected
Edit Anytime — update your listings and keep them fresh
Deletion Requests — request removal with a reason; admins handle it smoothly
Rejection Reasons — if a product doesn't pass review, you'll know exactly why

For Admins: Full Marketplace Oversight

Admins keep the marketplace healthy and high-quality with a dedicated admin panel:

Approve or Reject pending product submissions with optional feedback
Handle Deletion Requests from creators, with full context on their reasons
Tabbed Interface — separate workflows for product approvals and deletion management
Notification System — a bell icon with live count keeps admins aware of pending actions

Built With Modern Technology

DigiMart is engineered on a solid, production-grade tech stack:

Layer	Technology
Framework	Next.js (App Router) + React 19
Styling	Tailwind CSS v4 + shadcn/ui
Database	PostgreSQL via Neon (serverless)
ORM	Drizzle ORM
Auth	Better Auth (Google, GitHub)
Payments	DodoPayments
File Storage	Cloudinary
Data Fetching	TanStack Query(React Query)
Forms	React Hook Form + Zod
Language	TypeScript

A UI Worth Talking About

DigiMart doesn't just work well — it looks stunning.

Gradient Hero Section with animated floating product cards and decorative orbs
Skeleton Loading Screens with shimmer animations for perceived performance
Responsive Layout — a fully fluid experience from mobile to widescreen
Category Icons — color-coded visual language for quick product identification
Confetti Celebrations — delightful feedback on purchase completion

Secure and Scalable by Design

Security and performance are built in, not bolted on:

Role-Based Access Control — buyers, sellers, and admins each see only what they should
Protected Routes — authentication-gated pages with seamless redirect flows
Serverless PostgreSQL — scalable, low-latency database with Neon
Optimized Images — Next.js Image component with Cloudinary transformations
SEO Ready — Open Graph and Twitter metadata on every product page

Why DigiMart?

There are plenty of places to sell digital products online. DigiMart stands apart because it's built by developers, for creators — with a focus on quality, simplicity, and trust.

No clutter. No distractions. Just great products.
A curated catalog, moderated for quality before anything goes live.
A creator-first experience with transparent workflows and real feedback.
A buyer-first UX that makes discovery and checkout feel effortless.

Get Started Today

Whether you're looking to buy your next toolkit or sell your creative work to thousands of potential customers, DigiMart is the platform built for you.

Join a growing community of digital creators and forward-thinking buyers. Your next great product is just a click away.

DigiMart — Built for creators. Loved by buyers.

Drop a comment or feel free to reach out to me to learn more about this application.

Yogesh Chavan

Mar 1

Transform Your Markdown into Professional PDFs in Seconds with PDFMaker

#react #nextjs #javascript

Comments 2

3 min read

About Me

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

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, focusing on practical, production-ready skills.

Also, created various courses with 3000+ students enrolled in these courses.

My Portfolio: https://yogeshchavan.dev/

DEV Community: Yogesh Chavan

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

The idea is simple

How it works

Who's actually using this

A few things I'm proud of

Generated Sample Photos

Try it yourself

About Me

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

📅 Dates & Timings

What You'll Build

📌 Day-by-Day Breakdown

🔥 Day 1 — React Fundamentals (Frontend)

🔥 Day 2 — Backend + Integration + Deployment

🎯 Who Is This For?

✅ Why This Webinar Is Different

⚠️ Limited Seats — Register Now

About Me

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

What it actually does

The customization is real

Presets so you don't start from scratch

Collage builder

Collection pages

No account required to start

Try it out!

About Me

Beginner's Guide to Docker: From Zero to Hero

What is Docker?

Why Use Docker?

Containers vs. Virtual Machines

Core Docker Concepts

How Docker Works

Installing Docker

macOS and Windows

Linux (Ubuntu/Debian)

Verifying the Installation

Running Your First Container

Docker Images

Pulling Images from Docker Hub

Listing and Removing Images

Fixing the "Image Is Being Used" Error

Image Tags and Versions

Image Layers Explained

Working with Containers

Starting Containers (docker run)

Detached Mode and Naming

Stopping, Starting, Restarting

Removing Containers

Executing Commands Inside a Container

Viewing Logs

Inspecting Containers

Writing Dockerfiles

Anatomy of a Dockerfile

Common Instructions

Your First Dockerfile: A Node.js App

About Me

React 18: A Complete Guide to Every New Feature

Table of Contents

1. Concurrent Rendering

Blocking vs. Concurrent Rendering

How It Works

2. New Root API — createRoot

Before (React 17)

After (React 18)

hydrateRoot for SSR

3. Automatic Batching

React 17 — Inconsistent Batching

React 18 — Automatic Batching Everywhere

Opting Out with flushSync

4. startTransition and useTransition

startTransition — The Standalone Function

useTransition — With a Pending State

Real-World Example: Live Search Over a Large List

5. useDeferredValue

useTransition vs. useDeferredValue

6. Suspense Improvements

Nested Suspense Boundaries

SuspenseList — Coordinating Loading Order