A complete full-stack development course repository covering 45+ lectures — from raw HTML to production-grade MERN applications with authentication, file uploads, and RESTful APIs.
This isn't just a single project — it's a structured learning path through modern web development. Each lecture folder is a standalone milestone, progressively introducing new concepts, from basic React components all the way to a full e-commerce backend with MongoDB, JWT auth, and Multer image uploads.
Built with real-world patterns in mind: MVC architecture, modular routing, middleware, context API, Redux, and more.
| Lecture | Topic |
|---|---|
| Lecture 1 | HTML Introduction |
| Lecture 2 | JSX Introduction |
| Lecture 3 | React Components |
| Lecture 4 | Project Setup with Vite |
| Lecture 5 | useState Hook |
| Lecture 6–7 | Todo App (v1 & v2) |
| Lecture 8 | Todo App Refactor (modular components) |
| Lecture 9 | Todo App + LocalStorage |
| Lecture 10 | useContext Hook |
| Lecture 11 | Joke App (API fetch) |
| Lecture 12 | Users App |
| Lecture | Topic |
|---|---|
| Lecture 14 | E-Commerce Concept (Cart Context) |
| Lecture 15 | Expense Tracker (with Charts) |
| Lecture 16 | GitHub Profile Finder |
| Lecture 17 | Movie Search App (TMDB API) |
| Lecture 18 | AI Assistant (Zarvis Mini) |
| Lecture 19 | Calculator |
| Lecture 20 | JSON Formatter |
| Lecture 23 | Box Shadow Generator |
| Lecture 24 | Image Upload & Preview |
| Lecture 25 | QR Code Generator |
| Lecture 26 | Infinite Scroll |
| Lecture 27 | Quiz App |
| Lecture | Topic |
|---|---|
| Lecture 28 | Intro to Backend / Express Server |
| Lecture 29 | Local API + React Frontend |
| Lecture 30 | Pure Node.js Server (no framework) |
| Lecture 31 | Bun Runtime Introduction |
| Lecture 32 | API with URL Params |
| Lecture 33 | Server + MongoDB Backend |
| Lecture 34 | MongoDB Connection (2 approaches) |
| Lecture 35 | .env / dotenv Configuration |
| Lecture 36 | MVC Architecture Setup |
| Lecture | Topic |
|---|---|
| Lecture 38 | Full CRUD (Employee App v1) |
| Lecture 39 | Full CRUD (Employee App v2) |
| Lecture 40 | bcrypt Password Hashing |
| Lecture 41 | bcrypt + Login Flow |
| Lecture 42 | Auth Middleware + Protected Routes |
| Lecture 43 | Multer Image Upload System |
| Lecture 44 | NodeMailer + OTP Email |
| Lecture 45 | BiKart — Full E-Commerce App |
| Project | Description |
|---|---|
PomoDoro |
Pomodoro Timer with music |
ReactRouter |
Multi-page SPA with React Router |
TypingMaster |
Typing speed test app |
Frontend
- React.js + Vite
- JavaScript ES6+
- Tailwind CSS / Custom CSS
- React Router DOM
- Redux Toolkit (BiKart)
- Context API
- Axios / Fetch API
Backend
- Node.js
- Express.js
- MongoDB + Mongoose
- bcrypt (password hashing)
- JWT (JSON Web Tokens)
- Multer (file/image uploads)
- NodeMailer (email/OTP)
- dotenv
Dev Tools
- Git & GitHub
- Postman
- VS Code / GitHub Codespaces
- npm / Bun
The most complete project in this repo — a full e-commerce application with:
- 🛒 Product listing, detail pages, and cart
- 👤 User registration, login, and profile
- 🔐 JWT authentication + protected routes
- 🖼️ Product image upload via Multer
- 📦 Redux Toolkit for cart state management
- 🗄️ MongoDB with full CRUD via RESTful API
- 🧱 MVC folder structure (Controllers, Models, Routes, Middleware)
mern-fullstack/
│
├── Lecture-1 to Lecture-27/ # React frontend projects
│ └── src/
│ ├── App.jsx
│ ├── components/
│ └── pages/
│
├── Lecture-28 to Lecture-45/ # Full stack (Backend + Frontend)
│ ├── Backend/
│ │ ├── server.js
│ │ ├── Controller/
│ │ ├── Model/
│ │ ├── Router/
│ │ └── Middleware/
│ └── Frontend/
│ └── src/
│
├── PomoDoro/
├── ReactRouter/
├── TypingMaster/
└── README.md
Clone the repository
git clone https://github.com/ajitdev01/mern-fullstack.git
cd mern-fullstackNavigate to any lecture folder
cd Lecture-45-BiKart/BackendInstall dependencies & run backend
npm install
node server.js
# or
npm run devInstall dependencies & run frontend
cd ../Frontend
npm install
npm run devEach lecture has its own
package.json— they run independently.
After completing this course path, you will have hands-on experience with:
- ✅ Building and structuring React apps from scratch
- ✅ React hooks —
useState,useEffect,useContext,useRef - ✅ React Router for multi-page SPAs
- ✅ Redux Toolkit for global state management
- ✅ REST API design with Express.js
- ✅ MongoDB CRUD with Mongoose
- ✅ User authentication (bcrypt + JWT)
- ✅ File upload handling with Multer
- ✅ Sending emails via NodeMailer
- ✅ MVC architecture in Node.js
- ✅ Connecting frontend and backend with Axios
- Role-based authorization (admin/user)
- Refresh token implementation
- Payment gateway integration
- Docker containerization
- CI/CD pipeline setup
- Deployment (Vercel + Render / Railway)
- Unit and integration testing
Ajit — @ajitdev01
Built as a structured full-stack learning journey. Every lecture is a stepping stone toward production-ready MERN development.
⭐ Star this repo if it helped you or inspired your own learning path!