Zero To Hero

MERN Stack R OA D M A P

Complete Roadmap for MERN Stack Developer

 *Disclaimer*

E v e r y o n e l e a r n s u n i q u e l y .

What matters is developing the problem solving ability

to solve new problems.

This Doc will help you with the same.

BOSSCODER
ACADEMY
#BeTheBoss 1
Introduction
The MERN Stack is one of the most popular and powerful tech stacks used to
build full-stack web applications. It stands for:

M E
Mongo DB Express.js
NoSQL database Backend web
framework for Node.js

React.js
Frontend library for

R
building interactive UIs
Node.js
JavaScript runtime for
N
executing server-side code

Note: Before diving into the MERN stack, it’s essential to have a solid
grasp of web development fundamentals.

BOSSCODER
ACADEMY #BeTheBoss 2
Prerequisites

01 HTML

K e y To p i c s :

HTML Tags & Elements

Headings (<h1>-<h6>), Paragraphs (<p>) , Lists (<li>, <ul>,<ol>), Links (<a>

Semantic tags: <section>, <article>, <nav>, <footer

Global attributes: id, class

Forms & Input Elements

<input>, <select>, <textarea>, <button

Form validation attributes (required, type, minlength etc.)

Media Elements

<img>, <audio>, <video

attributes: controls, autoplay, loop, muted

Table and Layout Tags

<table>, <thead>, <tbody>, <tr>, <td>

BOSSCODER
ACADEMY
#BeTheBoss 3
 P R AC T I C E :

Question 1 Create A visiting card

A HTML project that demonstrates a basic layout with profile image and description

section in the right with details (name, profession, email, phone, website).

Reference :

John Doe

Profession: Web Developer

Email: johndoe@example.com

Phone: +123-456-7680

Website: www.example.com

Question 2 Create a contact form with input validation

A straightforward contact form with four fields—name, email, Phone and

message—and a single send button

Implements HTML5 validation using required, maxlength, pattern="[0-9]

{10}", and title attributes to ensure proper user input and provide helpful
error messages.

BOSSCODER
ACADEMY
#BeTheBoss 4
Reference :

BOSSCODER
ACADEMY
#BeTheBoss 5
02 CSS

Key Topics:

Selectors
Basic Selectors: element, .class, #i
Attribute Selectors: [type="text"], [href^="https"
Pseudo-classes: :hover, :focus, :nth-child(
Pseudo-elements: ::before, ::after

Styling
Typography: font-family, font-size, font-weight, line-heigh
Colors: color, background-color, rbga(), gradient
Borders and Shadow
Transitions & Animations: transition, @keyframe, translation

Positioning & Layout

position: static, relative, absolute, fixed, stick
display: block, inline, none, flex, gri
Float, clea
z-index

Flexbox & Grid

parent: display: flex, justify-content, align-items, flex-directio
child: flex-grow, flex-shrink, align-self

BOSSCODER
ACADEMY
#BeTheBoss 6
 Responsive Design
Media Queries: @media (max-width: 768px) {...
Units: %, em, vw, v
Responsive Images: max-width, height: auto

PRACTICE:

Question 1 Responsive Photo Gallery

Create a fully responsive photo gallery using only HTML and CSS, also add
description below that photo
Use CSS Grid and Flexbox to organize images in a dynamic layout that
automatically adjusts based on screen size
Display 3 columns on desktop and 2 columns on mobile devices

Reference :

BOSSCODER
ACADEMY #BeTheBoss 7
03 JavaScript

Key Topics:

Fundamentals
Variables: let, const, va
Data Types:

i. Primitive: String, Number, Boolean, Null, Undefined

ii. Complex: Object, Array, Functio

Operators: +, -, %, *, !, ==, !=, ===, typeof, instanceof

Functions & Scope

Function declaration, parameters, retur
Arrow functions, Higher-order functions: Callbacks, Functions returning
function
Scope: Global, Local, Block, Hoistin
Closures, Lexical scop
Array methods: .map(), .filter(), .reduce()

DOM Manipulation
Selecting Elements: getElementById(), querySelector(
Modifying DOM: innerHTML, createElement(), appendChild(), removeChild(),
classLis
Events: addEventListener(), click, submit, Event object

BOSSCODER
ACADEMY #BeTheBoss 8
 Objects & Arrays
Object Literals: Properties, Methods, this, Destructuring, Spread operato
Arrays:

i. Methods: .push(), .pop(), .slice(), .splice()

ii. Iteration: .forEach(), .find(), .some(), .every(

JSON: JSON.parse(), JSON.stringify()

Asynchronous JavaScript
Timers: setTimeout(), setInterval(
Promises: .then(), .catch(), .finally(
async/await synta
Fetch API: fetch(), GET/POST requests, Handling JSON

Error Handling
try/catch/finall
Error types: ReferenceError, TypeError, etc.

Browser Storage
localStorage, sessionStorage

PRACTICE:

Question 1 ToDo List

Build a simple To-Do List App where users can Add, Edit tasks, Delete tasks
Save and persist tasks using local storage (so tasks are not lost after page
refresh)

BOSSCODER
ACADEMY #BeTheBoss 9
 The UI has a text input and an Add button at the top. Below it, tasks appear in a
list, each with Edit and Delete buttons. Clicking Edit makes the task text
editable, and Delete removes it from the list.

Reference :

Question 2 Build Tic-Tac-Toe

Create a Tic-Tac-Toe game (also known as Xs and Os) using HTML, CSS, and
JavaScript. The goal is to let two players take turns marking spaces in a 3×3
grid. The game should detect wins, draws, and allow players to reset and play
again.

BOSSCODER
ACADEMY #BeTheBoss 10
 Create a 3x3 clickable grid where two players take turns placing "X" and "O".
After each move, check for a win or draw and display a message. Include a
"Restart Game" button to reset the board.
Reference :

BOSSCODER
ACADEMY #BeTheBoss 11
MERN Core Technologies
01 React.js (Frontend Library)

React.js is a JavaScript library for building interactive user interfaces. Developed

by Facebook, it follows a component-based architecture, making it efficient for
building scalable and dynamic web applications.

Key Topics:

JSX (JavaScript XML)

Combines HTML with JavaScript syntax
Must return a single parent element.

Components : Components are like functions that return HTML elements.

Functional component and class componen
Props: passing data to components

Hooks:
useState() – Manage local component stat
useEffect() – Side effects and lifecycle method
useRef() – Access DOM or persist value
useContext() – Global state managemen
useReducer() – Alternative to useState for complex logi
useMemo() / useCallback() – Performance optimization
Custom Hooks – Encapsulate logic in reusable functions

BOSSCODER
ACADEMY #BeTheBoss 12
 Routing
Forms and Events
State Management
Context AP
Redu
Recoil
Performance Optimization
useMemo useCallbac
virtualization
SSR & SSG

PRACTICE:

Question 1 Your own Portfolio website

A personal portfolio website is a single-page application (SPA) built with

React to showcase your skills, projects, and contact information.Add
following sections in the Portfolio -
Header/Navigation Bar:Contains links to different sections (About, Projects,
Skills, Contact).Sticky or fixed at the top for easy navigation
Hero Section: A brief introduction with your name, profession, and a call-to-
action (e.g., "Hire Me" or "View Work")
About Me:A short bio, education, experience, interests and a profile picture
Projects Section - Displays your projects with images, descriptions, and links
(GitHub, Live Demo).Each project can be a card with hover effects.

BOSSCODER
ACADEMY #BeTheBoss 13
 Skills/Technologies - Lists programming languages, frameworks, and tools
(icons or progress bars)
Contact Form - A form with fields for name, email, and message (connected
to an API or email service)
Footer - Social media links, copyright info, and a back-to-top button.

Reference :

BOSSCODER
ACADEMY #BeTheBoss 14
 02 API Concepts

APIs (Application Programming Interfaces) are essential for connecting frontend

apps (like React) with backend services (like Node.js), databases, or third-party
services (like payment APIs).

REST APIs and WebSockets are two widely used protocols in modern web
development.

Key Topics:

RESTful APIs and principles: REST (Representational State Transfer) is an

architectural style for designing APIs using standard HTTP methods.
Stateless: Each request contains all the data needed (no memory of previous
requests)
Resource-based: Resources are accessed via unique URLs (e.g., /api/
users/1)
JSON is the most common data format for requests and responses.

HTTP Methods:

Method Description Example

GET Read data `GET /api/products`

POST Create a new `POST /api/products`

resource

BOSSCODER
ACADEMY #BeTheBoss 15
 Method Description Example

PUT Update an existing `PUT /api/products/5`

resource

DELETE Remove a resource `DELETE /api/products/5`

HTTP status code

20X : Succes
30X : Redirectio
40X : Client Error
50X : Server Errors

Request & Response Breakdown

Header
Bod
Authenticatio
Query Parameter
Route Parameters

API Testing Tools

Postman: GUI tool to send API requests, test endpoints, inspect responses
Thunder Client: Lightweight REST client built into VSCode
curl: Command-line tool for making HTTP requests.

BOSSCODER
ACADEMY #BeTheBoss 16
 Websockets : WebSockets allow two-way real-time communication between
client and server over a single long-lived TCP connection.

PRACTICE:

Question 1 Weather App using OpenWeatherMap API

Create a frontend web application (using HTML, CSS, JavaScript — UI is not

very important) that performs the following
user Input - Allow users to enter a city name
Api call - Use the GET method to call the OpenWeatherMap API and fetch
weather data for the specified city
Display Data - Show the following weather details : City name, Temperature,
Weather condition, Humidity, Wind speed

BOSSCODER
ACADEMY #BeTheBoss 17
 03 Database – MongoDB

MongoDB is a document-oriented NoSQL database designed for speed,

scalability, and flexibility.

Key Topics:

SQL and NoSQL Databases:

SQL (Relational Databases) :

i. Structured schema (tables, rows, columns)

ii. Fixed data model (requires predefined schema)

iii. Examples: MySQL, PostgreSQL, SQL Server

NoSQL (Non-relational Databases) :

i. Schema-less (flexible document structure)

ii. Horizontally scalable (handles large volumes of data efficiently)

iii. Examples: MongoDB, Cassandra, Redis

Introduction to MongoDB
A document-based NoSQL database.
Stores data in BSON (Binary JSON) format.
Highly scalable with built-in sharding and replication.

BOSSCODER
ACADEMY #BeTheBoss 18
 Core Concepts
Document Structure

i. A document is a key-value pair (similar to JSON)

ii. {

"_id": "123",

"name": "John Doe",

"age": 30,

"address": { "city": "New York", "country": "USA" }

}
Collections & Databases

i. Collection : Group of documents (similar to a table in SQL)

ii. Database : Contains multiple collections

CRUD Operations

Querying Data :
Basic Queries: find(), findOne()
Comparison Operators: $eq, $ne, $gt, $lt, $in
Logical Operators: $and, $or, $not.
Array Operations: $push, $pull, $elemMatch.

Indexing & Performance

Single Field Index: db.users.createIndex({ name: 1 }
Compound Index: db.users.createIndex({ name: 1, age: -1 }
Text Index (for search): db.articles.createIndex({ content: "text" })

Aggregation Framework
Pipeline stages: $match, $group, $sort, $project.

BOSSCODER
ACADEMY
#BeTheBoss 19
 P R AC T I C E :

Question 1 Product Inventory Management Database design

Design a MongoDB database to manage an inventory of products. Your system

should support the following:

Products Collection Each product should include:

productId (string or number)

name (string)

category (string)

price (number)

quantityInStock (number)

supplier (embedded document or reference)

createdAt (date)

Suppliers Collection Each supplier should include:

supplierId (string or number)

name (string)

contact (phone or email)

address (string)

Use MongoDB queries (in Mongo Shell, Compass, or Mongoose) to perform

the following:

i. Insert sample products and suppliers.

ii. Read: List all products.

iii. Find products by category or supplier.

iv. Find products with low stock (e.g., quantityInStock < 10).

v. Update product details (e.g., price or stock quantity).

vi. Delete a product by productId.

BOSSCODER
ACADEMY
#BeTheBoss 20
 04 Node.js (JavaScript Runtime)

Node.js is a JavaScript runtime built on Chrome's V8 engine that allows

developers to execute JavaScript on the server side. It enables building scalable
and high-performance backend applications.

Key Topics:

Introduction to Node.js
Event-driven, non-blocking I/O mode
npm (Node Package Manager) for managing dependencies
CommonJS modules (require & module.exports).

Core Modules
fs (File System) – Read/write files
http – Create HTTP servers
path – Handle file paths
os – Interact with the operating system.

Streams & Buffers

Readable, Writable, Duplex, and Transform streams
Handling large files efficiently.

Environment variables
Using dotenv for configuration.

BOSSCODER
ACADEMY #BeTheBoss 21
 PRACTICE:

Question 1 E-commerce Product Listing

Design an e-commerce product listing page with shopping cart functionality. It

allows users to browse products, filter/sort them, and add items to their cart.
With the following key features :

Product Display : Each product is displayed in a visually appealing card

format containing: Product image, Title, Price, Short description, "Add
to Cart" button
Filtering and Sorting :
i. Users can filter products by category (e.g., Electronics, Clothing, Books).

ii. Price Sorting: Options to sort products by: Price: Low to High, Price:
High to Low. Search Functionality: Text search to find specific products.
Shopping Cart :
i. Add/Remove Items: Users can add products to cart or remove them

ii. Quantity Adjustment: Change quantities directly in the cart

iii. Cart Summary: Displays:Total number of items, Subtotal, Checkout

button

iv. Persistent Cart: Cart data persists using localStorage

BOSSCODER
ACADEMY #BeTheBoss 22
Reference :

BOSSCODER
ACADEMY #BeTheBoss 22
 05 Express.js (Backend Framework)

Express.js is a fast, minimal, and flexible web application framework built on top of
Node.js. It simplifies the process of creating server-side logic, handling routes, and
managing middleware. It is the most popular framework for building RESTful APIs in
Node.js

It is a lightweight Node.js framework used to build backend applications and APIs

It offers easy routing, middleware support, error handling, and integration with
databases.

Key Topics:

Routing
Handling HTTP methods (GET, POST, PUT, DELETE
Route parameters (/users/:id
Query parameters (/search?q=express)

Middleware
Body parsing middleware (express.json(), express.urlencoded()
Static file middleware (express.static()
Session middleware (express-session
Third-party middleware

i. CROS - Enables cros-origin requests

ii. Multer - Handles file uploads

iii. Express-session - Manages user sessions

iv. Express-rate-limit - Prevents rate-based abuse

BOSSCODER
ACADEMY
#BeTheBoss 23
 Handling Request and Response
Access request data: req.params, req.query, req.bod
Send responses: req.send(), req.json(), req.status()

Error Handling
app.use((err,req,res,next) => console.error(err.stack););

PRACTICE:

Question 1 Blog API using dynamic route

Create a backend application using Express.js that performs the following:

Blog Post Structure: Each blog post should contain

id (auto-generated or UUID)

title (string)

author (string)

content (string)

createdAt (date)
Create the following API endpoints using dynamic routing:
GET /api/posts - Return a list of all blog posts.

GET /api/posts/:id - Return a single blog post by its id.

POST /api/posts - Create a new blog post (pass data in request body).

PUT /api/posts/:id - Update a blog post by id.

DELETE /api/posts/:id - Delete a blog post by id.

Add some dummy data in the database (MongoDB) and connect the API with it

BOSSCODER
ACADEMY
#BeTheBoss 24
 06 Tools & Deployment

Git & GitHub

Git is a version control system that helps track changes in code over time.

GitHub is a cloud-based hosting platform for Git repositories, enabling collaboration,

version management, and open-source contribution.

Key Topics:

Version Control System

Middleware
git init - initializes a new Git repositor
git clone <url> - copies a remote repository to your local machin
git add <file> - stages changes for commi
git commit -m "message" - saves changes with a messag
git status - shows modified/staged file
git log - displays commit history

Branching & Merging

git branch <branch-name> - creates a new branc
git checkout <branch-name> - switches to the branc
git merge <branch-name> - combines changes from one branch into another

BOSSCODER
ACADEMY #BeTheBoss 25
 Remote Repositories
git remote add origin <url> - links local repo to a remote GitHub rep
git push -u origin main - uploads local commits to GitHu
git pull - fetches remote changes and merges the
git fetch- downloads remote changes without merging
Github Features
Repositories: Stores project files and version history
Forks: Creates a personal copy of someone else’s repo
Pull Requests (PRs): Requests to merge changes into another branch/repo
Issues: Tracks bugs, enhancements, and tasks
GitHub Actions: Automates workflows (CI/CD)
GitHub Pages: Hosts static websites directly from a repo.

PRACTICE:

Question 1 Push your portfolio or blog project to GitHub

Choose one of your existing projects (Portfolio Website or Blog API)
Initialize a Git repository in your project folder
Create a .gitignore file and add entries as needed (e.g., node_modules, .env)
Create a repository on GitHub
Connect your local project to the GitHub repository using the remote URL
README.md with: Project title and description Instructions to run the project
locally Technologies used.

BOSSCODER
ACADEMY #BeTheBoss 26
 Add, commit, and push your project files to GitHub

Optional: Use GitHub Pages (if it's a frontend portfolio) to publish your site.

Deployment

Deployment is the process of making your application live and accessible

over the internet.

Key To p i c s :

Frontend deployment

Hosting static frontend assets (HTML, CSS, JS — like from React/Vite)

Platforms like Vercel, Netlify, GitHub Pages, etc.

Backend deployment

Hosting your server-side logic (Express.js, Django, etc.)

Use services like Render, Railway, Fly.io, Heroku.

Database deployment

Hosting your database so it can be accessed by your backend online

Use MongoDB Atlas for cloud-based MongoDB.

Environment Variables

Never hard-code sensitive info like DB UR s, AP I I keys, or secrets

Create a .env file locally for keys, secrets and credential

Set these variables in the dashboard under "

Environment " settings.

BOSSCODER
ACADEMY
# BeT h eBoss
27
PRACTICE:

Question 1 Full-Stack App Deployment

Deploy backend on Render, frontend on Vercel, and use MongoDB

Atlas for the database with the following setup
Create or use an existing backend (e.g., Blog API,E-commerce)
Connect it to MongoDB Atlas using Mongoose
Deploy the backend on Render and add proper environment variables
on Render for: MONGODB_URI, PORT
Create or use an existing frontend project and make API calls to your
deployed backend (e.g., fetch blog posts or products)
Deploy the frontend on Vercel and make sure the frontend is calling
the correct Render backend URL
Ensure the deployed frontend can communicate with the deployed
backend and the backend can successfully read/write data to
MongoDB Atlas.

BOSSCODER
ACADEMY #BeTheBoss 28
 07 Assignments

1. Task Management App (Advanced To-Do List)

A full-stack task management application where users can:

Create, edit, and delete tasks
Organize tasks into categories (Work, Personal, Study)
Mark tasks as complete/incomplete
Filter tasks by status (All, Completed, Pending)
User authentication (Signup, Login, Logout).

How to Build It?

Frontend (React.js)
Create components: TaskList, TaskItem, AddTask, AuthForm
Use useState, useEffect, and useContext for state management
Implement React Router for navigation (/login, /signup, /dashboard).

Backend (Node.js + Express.js)

REST API endpoints:

i. POST /api/tasks (Create task)

ii. GET /api/tasks (Fetch tasks)

iii. PUT /api/tasks/:id (Update task)

iv. DELETE /api/tasks/:id (Delete task

User authentication using JWT (JSON Web Tokens).

BOSSCODER
ACADEMY
#BeTheBoss 29
 Database (MongoDB)

Two collections: users and task

Schema for tasks:

title: String,

description: String,

category: String,

completed: Boolean,

userId: ObjectId // Reference to user who created it

Deployment

Frontend: Host on Vercel/Netlify

Backend: Deploy on Render/Railway

Database: Use MongoDB Atlas.

E-Commerce Store (Basic Amazon Clone)

A simple e-commerce platform with:

Product listing with images, prices, and descriptions

Shopping cart functionality (add/remove items)

User authentication (Signup, Login)

Checkout page (simulated payment).

BOSSCODER
ACADEMY
#BeTheBoss 30
H ow to B u i l d I t ?

Frontend (React.js)
Components: ProductList, ProductCard, Cart, Checkout
Use Redux Toolkit for cart state management
Fetch products from backend API (GET /api/products).

Backend (Node.js + Express.js)

API Endpoints:

i. GET /api/products (List all products)

ii. POST /api/cart (Add to cart)

iii. GET /api/cart (View cart items

Use Stripe API (or mock payment).

Database (MongoDB)
Collections: products, users, orders
Schema for products:

name: String,

price: Number,

description: String,

image: String,

category: String

BOSSCODER
ACADEMY
#BeTheBoss 31
 Deployment

Frontend: Vercel

Backend: Render

Database: MongoDB Atlas.

Social Media Dashboard (Mini Twitter Clone)

A lightweight social media app where users can:

Post short messages (tweets)

Like/comment on posts

Follow/unfollow users

View a feed of posts from followed users.

H ow to B u i l d I t ?

Frontend deployment

Components: Feed, Post, Sidebar, UserProfile

Use React Query for API data fetching

Real-time updates with Socket.io (optional).

Backend (Express.js)

REST API:

i. POST /api/posts (Create post)

ii. GET /api/posts (Fetch posts)

iii. POST /api/likes (Like a post)

iv. POST /api/follow (Follow a user)

BOSSCODER
A C A D E MY #BeTheBoss 32
 Authentication via JWT.

Database (MongoDB)

Collections: users, posts, likes, follows

Schema for posts:

content: String,

userId: ObjectId,

likes: Number,

comments: [{ text: String, userId: ObjectId }]

Deployment

Frontend: Netlify

Backend: Railway

Database: MongoDB Atlas.

BOSSCODER
ACADEMY
#BeTheBoss 33
 Why Bosscoder?
01 Structured Industry-
vetted Curriculum 02 1:1 Mentorship

Sessions
Our curriculum covers everything you need to get You are assigned a personal mentor currently working in
become a skilled software engineer & get placed. Top product based companies.

03 2200+ Alumni
placement 0 4
2
P
AA
4 LP

AC A K GE
VER A GE

2200+ Alumni placed at Top Product-based companies. Our Average Placement Package is 24 LPA and

highest is 98 LPA

Niranjan Bagade 10 Years Dheeraj Barik 2 Years

NICE Hike British Petroleum Infosys Hike Amazon

Software Eng. 83% Software Engineer Software Engineer 550% SDE 2
Specialist

Explore More