MERN Stack

70005000

 Week 1: Frontend with React.js (Days 1–7)

📍 Day 1 – Web Dev Overview + JavaScript Refresher

  • HTML/CSS recap
  • Modern JavaScript (ES6+): let/const, arrow functions, promises
  • Git/GitHub intro

📍 Day 2 – React Basics

  • What is React? How it works (DOM, Components)
  • Create React App setup
  • JSX, Functional Components, Props

📍 Day 3 – React State & Events

  • useState hook
  • Handling form inputs, buttons
  • Conditional rendering

📍 Day 4 – React Lists & Forms

  • Rendering lists with .map()
  • Controlled components
  • Form validations (basic)

📍 Day 5 – React Router

  • Setting up react-router-dom
  • Route, Link, useParams, useNavigate
  • Nested routes

📍 Day 6 – useEffect & API Calls

  • useEffect hook
  • Fetching data from APIs
  • Handling loading and error states

📍 Day 7 – React Mini Project

  • Build a Blog UI / Todo App / Weather App
  • Use React Router + API calls

Week 2: Backend with Node.js + Express + MongoDB (Days 8–14)

📍 Day 8 – Intro to Node.js & Express

  • What is Node.js?
  • Creating your first server
  • Routes, Middleware, Nodemon

📍 Day 9 – REST API Basics

  • REST principles
  • CRUD endpoints (GET, POST, PUT, DELETE)
  • JSON responses

📍 Day 10 – MongoDB & Mongoose

  • MongoDB basics (collections, documents)
  • Connect using Mongoose
  • Create Models and Schemas

📍 Day 11 – CRUD with MongoDB

  • Create, Read, Update, Delete documents
  • Postman testing
  • Error handling

📍 Day 12 – Authentication with JWT

  • Register/Login API
  • Hashing with bcrypt
  • JWT token creation and verification

📍 Day 13 – Middleware & Validation

  • Custom middleware
  • Input validation with express-validator or Joi
  • Protecting routes

📍 Day 14 – Backend Mini Project

  • Build an Auth + CRUD API (e.g., Notes app or Task manager)
  • Test with Postman

 Week 3: Full-Stack Integration + Deployment (Days 15–21)

📍 Day 15 – Connect Frontend to Backend

  • Proxy setup in React
  • Axios for HTTP requests
  • Full-stack Login/Register

📍 Day 16 – Protected Routes & Local Storage

  • Store JWT in localStorage
  • Conditional UI based on login state
  • Logout and token expiration handling

📍 Day 17 – Advanced Features

  • Pagination, Search, Filtering
  • User roles & permissions
  • File uploads (e.g., user profile pics)

📍 Day 18 – UI with Tailwind/Bootstrap

  • Setup styling framework
  • Create clean, responsive layouts
  • Reusable components

📍 Day 19 – Final Project Build

Choose one:
  • Blog App
  • E-commerce Store
  • Notes App with login
  • Social Media Dashboard

📍 Day 20 – Deployment (Full Stack)

  • Deploy frontend on Vercel/Netlify
  • Deploy backend on Render/Railway/Heroku
  • MongoDB Atlas setup

📍 Day 21 – Wrap-up & Career Prep

  • Push project to GitHub
  • Build resume + portfolio
  • MERN interview questions
  • Freelancing tips (Fiverr, Upwork)

🧰 Tech Stack & Tools:

  • Frontend: React, React Router, Axios, Tailwind/Bootstrap
  • Backend: Node.js, Express.js, JWT, bcrypt, Mongoose
  • Database: MongoDB + MongoDB Atlas
  • Deployment: Vercel, Render, GitHub

🎓 What You’ll Have by Day 21:

✅ One complete full-stack project ✅ RESTful API built from scratch ✅ GitHub portfolio ✅ Ready for internships or freelance jobs

Course Info