All roadmaps

Diploma roadmap

MERN Stack

12 weeks · 9 stages

What you will learn

Master both sides of the stack: production APIs and the React apps that consume them

Build an elegant portfolio of full-stack projects throughout the diploma

Capstone: ship a full-stack e-commerce app — API, payments, dashboard and a live URL

Skills covered

  • Modern JavaScript (ES6+) + TypeScript
  • Node.js & the event loop
  • Express.js (routing, middleware, errors)
  • MongoDB & Mongoose
  • Auth, security & real-time (JWT, WebSockets)
  • React + Hooks
  • React Router & app architecture
  • State (Context, Zustand) & React Hook Form + Zod
  • Tailwind, testing and deployment

Achieve expertise and proficiency as a professional full-stack MERN developer.

Backend
01

JavaScript, TypeScript & Node Foundations

  • Modern JavaScript and TypeScript basics
  • The Node.js event loop, streams and buffers
  • Git like a pro, npm scripts, environment config
  • Lab: build a tiny CLI, then ship a tiny HTTP server
02

APIs with Express & Data with MongoDB

  • Routes, middleware chains, REST design
  • Validate everything (Zod / Joi), handle errors once
  • Swagger docs for your API
  • Mongoose schemas, indexes and aggregation
  • Project: build a Notes API, then a Blog API
03

Auth, Security, Files & Real-Time

  • JWTs, refresh tokens, password hashing
  • Roles & access control
  • Defend against XSS, CSRF and NoSQL injection
  • Uploads, image processing, WebSockets and queues
  • Project: chat + notifications on top of your API
04

Performance, Testing & Deployment

  • Redis caching, pagination, compression, rate limits
  • Automated tests for routes and services
  • Dockerize, deploy and observe in production
Frontend
05

Web Fundamentals & Modern JavaScript in the Browser

  • How the web works, the DOM, semantic HTML
  • Responsive CSS with Flexbox & Grid, media queries
  • Events, fetch(), JSON and async patterns
  • Project: responsive profile page + Movie Search with a public API
06

Enter React — Components, State & Effects

  • JSX, components, props, composition
  • useState, lists and keys, lifting state
  • useEffect for data fetching, loading & error UI
  • Custom hooks for reuse
  • Sprint: product cards with filters & favorites
07

Routing, Forms & App Structure

  • React Router: nested routes, params, protected routes
  • Layouts, 404s, folder structure and module boundaries
  • React Hook Form + Zod validation, accessible inputs
  • Lab: multi-page app with details pages and sign-up / login
08

State, Styling & UI Patterns

  • Context API and global state (cart, theme, auth token)
  • Zustand stores, selectors and persistence
  • Tailwind, shadcn/ui, reusable modals, tabs and toasts
  • Accessibility: WCAG basics, keyboard nav, ARIA
  • Lab: persistent cart & theme on top of your own API
09

Full-Stack Capstone & Launch

  • Connect your React app to your Express + MongoDB API
  • Auth flows, carts, orders and payments end to end
  • Tests for critical flows, Lighthouse and a11y audit
  • Deploy API and client with a live URL and docs
  • Capstone: mentor code review and final demo day

Graduation Party

The end of the road: demo your project, collect your certificate, and leave with a portfolio — alongside your cohort and mentors.

Reserve your seat