DEV Community: Yogesh Chavan

Getting Started With Java — Best Ebook You Can Find On Internet ☕

Yogesh Chavan — Sun, 04 Oct 2026 09:59:22 +0000

I'm excited to share something I've been working on: Getting Started With Java, a complete, beginner-friendly ebook that takes you from writing your very first line of Java to building real, working applications.

If learning Java has been sitting on your to-do list, this is the push you've been waiting for.

Why I wrote this

Most Java resources fall into one of two traps. Some drown you in theory before you've written a single useful program. Others throw code at you without ever explaining why it works. Neither builds real confidence.

I wanted something different — a guide that explains every concept clearly, shows you practical examples as you go, and then puts you to work on actual projects. The kind of resource I wish I'd had when I was starting out.

The goal is simple:

Learn Java → Understand the fundamentals → Write real code → Build projects. 🚀

By the end, you won't just know about Java. You'll have the confidence to sit down and start building your own applications.

Why learn Java?

Java has been one of the most in-demand programming languages for over two decades — and it isn't slowing down. Here's why it's such a smart language to invest your time in:

It's everywhere. Java powers enterprise backends, Android apps, big-data tools like Hadoop and Spark, and systems at companies like Netflix, Amazon, Google, and virtually every major bank. Learn it once and you can work across industries.
The job market is huge. Java consistently ranks among the top languages in demand, and that translates into a large pool of well-paying roles — from backend and full-stack development to Android and enterprise engineering.
It teaches you to think like a programmer. Java's strong typing and clean object-oriented design instill habits — structure, clarity, discipline — that make picking up any other language afterwards far easier.
It's stable and future-proof. Backed by a massive ecosystem and regular releases, Java has stayed relevant for 25+ years. Skills you build today won't be obsolete tomorrow.
A huge ecosystem has your back. Frameworks like Spring Boot, a mature tooling landscape, and one of the largest developer communities in the world mean you're never stuck for help or libraries.
It's a gateway to more. Once you know Java, the door opens to Android development, Spring Boot web services, Kotlin, Scala, and more — all building directly on what you've learned.

In short: learning Java is one of the most reliable bets you can make as a developer. This ebook gets you there the practical way.

🔥 What's included?

📚 236 pages of carefully structured Java content
💡 Java fundamentals explained in a beginner-friendly way
💻 Practical examples throughout the ebook
🛠️ Multiple hands-on Java projects
📂 Complete source code for ALL projects included in the ebook

And the best part? You don't just read the concepts — you get the complete project source code so you can follow along, run everything yourself, and practice as you learn.

What you'll learn

The ebook is structured as a clear path from absolute basics to a solid, practical foundation:

The fundamentals — setting up your environment, variables, data types, operators, and control flow
Methods — writing clean, reusable code
Object-oriented programming — classes, encapsulation, inheritance, polymorphism, abstraction, and interfaces
Packages and access control — organizing real-world code
Exception handling — writing programs that fail gracefully
The Collections Framework — lists, maps, sets, and the tools behind almost every real program
File handling and I/O — making your data persist between runs

Every concept is explained in plain language, with working examples you can type out and run immediately.

Check Out FREE Preview Of Initial 70 Pages From Ebook

Build real projects, not just toy snippets

This is where it all comes together. Throughout the ebook you'll build hands-on projects that put each new skill into practice, including:

A menu-driven ATM and a calculator to master control flow and methods
A Tic-Tac-Toe game and a contact manager using arrays and strings
An OOP employee payroll system that brings every object-oriented concept together
A complete Banking Application with custom exceptions and validation
An E-Commerce Product Management System powered by the Collections Framework
A File-Based Student Management System that saves records to disk

Each one is fully explained in the book — and the complete source code ships with it, so you can run it, break it, fix it, and extend it on your own.

Who this is for

Complete beginners who want a structured, no-fluff path into Java
Developers from other languages looking to pick up Java quickly
Students and self-learners who learn best by building

☕ 236 Pages + Java Projects + Complete Source Code

That's the whole package — the explanations, the practical examples, the projects, and all the source code to go with them.

If Java is on your learning list, now is a great time to get started. 👉 Grab your copy and go from "I'm new to Java" to building real applications.

GET YOUR COPY OF THE EBOOK HERE

Find this and more developer guides and courses at courses.yogeshchavan.dev.

About Me

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

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

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

My Portfolio: https://yogeshchavan.dev/

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

Learn to Build Real-World Dashboards That Clients & Companies Actually Need

Yogesh Chavan — Thu, 17 Sep 2026 10:00:21 +0000

If you're a developer, freelancer, or someone building your portfolio, there's one type of application you should be comfortable building:

Dashboard-based business applications.

Why?

Because real-world software projects are rarely just simple websites.

Companies and clients need applications where users can log in, view data, perform actions, manage transactions, track activities, and make decisions through dashboards.

That's exactly why I built a Stock Trading Dashboard Application.

Check out the application demo video below for an inside peek 👇

💼 Why Dashboard Applications Matter

Think about the applications used by real businesses:

📊 Financial & Trading Dashboards
🛒 E-commerce Admin Panels
💰 Banking & Payment Dashboards
📦 Inventory Management Systems
👥 CRM Applications
📈 Sales & Analytics Dashboards
🏥 Healthcare Management Systems
🎓 Learning Management Systems
🚚 Logistics & Delivery Platforms
🏢 Enterprise Management Applications

Although these applications belong to different industries, many of them share the same fundamental building blocks:

Authentication → Dashboard → Data → Actions → Transactions → History → Reports → Admin Management

Learning how to build one well-designed dashboard application can therefore teach you concepts that are transferable to many different freelance and company projects.

🚀 Why I Created This Stock Trading App

Instead of creating another basic:

"Login → Add User → Delete User → CRUD"

project, I wanted to build something closer to a real-world business application.

The Stock Trading App includes workflows such as:

✅ User & Admin Authentication
✅ Role-based functionality
✅ Dashboard UI
✅ Stock search & selection
✅ Buy & Sell workflows
✅ Portfolio management
✅ Balance management
✅ Transaction history
✅ Order history
✅ Admin functionality
✅ Data-driven screens
✅ Responsive interface

These are the kinds of features that help you understand how larger business applications are structured.

Imagine a client approaches you and says:

"I need an admin dashboard."

Or:

"I need a customer portal."

Or:

"I need a financial dashboard with transactions."

Or:

"I need a management system with different user roles."

If you've already worked on applications with similar architecture and workflows, you're not starting from zero.

You can reuse what you've learned, adapt existing patterns, and build faster.

That's a valuable skill in freelancing.

🏢 Valuable for Company Projects Too

The same concepts appear in enterprise applications.

Companies often need developers who can work with:

Authentication & authorization
Role-based access
Dashboards
Forms & validation
Tables & data
Business workflows
Transactions
Reports
Admin panels
APIs
Database-driven applications

Learning these concepts through a realistic application gives you much more practical experience than simply following isolated tutorials.

🎯 Don't Just Build Projects. Build Projects That Teach You Something.

A portfolio containing:

❌ Calculator
❌ To-do list
❌ Basic CRUD app
❌ Simple weather app

can demonstrate that you know the basics.

But a well-built business application can demonstrate that you understand real application workflows.

That's why a project like this can be valuable for:

👨‍💻 Developers
🎓 Students
💼 Freelancers
🚀 Aspiring entrepreneurs
👨‍🏫 Trainers
📚 Developers building their portfolio

🔥 Get the Complete Source Code

I've made the complete Stock Trading App source code available so you can:

Study it → Run it → Understand it → Customize it → Build on top of it

👉 Get the Stock Trading App Source Code

GET THE COMPLETE SOURCE CODE →

Don't just learn how to build another demo application.

Learn how real-world dashboard applications are put together, and use that knowledge in your next freelance or company project.

Start building smarter.

Check out the Applications Source Code Bundle with source code of 16 such production applications

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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

I built a salon website that its owner can run without a developer

Yogesh Chavan — Fri, 04 Sep 2026 07:42:41 +0000

I just built a salon website that doesn't need a developer every time something needs to change

And that's the part I'm most excited about.

I built a fully customizable, multi-page salon website using:

Next.js 16
Tailwind CSS
Strapi CMS

The idea was simple

A business owner should be able to update their website without touching the code.

Want to:

Add a new service?
Add/remove sections?
Publish a new blog/article?
Change images and content?
Create new pages?

All of it can be managed through Strapi CMS.

So each and every part of the website is fully managed by Strapi CMS.

The frontend is built with Next.js 16 for a fast, modern experience, while Strapi gives the business complete control over the content.

Check out the application demo video below:

But this isn't just a salon website

The same approach can be used to build high-quality, customizable websites for salons, restaurants, clinics, hotels, agencies, small businesses and more.

Instead of building every website from scratch, the goal is to create a flexible system that can be customized for each business.

💡 Modern frontend + powerful CMS + reusable architecture = a website that can grow with the business.

Try it yourself

👉 salon.yogeshchavan.dev

Want to learn React + Strapi CMS from scratch? Check out this course.

Want to create and manage an actual booking flow? Check out the Multi-vendor Appointment booking app.

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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

I Built The Most Advanced Job Application Tracker

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

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

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

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

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

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

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

Check out the application demo video below:

Check out some preview images of the application

The short version

With HireLoop you can:

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

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

The stack

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

Trying it

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

Wrapping up

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

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

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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

Stop Writing Every Job Application Email from Scratch

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

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

You find a role that matches your skills.

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

Then comes the application email.

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

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

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

The Problem With Generic Application Emails

Most applicants eventually fall into one of two patterns.

Option 1: Copy and paste the same email

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

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

Option 2: Rewrite every email manually

The opposite approach is to carefully tailor every application.

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

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

Personalization Doesn't Have to Be Slow

Most job descriptions follow a similar structure.

They list:

Required skills
Preferred experience
Responsibilities
Location
Employment type
Additional requirements

Your resume already contains your experience and skills.

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

That's a task AI is well suited for.

Building ApplyAI

To simplify this process, I built ApplyAI.

The idea was straightforward:

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

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

Watch Quick Demo Below:

What It Generates

For each job posting, ApplyAI creates:

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

The generated email isn't locked.

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

Remembering Important Details

Many recruiters ask applicants to include additional information such as:

Current CTC
Expected CTC
Notice period
Availability
Preferred location

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

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

Built for Frequent Job Applications

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

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

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

Privacy by Design

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

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

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

Setting It Up

The project is designed to be simple to run locally.

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

Watch Complete Demo Below:

Final Thoughts

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

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

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

GET THE APPLICATION SOURCE CODE + SETUP VIDEO HERE

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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

Master Redux Toolkit & RTK Query Without Spending Weeks Reading Documentation

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

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

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

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

This is exactly where Redux Toolkit and RTK Query shine.

The problem?

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

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

📅 Webinar Details

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

What You'll Learn

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

Redux Fundamentals

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

Redux Toolkit

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

Async Operations

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

RTK Query

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

Real-World Project

Together we'll build a complete application that demonstrates:

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

Bonus for Every Attendee

Every attendee will receive:

RTK Query Cheatsheet
Complete webinar recording
Full application source code

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

Why Attend This Webinar?

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

Here's what makes this webinar different:

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

No Prior Redux Knowledge Required

Never used Redux before?

No problem.

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

Is This Webinar For You?

This webinar is perfect if you:

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

Why Learn Redux Toolkit & RTK Query?

Many React developers eventually struggle with problems like:

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

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

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

What You'll Walk Away With

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

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

Reserve Your Seat Now

Seats are intentionally limited to keep the session interactive.

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

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

REGISTER FOR THE WEBINAR HERE

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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

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

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

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

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

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

Why Build a Job Board?

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

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

HireHub eliminates that challenge.

Meet HireHub

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

Job Seekers
Employers
Administrators

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

Try it out for FREE

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

Features for Job Seekers

Advanced Job Search

Help users find relevant opportunities quickly with powerful filtering options:

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

One-Click Applications

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

AI-Powered Experience

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

Personalized Dashboard

Job seekers can:

Track applications
Save jobs
Manage profiles
Upload resumes
View application history

Features for Employers

Create and Manage Job Listings

Employers can:

Post jobs
Edit listings
Close positions
Track applications

Applicant Management

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

Company Profiles

Allow organizations to showcase:

Company information
Branding
Open positions
Hiring details

Recruitment Workflow

Streamline hiring operations from job creation to candidate selection.

Modern Technology Stack

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

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

Benefits include:

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

Who Can Use HireHub?

HireHub is ideal for:

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

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

Save Months of Development Time

Instead of spending months building:

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

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

Customization Available

Need additional features?

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

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

Ready to Launch Your Own Job Board?

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

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

Live Demo

https://hirehub.yogeshchavan.dev

Interested in Purchasing or Customizing HireHub?

Get in touch to discuss customization and feature requirements.

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

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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

Cypress Testing: Complete Beginner's Guide

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

Section 1: Getting Started with Cypress

1. Installing and Setting Up Cypress

Prerequisites

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

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

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

Creating a React Project (Optional)

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

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

Installing Cypress

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

npm install cypress --save-dev

# Or using yarn
yarn add cypress --dev

Opening Cypress for the First Time

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

npx cypress open

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

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

Adding NPM Scripts

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

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

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

2. Understanding Cypress Project Structure

Project Directory Overview

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

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

Key Directories and Files

`cypress/e2e/`

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

`cypress/fixtures/`

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

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

`cypress/support/commands.js`

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

// cypress/support/commands.js

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

`cypress.config.js`

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

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

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

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

Configuring ESLint for Cypress

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

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

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

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

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

import cypressPlugin from 'eslint-plugin-cypress';

Then add the following configuration to your ESLint config:

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

3. Writing Your First Cypress Test

Test File Structure

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

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

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

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

export default Home;

Setting Up the App with Routing

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

npm install react-router-dom

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

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

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

export default App;

Start your development server to run the application:

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

Writing the Test

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

// cypress/e2e/home.cy.js

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

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

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

Code Explanation

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

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

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

Understanding the Test Structure

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

Want the Complete Guide?

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

Here's everything you'll learn inside:

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

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

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

Don't Miss This!

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

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

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

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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

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

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

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

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

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

The Problem With Short Links

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

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

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

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

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

What RevealURL Does

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

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

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

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

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

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

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

A Quick Example

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

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

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

What It Doesn't Do

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

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

Who It's For

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

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

Try It

revealurl.yogeshchavan.dev

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

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

Don't Miss This!

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

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

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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

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

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

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

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

So I built Frame.

The idea is simple

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

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

How it works

The whole process takes about a minute:

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

Check out the application demo below.

Who's actually using this

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

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

A few things I'm proud of

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

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

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

Generated Sample Photos

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

Try it yourself

Frame is live at frame.yogeshchavan.dev.

It's FREE to use.

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

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

Don't Miss This!

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

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

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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

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

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

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

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

📅 Dates & Timings

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

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

What You'll Build

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

📌 Day-by-Day Breakdown

🔥 Day 1 — React Fundamentals (Frontend)

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

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

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

🔥 Day 2 — Backend + Integration + Deployment

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

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

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

🎯 Who Is This For?

This webinar is designed for:

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

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

✅ Why This Webinar Is Different

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

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

⚠️ Limited Seats — Register Now

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

👉 Register Here

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

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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

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

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

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

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

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

What it actually does

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

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

The customization is real

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

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

The live preview reflects every change instantly.

Presets so you don't start from scratch

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

Collage builder

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

Collection pages

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

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

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

No account required to start

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

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

Try it out!

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

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

About Me

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

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

My Portfolio: https://yogeshchavan.dev/

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