DEV Community: Yogesh Chavan

🚀 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.

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/

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/

I Built a Real Estate Marketplace with Admin Functionality — Here's How It Works

Yogesh Chavan — Sun, 08 Mar 2026 05:52:22 +0000

There's a gap between "we need a property listing platform" and actually having one. Most businesses either end up with a generic website that doesn't do much or they spend months and a significant budget getting something custom-built.

So I built a full real estate marketplace from scratch, including an admin dashboard.

Here's a walkthrough of what it does and how it's put together.

Check out the complete demo of the application below.

🔑 Key Features

Browse, search & filter property listings
Browse rent only and sale only properties
Property detail pages with full info, images, map
Admin Dashboard — manage property listings with approve/reject functionality
Secure role-based access (User vs Admin)
Fully responsive across all devices

🛠️ Tech Stack and Why

	Technology	Role
⚛️	Next.js 16 (App Router)	Blazing-fast performance & SEO
🎨	Tailwind CSS	Clean, modern & responsive UI
🐘	PostgreSQL (via Neon.com)	Scalable cloud database
🌇	Cloudinary	Storing & serving property images
📧	Resend	Transactional email delivery

Next.js 16 with the App Router

The App Router model in Next.js 16 makes it natural to mix server and client components. Property listing pages are server-rendered — fast initial load, good for SEO, no extra API call needed. Interactive parts like filters and search are client components. The result is a snappy experience without over-engineering.

Tailwind CSS

Nothing unusual here — Tailwind keeps the styling consistent and the responsive behaviour predictable across screen sizes without a lot of custom CSS.

PostgreSQL via Neon.com

Real estate data is relational by nature. Properties have types, locations, price ranges, availability status, and relationships to agents or owners. PostgreSQL handles all of that cleanly with proper constraints and joins. Neon's serverless setup pairs well with Next.js on Vercel and scales without needing to manage server infrastructure.

Cloudinary

Images are stored in Cloudinary. They handle image uploads, storage, and optimized delivery — images are automatically resized and compressed for the web without any manual work, which keeps page loads fast regardless of what gets uploaded.

Resend

Email is a surprisingly important part of a marketplace — notifying agents about new enquiries. Resend handles all transactional emails reliably with a clean API that integrates naturally into a Next.js backend.

The entire application is fully customizable to extend with new features.

Who This Kind of Application Works For

A platform like this fits naturally for real estate agencies wanting to manage their own listings, property developers showcasing new builds, rental businesses that need a self-managed portal, or entrepreneurs looking to launch a niche property marketplace.

The codebase is clean and straightforward to extend.

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.

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

My Portfolio: https://yogeshchavan.dev/

Transform Your Markdown into Professional PDFs in Seconds with PDFMaker

Yogesh Chavan — Sun, 01 Mar 2026 03:59:37 +0000

If you work with Markdown, you know the struggle: it's great for writing, but turning it into a polished, professional PDF usually involves a clunky mix of browser "Print to PDF" tricks, CSS hacks, or complex command-line tools.

Also, you don't get a nicely formatted PDF.

That's why I built PDFMaker, a streamlined, web-based tool designed to bridge the gap between simple text and high-quality PDF document exports.

What PDFMaker Actually Does

PDFMaker lets you paste or write your Markdown and see a live, styled preview update in real time, and export to PDF in the exact same styling you chose.

You get full control over the things that actually make a document look professional and styled.

You can fully customize the PDF content's look and feel.

Typography
Spacing & padding
Code block styling
Background colors & visual hierarchy
Line height & rhythm

Every style you set can be saved as a preset. Open a new Markdown file tomorrow, apply your preset in one click, and export. Done.

See It in Action

Watch how quickly you can transform your workflow:

Overview & Features

Get a quick look at the interface and how easy it is to go from raw Markdown to a finished PDF.

Custom Styling & Presets

Learn how to apply different themes and presets to give your documents a unique, professional look.

Syntax Highlighting for Technical Articles

For developers, maintaining code readability is crucial. PDFMaker preserves syntax highlighting so your technical guides look as good as your code.

Why This Matters Right Now

The way people share knowledge is changing. Developers write docs. Researchers write reports. Everyone is producing written content, and the bar for what looks "professional" keeps rising.

A PDF that looks like it was thrown together signals exactly that. A PDF that looks intentional, readable, and well-designed signals something else entirely: that you care about your work.

PDFMaker is the fastest path from "I wrote this in Markdown" to "this looks like I hired a designer." And unlike hiring a designer, it takes seconds.

Who Should Be Using This Today

If any of these sound familiar, you're leaving quality on the table by not using it:

You write technical documentation and want code examples to actually look good
You produce client-facing reports and want them to reflect your brand
You publish tutorials or guides and want readers to take them seriously
You're tired of fighting with CSS just to make a PDF look decent

Do check out the launch on Peerlist and upvote it⚡️

You can try it for free at PDFMaker

The gap between "I wrote it" and "it looks like it was professionally published" has never been smaller. That's worth acting on.

Holi Special Biggest Discount Offer

Get All My 30+ Current + Future Courses, Ebooks, Webinars At Just $12 / ₹1020. Regular Price: $236 / ₹20,060. Limited-time offer.

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.

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

My Portfolio: https://yogeshchavan.dev/

How I Achieved 100/100 on Lighthouse Score For My Portfolio Site

Yogesh Chavan — Thu, 19 Feb 2026 10:52:49 +0000

Optimizing a Next.js site isn't just about making it feel fast, it's about proving it with a perfect (or near-perfect) Lighthouse score.

Yesterday, I gave my portfolio site a fresh new look. I also made several key changes that really boosted the site's metrics.

Performance Results

Here's how the site performed after the changes I made:

Desktop Performance Score

Mobile Performance Score

Here's a breakdown of what I did, why it mattered, and how you can do the same for your own sites.

1. Ditching Scroll Events for Intersection Observer

Most of us use a scroll listener to change the navbar background when someone scrolls down. The problem? Scroll events fire constantly and can make the page feel "janky" because they hog the main thread.

I replaced my scroll listener with the Intersection Observer API. I placed a tiny hidden "sentinel" element at the very top of the page. Now, I just observe when that sentinel leaves the screen to toggle the navbar style.

It's asynchronous and way more efficient. It keeps the main thread free, which helps with your Total Blocking Time (TBT) and makes scrolling feel buttery smooth.

// components/Navbar.tsx
useEffect(() => {
  const sentinel = document.getElementById("scroll-sentinel");
  const observer = new IntersectionObserver(
    ([entry]) => setScrolled(!entry.isIntersecting),
    { threshold: 0 }
  );
  if (sentinel) observer.observe(sentinel);
  return () => observer.disconnect();
}, []);

2. Fixing the LCP Animation Trap

Largest Contentful Paint (LCP) measures how long it takes for your biggest content (usually the hero title) to show up. I was using a "reveal" animation on my main heading that started at opacity: 0.

Even a 100ms animation delay counts against your score. I removed the initial hidden state and the animation from the main title so that it's visible the moment the page loads. It might look slightly less "fancy," but the performance win is worth it.

// Before (slowed down LCP)
<h1 className="reveal opacity-0">Hi, I'm Yogesh</h1>

// After (instant visibility)
<h1>Hi, I'm Yogesh</h1>

3. Cleaning Up "Monolithic" Constants

I used to have one giant constants.ts file that exported all the constants like projects, courses, skills, etc. This meant every single page was downloading all that data, even if it only needed a tiny bit of it.

I split that giant file into smaller modules like projects.ts, courses.ts, skills.ts, etc. Now, components only grab exactly what they need. Think of it like a suitcase: you don't need to pack your winter coat for a beach trip. Keep the initial bundle small!

// app/constants/projects.ts
export const projects = [...];

// In components/Projects.tsx
import { projects } from "@/app/constants/projects";

// app/constants/skills.ts
export const skills = [...];

// In components/skills.tsx
import { skills } from "@/app/constants/skills";

4. Smart Loading with the PRPL Pattern

The PRPL pattern (Push, Render, Pre-cache, Lazy-load) is basically a fancy way of saying "load things only when you need them and keep them around for later."

I used dynamic imports for everything below the fold (like the Contact or Experience sections).

import dynamic from "next/dynamic";

const Contact = dynamic(() => import("@/components/Contact"));

I also added aggressive caching headers in next.config.ts. This combination means the first load is lean, and repeat visits are nearly instant because the browser already has the files.

// next.config.ts (PRPL Caching)
async headers() {
  return [
    {
      // Public images cached for 30 days with stale-while-revalidate
      source: "/images/:path*",
      headers: [
        {
          key: "Cache-Control",
          value: "public, max-age=2592000, stale-while-revalidate=86400",
        },
      ],
    },
  ];
}

5. Targeting Modern Browsers (ES2022)

By default, some tools target older versions of JavaScript to support ancient browsers. But most of us don't really need to support IE11 anymore.

I updated my tsconfig.json to target ES2022, instead of previous ES2017. Since modern browsers support this natively, TypeScript doesn't have to write extra "workaround" code. This results in cleaner, smaller files that the browser can execute much faster.

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    ...
  }
}

6. Cutting Out "Legacy" JavaScript

Similar to the step above, I updated my browserslist in package.json to tell the build tool exactly which browsers I care about. This allows Next.js to skip adding polyfills for features that my target browsers already have. It's an easy way to trim the fat from your JavaScript bundles.

"browserslist": [
  "defaults",
  "maintained node versions"
]

defaults means: Last 2 versions of each major browser and Not dead browsers.

So it excludes: IE 11 and Very old browsers

7. Letting Next.js Handle Images

Standard <img> tags are a headache for performance. They don't resize or compress themselves automatically.

I used the Next.js <Image /> component everywhere. It handles WebP conversion, lazy loading, and prevents layout shifts by making you define dimensions.

Using <Image /> component also loads images of different sizes based on the viewport size, so smaller images are loaded for smaller screens, and larger images for larger screens, making the site load faster.

It's truly one of the lowest-effort, highest-reward changes you can make.

import Image from 'next/image';

<Image 
  src="/hero.webp" 
  alt="Hero" 
  width={800} 
  height={600} 
  priority // Use this for top-of-page images!
/>

8. Making the Site Usable for Everyone

A high performance score is great, but accessibility is just as important. I added proper ARIA labels to my mobile menu buttons and wrapped the content in a <main> tag.

<button
 ...
 aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
>
...
</>

Lighthouse rewards you for this, but more importantly, it makes your site actually usable for people using screen readers. It's just good practice.

9. Production-Ready Config Tweaks

I made two small but effective changes in next.config.ts: I enabled gzip compression and told the compiler to strip out all console.log statements in production. Cleaner code, smaller files, faster site.

// next.config.ts
const nextConfig = {
  compress: true,
  compiler: {
    removeConsole: process.env.NODE_ENV === "production",
  },
};

10. Pre-warming Connections

Every time your site links to another domain (like a course platform), or you include links for your external projects, courses, or any other external resources, the browser has to do some prep work to connect.

I added preconnect and dns-prefetch tags for my critical external links. I made sure to keep it under 4 preconnects, though, because too many can actually backfire and reduces your lighthouse score.

This little head start makes external links feel much snappier.

// app/layout.tsx
<head>
  <link rel="preconnect" href="https://courses.yogeshchavan.dev" />
  <link rel="dns-prefetch" href="https://www.codementor.io" />
  <link rel="dns-prefetch" href="https://www.freecodecamp.org" />
  <link rel="dns-prefetch" href="https://dev.to" />
  <link rel="dns-prefetch" href="https://medium.com" />
</head>

Hopefully, some of these tips help you squeeze a bit more speed out of your own Next.js projects! Happy coding!

A Quick Tip for Testing Performance

When testing your site's performance, I'd recommend using PageSpeed Insights (pagespeed.web.dev) instead of Chrome DevTools Lighthouse tool.

Reason: Browser extensions and injected scripts can interfere with the results, often giving you inaccurate scores. PageSpeed Insights runs tests on Google's servers, so you get clean, reliable metrics every time.

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.

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

My Portfolio: https://yogeshchavan.dev/

Beginner's Guide To TypeScript + React Integration

Yogesh Chavan — Tue, 17 Feb 2026 05:18:47 +0000

Introduction to TypeScript

What is TypeScript?

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. Developed and maintained by Microsoft, TypeScript adds optional static typing and class-based object-oriented programming to JavaScript. Since TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

TypeScript code cannot run directly in browsers or Node.js - it must first be compiled (transpiled) to JavaScript. This compilation step is where TypeScript catches type errors, helping you find bugs before your code runs.

Why TypeScript over JavaScript?

While JavaScript is powerful and flexible, it has limitations when building large-scale applications. TypeScript addresses these limitations:

Static Type Checking - Catch errors at compile time rather than runtime
Better IDE Support - Enhanced autocompletion, navigation, and refactoring
Improved Code Readability - Type annotations serve as documentation
Enhanced Refactoring - Safely rename symbols and restructure code
Latest ECMAScript Features - Use modern features with backward compatibility

TypeScript vs JavaScript

Feature	JavaScript	TypeScript
Type System	Dynamic typing	Static typing (optional)
Compilation	Interpreted directly	Compiles to JavaScript
Error Detection	Runtime errors	Compile-time errors
IDE Support	Basic	Enhanced (IntelliSense)
Interfaces	Not supported	Fully supported
Generics	Not supported	Fully supported

Installing TypeScript

Step 1: Install Node.js

Before using TypeScript, you need Node.js installed on your machine. Follow these steps:

Visit the official Node.js website: https://nodejs.org
Download the LTS (Long Term Support) version for your operating system
Run the installer and follow the installation wizard
Verify the installation by opening a terminal and running:

node --version
# Should output: v20.x.x or higher

npm --version
# Should output: 10.x.x or higher

Step 2: Install TypeScript Globally

Once Node.js is installed, you can install TypeScript globally using npm:

npm install -g typescript

Step 3: Verify TypeScript Installation

tsc --version
# Should output: Version 5.x.x

Tip: You can also install TypeScript locally in a project using npm install typescript --save-dev. This is recommended for projects to ensure consistent versions across team members.

Setting up TypeScript with Node.js

To set up a new TypeScript project, create a directory and initialize it:

mkdir my-typescript-project
cd my-typescript-project
npm init -y
npm install typescript --save-dev

Create a TypeScript configuration file (tsconfig.json):

npx tsc --init

Here's a recommended configuration for beginners:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Your First TypeScript Program

Create a file called hello.ts in your src folder:

// src/hello.ts
function greet(name: string): string {
  return "Hello, " + name + "!";
}

const message: string = greet("TypeScript");
console.log(message);

Notice the type annotations: name: string specifies the parameter type, and : string after the parentheses specifies the return type.

Understanding the Compilation Process

TypeScript must be compiled to JavaScript before it can run:

# Compile a single file
tsc src/hello.ts

# Compile using tsconfig.json
tsc

# Watch mode - recompile on changes
tsc --watch

When you run the tsc command (or tsc --watch for continuous compilation), TypeScript creates a new dist folder containing the compiled JavaScript files. You'll see your hello.ts file transformed into hello.js with all type annotations removed:

// dist/hello.js (compiled output)
"use strict";
function greet(name) {
  return 'Hello, ' + name + '!';
}
const message = greet('TypeScript');
console.log(message);

Here's what the project structure looks like in VS Code after compilation:

Note: All type annotations are removed during compilation. Types only exist at development and compile time - they help catch errors but don't affect runtime behavior.

Running the Compiled Code

Now that your TypeScript code has been compiled to JavaScript, you can run it using Node.js. Execute the compiled JavaScript file from the dist folder:

# Run the compiled JavaScript file
node dist/hello.js

You should see the following output in your terminal:

Hello, TypeScript!

Congratulations! You've successfully written, compiled, and executed your first TypeScript program. The workflow is: write .ts files → compile with tsc → run the output .js files with node.

Tip: You can also use ts-node to run TypeScript files directly without manual compilation: npm install -g ts-node, then run ts-node src/hello.ts. This is useful during development.

TypeScript Basics

Basic Types (string, number, boolean)

TypeScript provides several basic types that form the foundation of the type system:

// String type
let firstName: string = "John";
let lastName: string = 'Doe';

// Number type (includes integers and floats)
let age: number = 30;
let price: number = 99.99;
let hex: number = 0xf00d;

// Boolean type
let isActive: boolean = true;
let isCompleted: boolean = false;

Type Inference

TypeScript can automatically infer types based on assigned values:

// TypeScript infers the type automatically
let name = "Alice";    // inferred as string
let count = 42;        // inferred as number
let isValid = true;    // inferred as boolean

// Type is locked after inference
name = "Bob";   // OK
name = 123;     // Error: Type 'number' is not assignable to type 'string'

Best Practice: Use explicit types when the initial value doesn't clearly indicate the intended type, or when declaring variables without immediate initialization.

Arrays and Tuples

TypeScript provides two ways to define arrays, and introduces tuples for fixed-length arrays:

// Arrays - two syntax options
let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["Alice", "Bob", "Charlie"];

// Mixed arrays
let mixed: (string | number)[] = [1, "two", 3];

// Tuples - fixed length with specific types
let person: [string, number] = ["Alice", 30];
let coordinate: [number, number, number] = [10, 20, 30];

// Accessing tuple elements
console.log(person[0]);  // "Alice" (string)
console.log(person[1]);  // 30 (number)

Enums

Enums define a set of named constants, making code more readable:

// Numeric enum (auto-increments from 0)
enum Direction {
  Up,     // 0
  Down,   // 1
  Left,   // 2
  Right   // 3
}

// Numeric enum with custom values
enum StatusCode {
  OK = 200,
  BadRequest = 400,
  NotFound = 404,
  ServerError = 500
}

// String enum
enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

// Using enums
let direction: Direction = Direction.Up;
let status: StatusCode = StatusCode.OK;

Using 'as const' Instead of Enums

While enums are useful, modern TypeScript development often favors using as const assertions instead. The as const assertion tells TypeScript to infer the most specific type possible, making values readonly and literal types.

Why use 'as const' over enums?

Tree-shaking friendly - Regular objects with 'as const' can be tree-shaken by bundlers, while enums cannot
No runtime overhead - 'as const' objects don't generate extra JavaScript code like enums do
Better type inference - Works seamlessly with TypeScript's type system
Simpler JavaScript output - The compiled code is just a plain object

// Using 'as const' instead of enums
const Direction = {
  Up: "UP",
  Down: "DOWN",
  Left: "LEFT",
  Right: "RIGHT"
} as const;

// Create a type from the object values
type Direction = typeof Direction[keyof typeof Direction];
// Type is: "UP" | "DOWN" | "LEFT" | "RIGHT"

// Usage
let move: Direction = Direction.Up;  // OK
move = "UP";                          // Also OK
move = "DIAGONAL";                    // Error!

// Another example with status codes
const StatusCode = {
  OK: 200,
  BadRequest: 400,
  NotFound: 404,
  ServerError: 500
} as const;

type StatusCode = typeof StatusCode[keyof typeof StatusCode];
// Type is: 200 | 400 | 404 | 500

Best Practice: For new projects, prefer 'as const' objects over enums. They provide the same benefits with better bundle size and simpler JavaScript output. Use enums only when you need reverse mapping (numeric enums) or when working with legacy codebases.

any, unknown, and never

TypeScript provides special types for handling dynamic values:

// any - opts out of type checking (avoid when possible)
let flexible: any = 4;
flexible = "string";    // OK
flexible = true;        // OK
flexible.anything();    // OK (but risky!)

// unknown - type-safe alternative to any
let uncertain: unknown = 4;
uncertain = "string";   // OK

// Must check type before using
if (typeof uncertain === "string") {
  console.log(uncertain.toUpperCase());  // OK
}

// never - represents values that never occur
function throwError(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {}
}

Tip: Prefer 'unknown' over 'any' when you don't know the type. It forces type checking before use, making your code safer.

void Type

The void type represents the absence of a return value:

// Function that doesn't return anything
function logMessage(message: string): void {
  console.log(message);
}

// Arrow function with void return
const printNumber = (num: number): void => {
  console.log(num);
};

Type Assertions

Type assertions tell TypeScript you know more about a value's type:

// Two syntax options
let someValue: unknown = "Hello, TypeScript!";

// Angle-bracket syntax
let strLength1: number = (<string>someValue).length;

// "as" syntax (required in React - JSX)
let strLength2: number = (someValue as string).length;

// Working with DOM elements
const input = document.getElementById("myInput") as HTMLInputElement;
input.value = "Hello!";

// Non-null assertion
function getValue(arr: number[], index: number): number {
  return arr[index]!;  // Assert it won't be undefined
}

The ! operator is called the non-null assertion operator. It tells TypeScript that you are certain the value will not be null or undefined, even though TypeScript thinks it might be. In the example above, arr[index] could potentially be undefined if the index is out of bounds, but using ! tells TypeScript "trust me, this value exists."

// More examples of non-null assertion (!)
const button = document.getElementById("submit")!;
// Without !, TypeScript thinks button could be null

// Use when you're certain a value exists
interface User {
  name: string;
  email?: string;  // optional property
}

function sendEmail(user: User) {
  // We checked elsewhere that email exists
  const email = user.email!;  // Assert it's not undefined
  console.log("Sending to:", email);
}

Warning: Use the non-null assertion (!) sparingly. It bypasses TypeScript's null checks, so incorrect usage can lead to runtime errors. Prefer proper null checks (if statements or optional chaining ?.) when possible.

Literal Types

Literal types specify exact values a variable can hold:

// String literal types
type Direction = "north" | "south" | "east" | "west";
let heading: Direction = "north";  // OK
heading = "northeast";             // Error!

// Numeric literal types
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
let roll: DiceRoll = 4;  // OK
roll = 7;                // Error!

// In function parameters
function move(direction: "up" | "down" | "left" | "right") {
  console.log(`Moving ${direction}`);
}

move("up");        // OK
move("diagonal");  // Error!

Functions in TypeScript

Function Type Annotations

TypeScript allows type annotations on function parameters and return values:

// Basic function with types
function add(a: number, b: number): number {
  return a + b;
}

// Function type as a variable
let multiply: (x: number, y: number) => number;
multiply = function(x, y) {
  return x * y;
};

// Type alias for function types
type MathOperation = (a: number, b: number) => number;

const subtract: MathOperation = (a, b) => a - b;
const divide: MathOperation = (a, b) => a / b;

// Function with object parameter
function printUser(user: { name: string; age: number }): void {
  console.log(`${user.name} is ${user.age} years old`);
}

What Happens When You Pass Wrong Types?

TypeScript catches type mismatches at compile time, preventing runtime errors before your code even runs:

// Calling functions with wrong types
add(5, 10);       // OK: returns 15
add("5", 10);     // Error: Argument of type 'string' is not
                  // assignable to parameter of type 'number'

multiply(3, 4);   // OK: returns 12
multiply(3, "4"); // Error: Argument of type 'string' is not
                  // assignable to parameter of type 'number'

subtract(10, 5);  // OK: returns 5
subtract(10);     // Error: Expected 2 arguments, but got 1

printUser({ name: "Alice", age: 30 });  // OK
printUser({ name: "Bob" });             // Error: Property 'age' is
                                        // missing in type '{ name: string; }'
printUser("Alice");                     // Error: Argument of type 'string'
                                        // is not assignable to parameter

Key Benefit: These errors appear in your IDE as you type and during compilation - not at runtime. This is one of TypeScript's biggest advantages: catching bugs before your code runs!

Optional & Default Parameters

Functions can have optional (?) and default parameter values:

// Optional parameters (must come after required)
function greet(name: string, greeting?: string): string {
  if (greeting) {
    return `${greeting}, ${name}!`;
  }
  return `Hello, ${name}!`;
}

greet("Alice");         // "Hello, Alice!"
greet("Bob", "Hi");     // "Hi, Bob!"

// Default parameters
function createUser(
  name: string,
  role: string = "user",
  active: boolean = true
) {
  return { name, role, active };
}

createUser("Alice");                 // default role & active
createUser("Bob", "admin");          // default active
createUser("Charlie", "mod", false); // all specified

Important: In TypeScript, every function parameter must have its type explicitly defined. Unlike JavaScript, you cannot leave parameters untyped. This requirement ensures type safety throughout your codebase and enables the compiler to catch type-related errors early in development.

// Every parameter needs a type annotation
function process(name: string, count: number, active: boolean) {
  // All parameters have explicit types
}

// This would cause an error in TypeScript:
// function process(name, count, active) { }
// Error: Parameter 'name' implicitly has an 'any' type

// Even callback parameters need types
function fetchData(callback: (data: string) => void) {
  callback("result");
}

Rest Parameters

Rest parameters accept any number of arguments as an array:

// Rest parameters with type annotation
function sum(...numbers: number[]): number {
  return numbers.reduce((total, n) => total + n, 0);
}

sum(1, 2);           // 3
sum(1, 2, 3, 4, 5);  // 15

// Rest with other parameters
function buildName(first: string, ...rest: string[]): string {
  return first + " " + rest.join(" ");
}

buildName("John", "Paul", "Smith");  // "John Paul Smith"

// Spread in function calls
const nums: number[] = [1, 2, 3];
sum(...nums);  // 6

Understanding Spread in Function Calls

The spread operator (...) allows you to expand an array into individual arguments when calling a function. This is the opposite of rest parameters - while rest parameters collect multiple arguments into an array, spread expands an array into separate arguments.

// Without spread - you'd have to pass each element manually
const numbers = [10, 20, 30];
sum(numbers[0], numbers[1], numbers[2]);  // 60 - tedious!

// With spread - the array is expanded into individual arguments
sum(...numbers);  // 60 - much cleaner!

// How it works:
// sum(...numbers) is equivalent to sum(10, 20, 30)

// Combining arrays with spread
const moreNumbers = [40, 50];
sum(...numbers, ...moreNumbers);  // 150

// Spread with Math functions
const values = [5, 10, 3, 8, 1];
Math.max(...values);  // 10
Math.min(...values);  // 1

// TypeScript ensures type safety with spread
const strings = ["a", "b", "c"];
sum(...strings);  // Error: Argument of type 'string' is not
                  // assignable to parameter of type 'number'

Tip: The spread operator is especially useful when working with arrays of unknown length, or when you want to pass array elements as individual function arguments without modifying the original function.

Function Overloading

Function overloading lets you define multiple signatures for one function:

// Overload signatures
function format(value: string): string;
function format(value: number): string;
function format(value: Date): string;

// Implementation
function format(value: string | number | Date): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  } else if (typeof value === "number") {
    return value.toFixed(2);
  } else {
    return value.toISOString();
  }
}

format("hello");      // "HELLO"
format(3.14159);      // "3.14"
format(new Date());   // "2024-01-15T...

Want to Learn More?

This article covers just the fundamentals of TypeScript from the TypeScript + React ebook. To master advanced topics like Generics, Advanced Types, Utility Types, and TypeScript with React Integration, check out the complete ebook:

📘 Beginner's Guide To TypeScript + React Integration - From TypeScript Basics to React Integration

More Such Useful Ebooks Are On The Way In Upcoming Weeks🔥

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.

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

My Portfolio: https://yogeshchavan.dev/

50 React Interview Coding Challenges

Yogesh Chavan — Thu, 12 Feb 2026 06:14:42 +0000

I've been teaching React for years, and here's what I've noticed:

Developers don't struggle with concepts.

They struggle with IDEAS.

"What should I build to practice?"

"Is this project good enough for my portfolio?"

"How do I go from beginner to advanced?"

And I've sat on both sides of the interview table more times than I can count. One pattern I've noticed: the gap between "knowing React" and "demonstrating React in an interview" is surprisingly wide.

You might understand hooks conceptually. You might have built production apps. But when someone asks you to build a Kanban board from scratch in 45 minutes while explaining your decisions out loud, that's a different skill entirely.

The Problem with Most Interview Prep

Most React interview resources fall into two camps:

Theoretical questions — "Explain the virtual DOM" or "What's the difference between useEffect and useLayoutEffect?" These test knowledge, not ability.

Toy problems — Simple counter apps or todo lists that don't reflect the complexity of real interview challenges.

Neither prepares you for what actually happens in technical interviews at companies building real products.

What Actually Gets Asked

After going through dozens of interview processes and conducting interviews myself, I started documenting the patterns. Real interview coding challenges tend to look like:

Build a weather dashboard that handles API calls, loading states, and error handling
Create a shopping cart with context or state management
Implement a file manager with drag-and-drop
Design a multi-step form with validation and persistence

These aren't trivial. They require you to demonstrate state management, component composition, performance awareness, and clean code — all while thinking out loud.

A Structured Approach

I put together a collection of 50 challenges organized by difficulty:

Beginner (20 challenges) — Focused on components, props, state, basic hooks, and localStorage. Things like task trackers, countdown timers, and image galleries. If you're newer to React or haven't interviewed in a while, start here.

Mid-Level (22 challenges) — Context API, custom hooks, API integration, performance optimization. This includes Kanban boards, chat interfaces, survey builders, and dashboard widgets. Most frontend interviews for mid-level roles pull from this category.

Advanced (8 challenges) — Redux Toolkit, React Router, complex state management. Full application architectures like e-commerce platforms, analytics dashboards, and collaborative document editors. These prepare you for senior roles where system design matters as much as implementation.

What Makes These Different

Each challenge includes specific requirements — not vague descriptions. For example, the E-Commerce Product Catalog challenge specifies:

Infinite scroll or pagination
Multiple simultaneous filters with visual indicators
Cart management with localStorage persistence
Product quick-view on hover
Related products section

This specificity matters. Interview challenges have requirements. Practicing with vague prompts doesn't build the skill of translating requirements into implementation decisions.

How I'd Use These

If I were preparing for interviews right now, here's my approach:

Week 1–2: Work through 5–6 beginner challenges, focusing on clean code and explaining decisions out loud (yes, talk while you code — it's awkward at first but essential for interviews).

Week 3–4: Move to mid-level challenges. Time yourself. Most interviews give 45–60 minutes, so practice building something functional within constraints.

Week 5+: For senior roles, work through advanced challenges focusing on architecture decisions, state management patterns, and performance considerations.

Don't just build them once. Revisit challenges after a few days and see if you can implement them faster or cleaner.

The Real Skill

Here's what I've learned from years of interviewing: technical interviews aren't really about whether you can build the thing. They're about how you build it.

Do you ask clarifying questions? Do you start with a plan or dive straight into code? How do you handle getting stuck? Do you write readable code under pressure?

These challenges give you the reps to develop that comfort. The actual building is a practice for the performance.

I've compiled all 50 challenges with full requirements into a PDF guide.

If you're actively preparing for React interviews, you can grab it for FREE from The Ultimate React Ebooks Collection.

Scroll down to the Contents section on The Ultimate React Ebooks Collection to download it for FREE using the Preview link.

The challenges are designed to be self-contained — you don't need a course or video walkthrough. Just the requirements and your code editor.

Good luck with your React interviews.

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.

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

My Portfolio: https://yogeshchavan.dev/

🔥 Available For Everyone - My Real-time Indian Stock Market Price Tracker App🚀

Yogesh Chavan — Tue, 10 Feb 2026 07:42:36 +0000

After weeks of using this app privately and receiving countless DMs asking for access, I've finally decided to make it available to everyone.

Here's the truth: I built this for myself first.

I was frustrated with the existing tools - delayed data, clunky interfaces, and no way to track multiple stocks the way I wanted during market hours. So I built exactly what I needed.

The result? A tool that helps me spot intraday opportunities within minutes, not hours.

What Changed My Trading Game

Before this app, I'd spend the first hour of market open juggling between multiple tabs, manually refreshing prices, and often missing the best entry points.

Now? I open one dashboard, see everything I need, and act fast.

Check out the landing page - I've shared actual screenshots of recent intraday profits I made using this app. No fluff, just real numbers.

👉 Check them out here

What's Included

When you get access, you're not just getting an app - you're getting everything you need to deploy it yourself and use it forever:

Complete source code - Own it, modify it, run it your way
Step-by-step video tutorial - Watch me deploy it from scratch so you can do the same
1:1 support from me - Stuck somewhere? Message me directly
My intraday strategies - The exact tips I use to maximize profits

Once you deploy it (FREE for Lifetime), it's yours for life. No subscriptions. No recurring fees.

Why Traders Love This

📊 Real-time price tracking - No more stale data or manual refreshes

📈 Interactive charts - Visualize price movements instantly

🔔 Custom alerts - Get notified when stocks hit your target prices

⚡ Multi-stock monitoring - Track your entire watchlist in one view

The app is built for speed because in intraday trading, seconds matter.

Who Is This For?

This is perfect if you:

Do intraday trading and want faster, cleaner data
Are you tired of switching between multiple apps and websites
Want a personal trading dashboard you fully control
Like building tools that give you an edge

Check out my previous article if you missed checking out this app.

Limited Availability

I'm keeping this accessible to a small group initially. I want to make sure everyone who gets it receives proper support and actually deploys it successfully.

Once I hit capacity for 1:1 support, I'll need to pause new access.

👉 Grab Your Access Now

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.

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

My Portfolio: https://yogeshchavan.dev/

React Query Complete Beginner's Guide - TanStack Query v5 + React + Vite

Yogesh Chavan — Thu, 29 Jan 2026 05:45:13 +0000

Introduction to React Query

What is React Query?

React Query (now called TanStack Query) is a powerful data-fetching and state management library for React applications. It simplifies how you fetch, cache, synchronize, and update server state in your React apps.

Unlike traditional state management solutions like Redux, React Query is specifically designed for managing server state, data that originates from an external source and needs to be kept in sync.

Before React Query, developers had to manually handle loading states, error states, caching, background updates, and stale data. This often led to complex, error-prone code scattered across components. React Query provides a declarative approach that handles all of this automatically.

Why Use React Query?

Managing server state is fundamentally different from managing client state. Server state is persisted remotely, requires asynchronous APIs to fetch and update, has shared ownership (other people can change it without your knowledge), and can become stale in your application if you're not careful.

Benefits of React Query:

Automatic Caching - React Query caches your data automatically. When you request the same data again, it returns the cached version instantly while refetching in the background.
Background Updates - Data is automatically refetched in the background when it becomes stale, when the window regains focus, or when the network reconnects.
Deduplication - Multiple components requesting the same data result in only one network request. React Query shares the result across all subscribers.
Optimistic Updates - Update your UI immediately before the server confirms the change, providing a snappy user experience.
Pagination and Infinite Scroll - Built-in support for paginated and infinite scroll interfaces with minimal code.

Key Concepts

Queries are declarative dependencies on asynchronous data sources. They are used for fetching data from a server. The useQuery hook is the primary way to define queries in React Query.

Mutations are used to create, update, or delete data on the server. Unlike queries, mutations are typically triggered by user actions like form submissions or button clicks. The useMutation hook handles mutations.

Query Keys uniquely identify your queries. They are used for caching, refetching, and sharing data across components. Query keys can be simple strings or complex arrays with variables.

Query Client is the core of React Query. It manages the cache, handles garbage collection, and provides methods for interacting with your queries programmatically.

Feature	Traditional Approach	React Query
Caching	Manual implementation	Automatic
Loading States	useState + useEffect	Built-in
Error Handling	try/catch + state	Built-in
Background Refetch	Custom logic	Automatic
Deduplication	Not available	Automatic

Tip: React Query is not a replacement for client state management. Use it alongside useState, useReducer, or other state management solutions for local UI state.

Setting Up Your Environment

Prerequisites

Before setting up React Query, you should have Node.js installed on your machine. You'll also need a basic understanding of React fundamentals including components, props, state, and hooks.

Creating a React Project with Vite

We'll use Vite to create our React project because it's fast and has excellent developer experience. Run the following commands in your terminal:

npm create vite@latest react-query-demo -- --template react
cd react-query-demo
npm install

Installing React Query

Install TanStack Query (React Query v5) and its devtools package:

npm install @tanstack/react-query@5.90.20 @tanstack/react-query-devtools@5.91.2

Note: We're using specific versions (5.90.20 for @tanstack/react-query and 5.91.2 for @tanstack/react-query-devtools) which were the latest at the time of writing. This ensures all code examples work correctly regardless of future updates.

Understanding the Packages

@tanstack/react-query - The core library that provides hooks like useQuery and useMutation for fetching and managing server state. It handles caching, background refetching, and synchronization automatically.

@tanstack/react-query-devtools - A development tool that provides a visual interface to inspect and debug your queries. It shows cache state, query status, and timing information. This package is optional but highly recommended for development.

Setting Up the Query Client

The Query Client is the central piece of React Query. It manages the cache and provides the configuration for all queries and mutations. Update your main.jsx file:

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import App from './App'
import './index.css'

// Create a client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
      retry: 1,
    },
  },
})

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>
)

Important: Always create the QueryClient instance outside of your component (at the module level) as shown above. If you create it inside a component, a new QueryClient will be created on every render, causing the cache to be reset and breaking React Query's caching functionality.

Understanding the Configuration

QueryClient - Creates a new query client instance. You can pass default options that apply to all queries and mutations.
QueryClientProvider - A React context provider that makes the query client available to all components in your application.
staleTime - The time in milliseconds after which data is considered stale. Stale data will be refetched automatically in the background. Default is 0.
retry - The number of times to retry failed queries before giving up. Default is 3.

Tip: Use npm run dev to start the development server. The React Query DevTools will appear as a flower icon in the bottom-right corner of your app.

Want to master React Query by building a real-world, large-scale application from scratch? Check out this comprehensive course.

Your First Query with useQuery

The useQuery Hook

The useQuery hook is the primary way to fetch data in React Query. It takes a configuration object with at least two properties: a unique query key and a query function that returns a promise.

import { useQuery } from '@tanstack/react-query'

const { data, isLoading, error } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
})

Creating Your First Query

Let's create a component that fetches a list of users from a public API. Create a new file called Users.jsx:

// src/components/Users.jsx
import { useQuery } from '@tanstack/react-query'

// Query function - must return a promise
const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users')
  if (!response.ok) {
    throw new Error('Failed to fetch users')
  }
  return response.json()
}

function Users() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  })

  if (isLoading) return <p>Loading users...</p>
  if (error) return <p>Error: {error.message}</p>

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

export default Users

Code Explanation:

fetchUsers function - This async function makes an HTTP request to the JSONPlaceholder API using the fetch API. It checks if the response is successful (response.ok), and if not, throws an error. On success, it parses and returns the JSON data.
useQuery hook - We destructure three values from useQuery: data (the fetched users), isLoading (true while fetching for the first time), and error (contains error details if the request fails).
queryKey: ['users'] - This unique identifier is used by React Query to cache and track this specific query. Any component using the same query key will share the cached data.
Conditional rendering - We first check if the data is loading, then if there's an error, and finally render the list of users.

Understanding Query States

React Query provides several state values to help you build robust UIs:

isLoading - True when the query is fetching for the first time and has no cached data.
isFetching - True whenever the query is fetching, including background refetches.
isError - True when the query encountered an error.
isSuccess - True when the query has successfully fetched data.
data - The data returned from the query function (undefined until success).
error - The error object if the query failed (null otherwise).

Note: The query function must throw an error for React Query to treat it as a failure. If you use fetch, remember that it doesn't throw on HTTP errors—you need to check response.ok and throw manually.

Now open App.jsx file and replace its contents:

import Users from './components/Users';

function App() {
  return <Users />;
}

export default App;

Now, if you check the application by visiting http://localhost:5173/, you will see the list of users as shown below.

Make sure you have started the application by executing 'npm run dev' command.

Now click on the flower icon, which is displayed in the bottom-right corner, and you will be able to see the data coming from the API with various 'Actions' buttons like Refetch, Invalidate, Reset etc.

Understanding the DevTools Action Buttons

Refetch - Manually triggers a new network request to fetch fresh data from the server, regardless of whether the cached data is stale or not.
Invalidate - Marks the query as stale, which signals React Query that the data needs to be refetched. If the query is currently being rendered, it will refetch in the background.
Reset - Resets the query to its initial state, clearing all cached data and returning to the loading state.

Query Keys Deep Dive

What Are Query Keys?

Query keys are the heart of React Query's caching mechanism. They uniquely identify each query and determine how data is cached and shared across your application. When multiple components use the same query key, they share the same cached data.

Types of Query Keys

String Keys - The simplest form of query key is an array with a single string. Use this for queries that don't depend on any variables:

// Simple string key in an array
const { data } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchAllTodos,
})

// Another example
const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchAllUsers,
})

Array Keys with Variables - When your query depends on variables like an ID or filter, include them in the query key array:

// Query key with a variable
const { data } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
})

// Query key with multiple variables
const { data } = useQuery({
  queryKey: ['todos', { status, page }],
  queryFn: () => fetchTodos({ status, page }),
})

// Accessing variables in the query function
const { data } = useQuery({
  queryKey: ['todo', todoId],
  queryFn: ({ queryKey }) => {
    const [, id] = queryKey
    return fetchTodo(id)
  },
})

Understanding const [, id] = queryKey - This is JavaScript array destructuring syntax. The queryKey is an array like ['todo', 5]. The comma before id skips the first element ('todo'), and assigns the second element (5) to the variable id. It's equivalent to writing const id = queryKey[1].

Query Key Best Practices

Be Consistent - Use the same key structure throughout your application.
Be Descriptive - Query keys should describe what data they represent.
Include Dependencies - Any variable that affects the query result should be in the key.
Use Query Key Factories - For complex applications, create factory functions:

// Query key factory pattern
const todoKeys = {
  all: ['todos'],
  lists: () => [...todoKeys.all, 'list'],
  list: (filters) => [...todoKeys.lists(), filters],
  details: () => [...todoKeys.all, 'detail'],
  detail: (id) => [...todoKeys.details(), id],
}

// Usage
useQuery({ queryKey: todoKeys.all, queryFn: fetchTodos })
useQuery({ queryKey: todoKeys.detail(5), queryFn: () => fetchTodo(5) })

Important: Query keys are serialized deterministically. This means ['todos', { status: 'done' }] and ['todos', { status: 'done' }] are considered equal.

Handling Loading and Error States

Building Robust UIs

One of the most common challenges in data fetching is handling the various states your UI can be in. React Query makes this straightforward by providing clear status indicators for every query.

The Status Property

Every query has a status property that can be one of three values:

const { status, data, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
})

// status can be:
// 'pending' - Query has no data yet (initial load)
// 'error' - Query encountered an error
// 'success' - Query has data

Complete Loading States Example

// src/components/UserProfile.jsx
import { useQuery } from '@tanstack/react-query'

function UserProfile({ userId }) {
  const { data, isLoading, isFetching, isError, error, refetch } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(res => {
      if (!res.ok) throw new Error('User not found')
      return res.json()
    }),
  })

  if (isLoading) {
    return (
      <div className="loading-skeleton">
        <div className="skeleton-avatar" />
        <div className="skeleton-text" />
      </div>
    )
  }

  if (isError) {
    return (
      <div className="error-container">
        <h3>Something went wrong</h3>
        <p>{error.message}</p>
        <button onClick={() => refetch()}>Try Again</button>
      </div>
    )
  }

  return (
    <div className="user-profile">
      {isFetching && <span className="refetching">Updating...</span>}
      <img src={data.avatar} alt={data.name} />
      <h2>{data.name}</h2>
      <p>{data.email}</p>
    </div>
  )
}

Error Retry Configuration

React Query automatically retries failed queries. You can customize this behavior:

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  retry: 3,
  retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
})

// Disable retries for specific errors
const { data } = useQuery({
  queryKey: ['user', userId],
  queryFn: fetchUser,
  retry: (failureCount, error) => {
    if (error.status === 404) return false
    return failureCount < 3
  },
})

Tip: Use isFetching instead of isLoading when you want to show a subtle indicator for background refetches while still displaying cached data.

Want to Learn More?

You've just scratched the surface of what React Query can do! This tutorial covered the essential foundations—setting up your environment, fetching data with useQuery, understanding query keys, and handling loading and error states.

But there's so much more to explore. React Query offers powerful features that can truly transform how you build React applications:

Mutations with useMutation - Learn how to create, update, and delete data on the server with built-in loading states and error handling
Query Invalidation - Keep your data fresh and synchronized by strategically invalidating cached queries after mutations
Pagination & Infinite Queries - Handle large datasets efficiently with built-in support for traditional pagination and infinite scroll interfaces
Optimistic Updates - Provide instant feedback to users by updating the UI immediately, even before the server confirms the change
Prefetching - Load data before users need it to eliminate loading states and make navigation feel instant
DevTools & Debugging - Master the React Query DevTools to inspect, debug, and understand your application's data flow
Best Practices - Discover patterns, tips, and common pitfalls to avoid as you build production-ready applications

Each of these topics builds upon the concepts you've learned here and will take your React Query skills to the next level.

Ready to become a React Query expert? Get the complete React Query Complete Beginner's Guide to access all chapters, detailed code examples, and practical exercises that will help you master server state management in React.

Republic Day Discount Offer - Get All Current + Future Courses, Ebooks, Webinars At Just $15 / ₹1200 Instead Of Regular Price $236 / ₹20,060.

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.

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

My Portfolio: https://yogeshchavan.dev/

Master React Testing Step-by-Step: Jest, Vitest & React Testing Library

Yogesh Chavan — Mon, 26 Jan 2026 07:36:37 +0000

A comprehensive guide to testing React applications with Jest, Vitest, and React Testing Library.

Introduction to Testing

Why Test Your Code?

Testing is an essential part of software development that helps ensure your code works correctly and continues to work as you make changes. In React applications, testing gives you confidence that your components render correctly, handle user interactions properly, and manage state as expected.

Without tests, you might ship broken code to production, spend hours debugging issues that tests would have caught immediately, or be afraid to refactor code because you're not sure if you'll break something.

Benefits of Testing

Catch bugs early - Find issues before they reach production.
Documentation - Tests describe how your code should behave.
Confidence to refactor - Change code without fear of breaking things.
Better design - Writing testable code often leads to better architecture.
Faster development - Automated tests are faster than manual testing.

Types of Tests

Unit Tests focus on testing individual pieces of code in isolation - a single function, a component, or a hook. They are fast to run and help pinpoint exactly where bugs occur. Most of your tests should be unit tests.

Integration Tests verify that multiple pieces of code work together correctly. For example, testing that a form component correctly calls an API and updates state. These tests give you more confidence that features work end-to-end.

End-to-End (E2E) Tests simulate real user behavior by testing the entire application in a browser. Tools like Cypress or Playwright are used for E2E testing. While comprehensive, these tests are slower and more brittle than unit tests.

The Testing Trophy

Kent C. Dodds popularized the "Testing Trophy" which suggests focusing most effort on integration tests, with unit tests for complex logic, and minimal E2E tests for critical paths. The key principle is to test your software the way users actually use it.

Test Type	Speed	Confidence	Cost
Unit Tests	Very Fast	Lower	Low
Integration	Fast	Higher	Medium
E2E Tests	Slow	Highest	High

Tip: Write tests that give you confidence your app works. Don't aim for 100% coverage - aim for meaningful tests!

Don't miss to check out the important announcement at the end of the article.

Setting Up Your Environment

Prerequisites

Before setting up testing, you should have Node.js installed on your machine. You'll also need a basic understanding of React fundamentals including components, props, state, and hooks.

Creating a React Project with Vite

We'll use Vite to create our React project because it's fast and has excellent support for modern JavaScript features. Run the following commands in your terminal:

npm create vite@latest react-testing-demo -- --template react
cd react-testing-demo
npm install

Installing Vitest

Vitest is a blazing-fast test runner built for Vite projects. It's compatible with Jest's API, making it easy to migrate existing tests. Install Vitest and its dependencies:

npm install -D vitest @testing-library/react @testing-library/jest-dom
npm install -D @testing-library/user-event jsdom

Understanding the Packages

vitest - The test runner itself. It executes your tests, provides assertions, mocking capabilities, and integrates seamlessly with Vite's build system for fast test execution.
@testing-library/react - Provides utilities to render React components in tests and query the rendered output. It encourages testing components the way users interact with them.
@testing-library/jest-dom - Adds custom matchers like toBeInTheDocument(), toHaveTextContent(), and toBeVisible() that make assertions more readable and expressive.
@testing-library/user-event - Simulates real user interactions like clicking, typing, and selecting. It's more realistic than fireEvent as it triggers all the events a real interaction would cause.
jsdom - A JavaScript implementation of the DOM that runs in Node.js. It provides a browser-like environment where your React components can render during tests.

Configuring Vitest

Update your vite.config.js file to include the test configuration:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.js',
  },
})

Creating the Setup File

Create a setup file at src/setupTests.js to configure testing utilities:

import '@testing-library/jest-dom'

Adding Test Scripts

Add test scripts to your package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "coverage": "vitest run --coverage"
  }
}

Tip: Use npm test for watch mode during development. Use npm run coverage to see code coverage reports.

Writing Your First Test

Test File Structure

Test files in Vitest/Jest typically follow naming conventions like Component.test.js or Component.spec.js. Place test files next to the components they test or in a __tests__ folder.

src/
  components/
    Button/
      Button.jsx
      Button.test.jsx
  __tests__/
    utils.test.js

Basic Test Anatomy

Every test follows a simple structure: describe what you're testing, set up the test, perform actions, and assert the expected results. Let's write our first test. Create a new file called src/math.test.js:

import { describe, it, expect } from 'vitest'

describe('Math operations', () => {
  it('should add two numbers correctly', () => {
    const result = 2 + 2
    expect(result).toBe(4)
  })

  it('should multiply two numbers correctly', () => {
    const result = 3 * 4
    expect(result).toBe(12)
  })
})

When you run 'npm test', you should see output similar to this:

Understanding the Test Syntax

describe() - The describe function groups related tests together. It takes a description string and a callback function containing the tests. You can nest describe blocks for better organization.

it() / test() - The it function (or test, they're identical) defines a single test case. The description should clearly state what behavior is being tested. Write it as "it should..." for clarity.

expect() - The expect function creates an assertion. It takes a value and returns an object with matcher methods like toBe(), toEqual(), toBeTruthy(), etc.

Common Matchers

// Equality
expect(value).toBe(4)              // Strict equality (===)
expect(value).toEqual({a: 1})      // Deep equality for objects
expect(value).not.toBe(5)          // Negation

// Truthiness
expect(value).toBeTruthy()         // Truthy value
expect(value).toBeFalsy()          // Falsy value
expect(value).toBeNull()           // Exactly null
expect(value).toBeDefined()        // Not undefined

// Numbers
expect(value).toBeGreaterThan(3)
expect(value).toBeLessThanOrEqual(10)
expect(value).toBeCloseTo(0.3, 5)

// Strings
expect(string).toMatch(/pattern/)
expect(string).toContain('substring')

// Arrays
expect(array).toContain(item)
expect(array).toHaveLength(3)

Tip: Run npm test now to see your first test pass! Vitest will watch for changes automatically.

Testing React Components

Introduction to React Testing Library

React Testing Library (RTL) is the recommended way to test React components. Its guiding principle is: "The more your tests resemble the way your software is used, the more confidence they can give you." RTL encourages testing behavior, not implementation details.

Creating a Simple Component

Let's create a simple Greeting component and test it:

// src/components/Greeting.jsx
function Greeting({ name }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to React Testing</p>
    </div>
  )
}

export default Greeting

Writing the Test

// src/components/Greeting.test.jsx
import { render, screen } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import Greeting from './Greeting'

describe('Greeting', () => {
  it('renders the greeting message with name', () => {
    render(<Greeting name="John" />)

    expect(screen.getByText('Hello, John!')).toBeInTheDocument()
  })

  it('renders the welcome message', () => {
    render(<Greeting name="Jane" />)

    expect(screen.getByText('Welcome to React Testing')).toBeInTheDocument()
  })
})

Understanding render() and screen

render() - The render function takes a React element and renders it into a virtual DOM. It returns utility functions for interacting with the rendered component, but using screen is preferred.

screen - The screen object provides query methods to find elements in the rendered output. It's the recommended way to query elements because it's more explicit and cleaner.

Query Methods

Query	No Match	Multiple Match	Async
getBy	Throws	Throws	No
queryBy	null	Throws	No
findBy	Throws	Throws	Yes
getAllBy	Throws	Array	No
queryAllBy	[]	Array	No
findAllBy	Throws	Array	Yes

Tip: Use getBy for elements that should exist, queryBy for elements that might not exist, and findBy for async elements.

Common Assertion Methods

toBeInTheDocument() - Checks if an element is present in the document. This is one of the most frequently used matchers from @testing-library/jest-dom.
toHaveTextContent(text) - Verifies that an element contains the specified text content.
toBeVisible() - Checks if an element is currently visible to the user (not hidden by CSS).
toBeDisabled() / toBeEnabled() - Checks if a form element is disabled or enabled.
toHaveValue(value) - Verifies the current value of an input, select, or textarea element.
toHaveBeenCalled() - Checks if a mock function was called at least once.
toHaveBeenCalledTimes(n) - Verifies that a mock function was called exactly n times.
toHaveBeenCalledWith(args) - Checks if a mock function was called with specific arguments.

Testing User Interactions

Introduction to user-event

The @testing-library/user-event library simulates user interactions like clicking, typing, and selecting. It's preferred over fireEvent because it more closely mimics actual user behavior, including triggering all the events a real interaction would cause.

Creating an Interactive Component

// src/components/Counter.jsx
import { useState } from 'react'

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  )
}

export default Counter

Testing Click Events

// src/components/Counter.test.jsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect } from 'vitest'
import Counter from './Counter'

describe('Counter', () => {
  it('starts with count of 0', () => {
    render(<Counter />)
    expect(screen.getByText('Count: 0')).toBeInTheDocument()
  })

  it('increments count when increment button clicked', async () => {
    const user = userEvent.setup()
    render(<Counter />)

    await user.click(screen.getByText('Increment'))

    expect(screen.getByText('Count: 1')).toBeInTheDocument()
  })

  it('decrements count when decrement button clicked', async () => {
    const user = userEvent.setup()
    render(<Counter />)

    await user.click(screen.getByText('Decrement'))

    expect(screen.getByText('Count: -1')).toBeInTheDocument()
  })
})

Now try to add a test for the reset button click in the above test file and see if it passes to get hands-on practice.

Tip: Keep the npm test command running in the terminal so you can see the test success/failure in real-time.

Testing Form Inputs

// src/components/SearchBox.jsx
import { useState } from 'react'

function SearchBox({ onSearch }) {
  const [query, setQuery] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    onSearch(query)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <button type="submit">Search</button>
    </form>
  )
}

Testing Typing and Form Submission

// src/components/SearchBox.test.jsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, vi } from 'vitest';
import SearchBox from './SearchBox';

describe('SearchBox', () => {
  it('calls onSearch with query when form submitted', async () => {
    const user = userEvent.setup();
    const mockOnSearch = vi.fn();

    render(<SearchBox onSearch={mockOnSearch} />);

    const searchInput = screen.getByPlaceholderText('Search...');
    const searchButton = screen.getByText('Search');

    await user.type(searchInput, 'React');
    await user.click(searchButton);

    expect(mockOnSearch).toHaveBeenCalledWith('React');
  });
});

Understanding Mocks

A mock is a fake implementation of a function that allows you to track how it was called without executing the real code. Mocks are essential in testing because they let you isolate the component you're testing from its dependencies.

In the example above, we use vi.fn() to create a mock function for onSearch. This lets us verify that the SearchBox component calls the onSearch prop with the correct argument when the form is submitted, without needing to implement actual search functionality.

Note: vi.fn() in Vitest is equivalent to jest.fn() in Jest. If you're using Jest instead of Vitest, simply replace vi.fn() with jest.fn() - they work exactly the same way.

Note: Always use userEvent.setup() at the start of your test. Remember that user-event methods are async!

Testing Props and State

Testing Components with Props

When testing components that receive props, verify that the component renders correctly with different prop values and handles edge cases like missing or invalid props.

// src/components/UserCard.jsx
function UserCard({ user, onEdit, onDelete }) {
  if (!user) {
    return <p>No user data available</p>
  }

  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      <p>Email: {user.email}</p>
      <p>Role: {user.role || 'Member'}</p>
      <button onClick={() => onEdit(user.id)}>Edit</button>
      <button onClick={() => onDelete(user.id)}>Delete</button>
    </div>
  )
}

export default UserCard

Testing Different Prop Scenarios

// src/components/UserCard.test.jsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect, vi } from 'vitest'
import UserCard from './UserCard'

const mockUser = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
  role: 'Admin'
}

describe('UserCard', () => {
  it('renders user information correctly', () => {
    render(<UserCard user={mockUser} onEdit={vi.fn()} onDelete={vi.fn()} />)

    expect(screen.getByText('John Doe')).toBeInTheDocument()
    expect(screen.getByText('Email: john@example.com')).toBeInTheDocument()
    expect(screen.getByText('Role: Admin')).toBeInTheDocument()
  })

  it('shows default role when role not provided', () => {
    const userWithoutRole = { id: 2, name: 'Jane', email: 'jane@example.com' }
    render(<UserCard user={userWithoutRole} onEdit={vi.fn()} onDelete={vi.fn()} />)

    expect(screen.getByText('Role: Member')).toBeInTheDocument()
  })

  it('shows message when user is null', () => {
    render(<UserCard user={null} onEdit={vi.fn()} onDelete={vi.fn()} />)

    expect(screen.getByText('No user data available')).toBeInTheDocument()
  })
})

Testing Callback Props

describe('UserCard callbacks', () => {
  it('calls onEdit with user id when edit clicked', async () => {
    const user = userEvent.setup()
    const mockOnEdit = vi.fn()

    render(<UserCard user={mockUser} onEdit={mockOnEdit} onDelete={vi.fn()} />)

    await user.click(screen.getByText('Edit'))

    expect(mockOnEdit).toHaveBeenCalledTimes(1)
    expect(mockOnEdit).toHaveBeenCalledWith(1)
  })

  it('calls onDelete with user id when delete clicked', async () => {
    const user = userEvent.setup()
    const mockOnDelete = vi.fn()

    render(<UserCard user={mockUser} onEdit={vi.fn()} onDelete={mockOnDelete} />)

    await user.click(screen.getByText('Delete'))

    expect(mockOnDelete).toHaveBeenCalledWith(1)
  })
})

Testing State Changes

When testing components with internal state, focus on verifying the visible behavior changes rather than the state values directly. Test what the user sees and interacts with.

Tip: Use vi.fn() (Vitest) or jest.fn() (Jest) to create mock functions for testing callbacks.

Summary

In this tutorial, we covered the fundamentals of React testing, including setting up your testing environment with Vitest, writing your first tests, testing React components with React Testing Library, handling user interactions with user-event, and testing components with props and state.

Key takeaways:

Test behavior, not implementation details
Use screen queries to find elements the way users would
Mock functions help isolate components from their dependencies
Always use userEvent.setup() for simulating user interactions
Focus on what users see and experience

Want to Learn More?

This tutorial covers just the first half of the React Testing Guide. The full guide includes additional topics such as:

Testing Hooks and Custom Hooks
Mocking in Tests (Mock functions, Modules, Apis, Utility functions and timers)
Testing API Calls with Fetch(Mocking fetch requests, Testing error states)
Testing API Calls with Axios(Mocking axios Get and Post requests)
Async Testing Patterns(Handling promises and async operations)
Testing Best Practices(Writing maintainable tests, Common Anti-Patterns to Avoid, Tips & Tricks)
Jest vs Vitest Comparison(When to use which, Migration from Jest to Vitest)

and much more…

The complete guide also includes full source code access, so you can follow along, experiment, and practice with all the examples/code samples covered throughout the guide.

To dive deeper into React testing and master all these concepts, check out the complete React Testing Using Jest, Vitest, React Testing Library - Complete Beginners Guide available at courses.yogeshchavan.dev.

Announcement:

Republic Day Discount Offer - Get All Current + Future Courses, Ebooks, Webinars At Just $15 / ₹1200 Instead Of Regular Price $236 / ₹20,060.

Limited Time Offer.

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.

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

My Portfolio: https://yogeshchavan.dev/

DEV Community: Yogesh Chavan

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

📅 Webinar Details

🔥 What You'll Learn

💡 Perfect For

⚠️ Important Note

🎟 Limited Seats Available

About Me

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

1. Introduction to Claude Code

What is Claude Code?

Why Claude Code for React Developers?

Claude Code vs Traditional AI Assistants

Prerequisites and Requirements

Pricing and Plans

2. Installation & Setup

Installing Claude Code on macOS/Linux

Installing Claude Code on Windows

Alternative Installation Methods

Logging In and Authentication

Starting Your First Session

3. Core Concepts

Understanding the Agentic Loop

The Context Window Explained

Permission Modes

Built-in Tools

4. Basic Commands & Usage

Essential CLI Commands

Exploring Your Codebase

Making Code Changes

Working with Git

5. CLAUDE.md & Memory System

What is CLAUDE.md?

Creating Effective Instructions

Auto Memory Feature

Project Rules with .claude/rules/

Tips When Working With Claude Code

🎯 Be Specific, Not Lengthy

📌 Reference Files Directly with @

✅ Always Give Claude a Way to Verify

🔄 Clear Context Between Unrelated Tasks

🧠 Break Complex Tasks into Steps

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

6. Common Workflows for React Developers

7. Advanced Features

8. Best Practices & Tips

9. VS Code Integration

10. Building a Complete React App

11. CI/CD Integration

12–16. More Advanced Topics

About Me

I Built a Multi-Vendor Appointment Booking App

What Is BookFlow?

Key Features

🏢 Multi-Vendor Architecture

👥 Staff Orchestration

📊 Revenue Analytics Dashboard

🔔 Smart Notifications

🚫 No Booking Overlaps

🔒 Enterprise Security

📅 Calendar View

🎨 Custom Branding

⚡ Frictionless Onboarding

🌐 Public Booking Pages

📱 Responsive Design

🏥 Perfect For

Few Application Demo Screenshots

For Clients: A Simple Booking Flow

For Staff: A Focused Workspace

For Admins: Full Business Control

For Superadmins: Platform Oversight

Tech Stack

About Me

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

What Is DigiMart?

For Buyers: A Frictionless Shopping Experience

For Creators: A Powerful Seller Dashboard

For Admins: Full Marketplace Oversight

Built With Modern Technology

A UI Worth Talking About

Project Rules with `.claude/rules/`

📌 Reference Files Directly with `@`