Choose and implement an appropriate state management strategy for a React application — from lightweight Zustand stores to complex Redux Toolkit slices.
Design a normalised-enough MongoDB schema with Mongoose, write aggregation pipelines for analytics, and connect to Atlas for a production-grade database layer.
Module 6:JWT Authentication & WebSockets
Week 8
Core Topics
JWT structure: header, payload, signature, and token lifecycle
Registration, login, and logout flow with bcryptjs password hashing
Access tokens and refresh token rotation strategy
Protected routes middleware: token verification and user injection
WebSocket protocol vs HTTP: when to use real-time
Socket.io: rooms, namespaces, broadcasting, and disconnection handling
Building a real-time chat module using Socket.io and React
Write a test suite covering API routes and React components, set up a CI pipeline, and deploy a MERN application to live public URLs on Vercel and Railway.
Capstone Projects
Real-Time Chat Application
Problem: Build a WhatsApp-style group chat app where users register, join rooms, and exchange real-time messages with message history persisted in MongoDB.
Deliverable: A live chat application deployed on Vercel (frontend) and Railway (backend) with real-time messaging, room management, user auth, and a public GitHub repo.
Full Stack Project Management Tool
Problem: Create a Jira-lite tool where teams create projects, add tasks with priority/status/assignee, and move tasks across Kanban columns — all with role-based access.
Deliverable: A deployed Kanban project management app with drag-and-drop tasks, user roles (Admin/Member), CI/CD pipeline, and complete test coverage on API routes.
E-Commerce Storefront with Cart & Orders
Problem: Build a product catalogue with search/filter, cart management, and order placement — with an admin panel for inventory management and order status updates.
Deliverable: A live e-commerce frontend on Vercel and API on Railway, with product search, cart persistence, order history, and admin product management — live URL for portfolio.