MernStack Training

 

📘 Module 1: Frontend Basics – HTML, CSS, JS (2 Weeks)
✅ HTML5
• Page structure, tags, and semantics
• Forms, inputs, tables
• Media embedding, SEO tags
✅ CSS3
• Box model, layout (Flexbox, Grid)
• Media queries for responsiveness
• CSS animations & transitions
✅ JavaScript ES6+
• Variables (let, const), data types
• Functions, arrow functions, callbacks
• DOM manipulation, events
• Arrays, Objects, Map, Filter, Reduce
• Promises & async/await

---

⚛️ Module 2: React.js – Frontend Framework (3–4 Weeks)
✅ React Fundamentals
• JSX and Virtual DOM
• Components (functional & class-based)
• Props & State
• Event Handling
✅ Hooks (React 16.8+)
• useState, useEffect
• useRef, useContext, useReducer
✅ Routing & Forms
• React Router DOM (<Route>, <Link>, useNavigate)
• Controlled vs uncontrolled components
• Form handling & validation
✅ API Integration
• Fetching data using fetch() and axios
• Displaying and managing remote data
✅ Advanced React
• Conditional rendering
• Lifting state up
• Component reuse and composition
• Custom Hooks

---

🔗 Module 3: Node.js – Backend Runtime (2 Weeks)
✅ Node.js Basics
• Installing Node & npm
• Node core modules (fs, http, path)
• Creating local server
• Working with JSON & environment variables
✅ npm & Package Management
• Installing & using packages
• package.json, scripts
✅ Async Patterns
• Callbacks, Promises, async/await

---

⚙️ Module 4: Express.js – Web Framework (2 Weeks)
✅ Express Fundamentals
• Creating an Express app
• Routing (GET, POST, PUT, DELETE)
• Middleware (custom & built-in)
• Serving static files
• Request & response objects
✅ REST API Development
• Building RESTful APIs
• Status codes and error handling
• Route parameters & query strings
• CORS and API security basics

---

💾 Module 5: MongoDB & Mongoose – NoSQL Database (2 Weeks)
✅ MongoDB Basics
• NoSQL vs SQL
• Documents, collections
• MongoDB Atlas setup
• CRUD operations (Insert, Find, Update, Delete)
✅ Mongoose
• Defining schemas and models
• Data validation
• Relationships (referencing, population)
• Querying with Mongoose

---

🧠 Module 6: Full-Stack Integration (2 Weeks)
✅ Connecting Frontend to Backend
• Fetching backend APIs in React
• Axios integration
• Managing loading, errors, and data state
✅ Authentication & Authorization
• User registration & login
• Hashing passwords with bcrypt
• JWT (JSON Web Tokens)
• Protected routes on frontend & backend

---

🚀 Module 7: Deployment & DevOps (1 Week)
✅ Git & GitHub
• Git basics: clone, add, commit, push
• Branching and merging
• GitHub repositories
✅ Deployment
• Frontend: Vercel or Netlify
• Backend: Render or Railway
• MongoDB: Atlas setup
• Environment variables & build optimization

---

🎯 Module 8: Capstone Project (2 Weeks)
Build a complete MERN app, for example:
• E-commerce site
• Task Manager
• Blog platform
• Job Portal
Features to include:
• Full CRUD (Create, Read, Update, Delete)
• Authentication (login/signup)
• Role-based access (admin/user)
• Form validation
• Responsive UI
• API consumption from React frontend

---