MERN stack Roadmap
1. What is the MERN stack?
MERN stands for MongoDB, Express, React, and NodeJs, after the four key technologies that make up the stack.
2. Requirements ✨
You should have knowledge of the following:
Web - Basis knowledge of Internet, WWW, HTTP, FTP, URL, Domain etc.
(you can read this: https://en.wikipedia.org/wiki/Internet)
Code Editor: https://code.visualstudio.com, Webstorm, Notepad++, Sublime Text etc.
HTML - it is used to create the structure of web pages
(you can learn from here: https://www.w3schools.com/html/ )
CSS - it is used to style and Layout web pages.
(you can learn from here: https://www.w3schools.com/css/ )
JavaScript - it is used to add interactivity and dynamic functionality to web pages.
(you can learn from here: https://www.w3schools.com/js/ )
Note: If you don't have knowledge of HTML, CSS, and JavaScript. All of them, you should learn first.
You can skip this part if you already know HTML, CSS, JavaScript
3. Learn HTML, CSS and JavaScript
HTML
Topic Duration
Basic of HTML: tags, attributes 3 weeks (1 hour per day)
All HTML5 elements: header, footer, nav etc.
Form tag and Elements
All tags related: Image, heading, position, paragraph,
media, label, list etc.
CSS
Topic Duration
Basic of CSS - tag, class, selector 6 weeks (2 hours per day)
inline, internal, and external CSS
spacing: padding, margin
background styles
image styles
text styles
border styles
font styles
element position
display styles: float/flex/grid etc
responsive
box-shadow, text-shadow, border-radius
JavaScript
Topic Duration
Basis Javascript 16 weeks (2 hours per day)
Variable, Constant
Loops(for,while,for in)
If Statement, Switch
Data Types (String, Number, Boolean, Array)
String and Methods
Array and Methods
Math and methods
Date and methods
Operators(Arithmetic, Assignment, Logical,
Comparison, Bitwise, Ternary)
Events
Functions
Error handling/ try/catch
Advanced Javascript (ES6)
import/export module
Promise, async/await
Arrow function
map/filter/reduce/forEach methods
concept of classes in javascript
Spread Operator, Map, Set
For/Of Loop
AJAX/Fetch API/JSON
Web Storage (cookie,localStorage,sessionStorage etc)
Try to make multiple projects and use HTML, CSS, and JavaScript together. This thing will improve your
confidence.
Project Ideas
1. Create your portfolio like my website: www.ravindernegi.com
2. Create your portfolio website with responsive. so that, it can open easily on small devices (mobile, tablet etc.)
3. Create a photo slider using HTML, CSS, and javascript.
4. Create a clock using javascript
5. create a shopping cart website or create a product list page where users can see the list and detail of the product.
Show the product's images with carousel like: smartslider3.com/product-carousel
6. There are many more that you can build. Just think and gather requirements and make it a project.
4. MERN stack 💡
Need to learn the following thing to become a MERN stack developer
NodeJs
Topic Duration
What is Nodejs? 2 weeks (1 hour per day)
What is npm?
How to run Nodejs?
How to install the Node package?
Explore preinstalled Nodejs packages
fs, HTTP, request, URL, path, net, os, query string etc.
Explore concepts: import/export module, create server,
set config, file handling, send mail etc.
ReactJs
Topic Duration
JSX 10 weeks (2 hours per day)
Component, State Full and Stateless Component
State and props
Hooks (useEffect, useState, useMemo, useRef etc.)
Conditional rendering
Context API
Global State Management (Redux, React Query)
Connect API with Fetch or Axios
React Form or Forkik/Reacthooks Form library
React Event
NextJs or ReactRouter
Any UI framework MUI, Tailwind CSS, Bootstrap etc.
Conpect:
1. create a reusable component
2. Convert HTML UI into JSX
3. API integration
4. Unit test cases with(jest and react testing library)
ExpressJs
Topic Duration
How to setup ExpressJS 6 weeks (2 hours per day)
Create a Project Structure
How to use and create middleware
How to Build RestFull API
How to connect database with expressjs
How to create a data model or schema
How to create a controller/view
Explore Json based Token
Explore these packages:
body-parser, dotenv, mongoose, jsonwebtoken, cors
MongoDB
Topic Duration
How to install and run MongoDB 8 weeks (2 hours per day)
Install and Use Compass
How to run a Query in Mongodb
What is Database, Document, Collections etc
CRUD operation (Create, Read, Update, Delete) in
MongoDB
Import/Export data into MongoDB
Aggregation framework in MongoDB
How to build a schema
Indexes
Split MERN into two part
Frontend Backend
ReactJs/NodeJs Nodejs/Express
Nextjs MongoDB
6. Project Ideas
Create beautiful projects with the MERN stack
1. E-commerce Website
2. News/Blog Website
3. Appointment booking Portal
4. OTT website
5. Social Networking Website
6. Chatting website
7. Website Builder
etc.
Approximate Estimate to Learn MERN stack:
Week = 7 days
Skill Duration In Hours
HTML 3 weeks * 1 hr 21
CSS 6 weeks * 2 hrs 84
Javascript 16 * 2 hrs 224
Nodejs 2 weeks * 1 hrs 14
ReactJs 10 weeks * 2 hrs 140
ExpressJs 6 weeks * 2 hrs 84
MongoDB 8 weeks * 2 hrs 112
Total 51 weeks 679 hrs
How long it takes to learn? = total course duration / your devoted hrs
Example:
1. Total Days: 679 / 4 hrs per day = 169.7 days
2. Total Month: 169.7 / 30 days = 5.65 month
Thank You
Ravinder Negi 💜
www.youtube.com/@codewithnegi
www.ravindernegi.com
