Node.js + React 19 + MongoDB

Complete Syllabus

10 Modules. 70+ Topics. TypeScript End-to-End.

Click any module to expand. The modern MERN stack uses TypeScript on BOTH frontend and backend — one language, one type system, shared interfaces between client and server. Every module is taught with TypeScript from day one, not bolted on later.

⭐ Node.js & TypeScript Foundations

Runtime environment, TypeScript setup, async patterns, and package management

1.1 Node.js Runtime & V8 Engine

How Node.js works: V8 engine, single-threaded event loop, non-blocking I/O, libuv. Why Node.js is fast for I/O-heavy workloads (web servers, APIs) but wrong for CPU-heavy (video encoding, ML). Node.js 22 LTS features. npm vs pnpm vs yarn — why pnpm is gaining. package.json, lockfiles, semantic versioning.

1.2 TypeScript for Node.js

tsconfig.json setup for Node.js (target: ES2022, module: NodeNext). Type annotations, interfaces, type aliases, generics, union types, enums. Utility types: Partial, Pick, Omit, Record. Typing Express routes, middleware, request/response. ts-node-dev for development, tsc for production build. Why TypeScript eliminates entire categories of bugs — undefined is not a function dies here.

1.3 Modules, File System & Streams

ES Modules (import/export) vs CommonJS (require) — use ESM. Built-in modules: fs/promises, path, url, crypto, os. Reading/writing files with async/await. Streams: readable, writable, transform, pipe — processing large files without loading into memory. Buffer for binary data. __dirname and import.meta.url in ESM.

1.4 Async Patterns: Promises, async/await, Event Emitter

Callback hell → Promises → async/await evolution. Promise.all (parallel), Promise.allSettled, Promise.race. Error handling: try/catch with async/await. EventEmitter: custom events for decoupled architecture. Understanding the event loop: microtasks vs macrotasks, nextTick vs setImmediate. "Explain the Node.js event loop" — the #1 Node.js interview question.

1.5 Environment Setup & Project Structure

Professional project structure: src/ (controllers, services, models, routes, middleware, utils), dist/ (compiled), tests/. dotenv for environment variables. ESLint + Prettier for code quality. Husky + lint-staged for pre-commit hooks. nodemon / tsx for development auto-restart. The project structure that scales from demo to production.

Placement relevance: "Explain the Node.js event loop" is THE most asked Node.js interview question. TypeScript is now expected at every product company — writing JavaScript without types signals outdated practice. Understanding async/await, streams, and the event loop is what separates "I followed a tutorial" from "I understand how Node.js works."

⭐ Express.js: REST APIs with TypeScript

Building production-grade APIs — routing, middleware, validation, and error handling

2.1 Express Setup & Typed Routing

Express with TypeScript: @types/express, typed Request/Response. Router for modular routes. Route parameters, query strings, request body — all typed. HTTP methods: GET, POST, PUT, PATCH, DELETE. Response methods: res.json(), res.status(), res.send(). Building a complete CRUD API. REST conventions: plural nouns in URLs, HTTP verbs as actions.

2.2 Middleware: Built-in, Third-Party & Custom

What middleware IS: function(req, res, next). Built-in: express.json(), express.urlencoded(), express.static(). Security: helmet (security headers), cors (cross-origin), express-rate-limit (throttling). Logging: morgan or pino. Custom middleware: auth guard, request logger, error handler. Middleware order matters — understanding the middleware chain.

2.3 Validation with Zod

Zod: TypeScript-first schema validation. Define schemas: z.object({ email: z.string().email(), age: z.number().min(18) }). Validate request body, params, query. Infer TypeScript types from Zod schemas (type User = z.infer) — single source of truth for types AND validation. Custom error messages. Why Zod replaced Joi/express-validator in the TypeScript ecosystem.

2.4 Error Handling & Async Wrapper

Express async error handling: unhandled promise rejections crash the server. asyncHandler wrapper: catch errors automatically, pass to error middleware. Global error handler: (err, req, res, next) with typed error classes. Custom error classes: AppError, NotFoundError, ValidationError, AuthError. Consistent error response format: { success: false, message, statusCode }. Never expose stack traces in production.

2.5 API Architecture: Controller → Service → Repository

Layered architecture for Express: controllers handle HTTP, services handle business logic, repositories handle data. Why layers matter: testability (mock the repository, test the service), maintainability (change database without rewriting controllers). Dependency injection pattern without a framework. TypeScript interfaces for each layer. The architecture every production Express app uses.

Placement relevance: "Build a REST API with Express" is the standard MERN interview task. Zod validation is the modern replacement for Joi — knowing it signals current practice. Layered architecture is what interviewers evaluate in code review exercises. Error handling with custom error classes is production-grade code that impresses interviewers.

MongoDB, Mongoose & Prisma

NoSQL database — schemas, relationships, aggregation, and the modern ORM option

3.1 MongoDB Fundamentals & Atlas Setup

Document-oriented: JSON-like documents (BSON). Collections vs tables, documents vs rows. MongoDB Atlas: cloud-hosted, free tier. MongoDB Compass for GUI exploration. CRUD: insertOne, find, updateOne, deleteOne. Query operators: $gt, $in, $regex, $exists. When MongoDB fits (flexible schema, rapid iteration, nested data) vs when PostgreSQL fits (complex joins, strict schema, ACID).

3.2 Mongoose: Schema, Model & Validation

Schema definition: types, required, default, enum, validate. Virtuals: computed fields (fullName from firstName + lastName). Instance methods and static methods. Middleware (hooks): pre('save'), post('remove'). Population: references between documents ($ref + populate). Index creation for query performance. Mongoose with TypeScript: typed models using schema.methods and generics.

3.3 Data Modelling: Embed vs Reference

Embedding: store related data in the same document (comment inside post). Referencing: store ObjectId and populate (user references in orders). When to embed (read together, small data) vs reference (large data, many-to-many, independent lifecycle). Denormalisation for read performance. Schema design patterns: subset, extended reference, computed. The decisions that determine whether your app is fast or slow.

3.4 Aggregation Pipeline

MongoDB's data processing pipeline: $match → $group → $sort → $project → $lookup. Equivalent of SQL GROUP BY + JOIN. Use cases: analytics (revenue by month), reports (top products), data transformation. $unwind for array flattening. $facet for multiple aggregations in one query. Aggregation pipeline is the most powerful MongoDB feature — and the most tested in interviews.

3.5 Prisma: The Type-Safe Alternative

Prisma ORM: schema.prisma file defines models, generates TypeScript client. prisma migrate for schema migrations. Prisma Client: fully typed queries — IDE autocomplete for every field. Prisma with MongoDB: full CRUD, relations, filtering. When to use Prisma (type safety, auto-completion, migrations) vs Mongoose (flexibility, middleware, community). Teaching both gives students the choice — most teams use one or the other.

3.6 Indexing, Transactions & Performance

Index types: single field, compound, text, TTL (auto-delete expired documents). explain() for query analysis. MongoDB transactions: multi-document ACID (MongoDB 4.0+). Connection pooling. Read/write concerns. Caching with Redis: cache frequently read documents, invalidate on write. "Your query is slow — how do you optimize it?" — add indexes, use projection, avoid $ne/$nin.

Placement relevance: "Explain embedding vs referencing in MongoDB" is the #1 MongoDB interview question. Aggregation pipeline questions appear at every company using MongoDB. Prisma knowledge is a differentiator — it shows awareness of the modern tooling landscape. Understanding indexing and query optimization is what separates junior from mid-level developers.

Authentication, Authorization & Security

JWT, bcrypt, RBAC, OAuth2, and securing Express APIs

4.1 JWT Authentication Flow

Register: validate input → check duplicate → hash password (bcrypt, 12 rounds) → save user → return tokens. Login: find user → compare bcrypt hash → generate access token (15 min) + refresh token (7 days). Access token in Authorization header. Refresh token in httpOnly cookie (not localStorage — XSS risk). Token verification middleware: extract → verify → attach user to request.

4.2 Password Security & Refresh Tokens

bcrypt: salt + hash, timing-safe comparison. Never store plaintext passwords. Password reset flow: generate reset token → email link → verify token → update password. Refresh token rotation: issue new refresh token on each use, invalidate old one. Token blacklisting with Redis (for logout). Rate limiting on login endpoint (prevent brute force).

4.3 Role-Based Access Control (RBAC)

Roles: admin, moderator, user. authorizeRoles('admin', 'moderator') middleware. User-role stored in database. Resource ownership: users can only edit their own posts (isOwner middleware). Permission middleware pattern: authenticate → authorize → handle request. Role hierarchy and permission inheritance.

4.4 OAuth2: Google & GitHub Login

Passport.js with Google/GitHub strategies. OAuth2 flow: redirect → provider consent → callback → create/link user. passport-google-oauth20, passport-github2. Session-based vs JWT-based after OAuth callback. When to use social login (consumer apps) vs email/password (enterprise). Connecting social accounts to existing accounts.

4.5 Express Security Hardening

helmet: sets security headers (CSP, HSTS, X-Frame-Options). cors: configure allowed origins, methods, credentials. express-rate-limit: 100 requests/15min per IP. express-mongo-sanitize: prevent NoSQL injection ($gt, $ne in request body). hpp: prevent HTTP parameter pollution. Input sanitization: never trust user input. OWASP Top 10 awareness for Node.js applications.

Placement relevance: "Implement JWT auth with refresh tokens" is the #1 MERN security interview question. bcrypt, httpOnly cookies, and token rotation signal production experience. CORS configuration is the first full-stack bug — understanding it saves hours. Security middleware (helmet, rate-limit, mongo-sanitize) shows awareness of production deployment concerns.

Advanced Backend: Real-Time, File Upload, Email & Queues

Production features beyond CRUD — Socket.io, Cloudinary, Nodemailer, BullMQ

5.1 Socket.io: Real-Time Communication

WebSocket via Socket.io: bidirectional, event-based communication. Server: io.on('connection'), socket.emit(), socket.on(). Client: io() connection, event listeners. Rooms and namespaces for chat rooms and channels. Use cases: live chat, notifications, collaborative editing, real-time dashboards. Socket.io with TypeScript: typed events. Building a real-time chat feature end-to-end.

5.2 File Upload: Multer + Cloudinary/S3

Multer middleware: file upload handling. File validation: size limits, allowed MIME types. Cloudinary (easiest) or AWS S3 (enterprise) for cloud storage. Upload flow: React form → multipart POST → Multer processes → upload to Cloudinary → return URL → save in database. Image transformation: resize, crop, format conversion via Cloudinary. Never store uploads on the server filesystem in production.

5.3 Email: Nodemailer & Templates

Nodemailer: SMTP transport (Gmail, SendGrid, AWS SES, Resend). HTML email templates with handlebars or mjml. Use cases: welcome email, password reset, order confirmation. Sending asynchronously (don't block the request). Email verification flow: register → send link with signed token → verify → activate. Resend API as a modern Nodemailer alternative.

5.4 Background Jobs: BullMQ + Redis

Why queues: don't block the API for slow tasks. BullMQ: Redis-backed job queue for Node.js. Define workers: process jobs asynchronously. Job types: immediate, delayed, repeating (cron-like). Use cases: email sending, image processing, PDF generation, data import. Bull Board: web UI for monitoring jobs. The Node.js equivalent of Celery — every production app needs background processing.

5.5 Logging, Monitoring & Health Checks

Winston or Pino for structured logging (JSON logs, log levels, file transport). Request logging middleware. Health check endpoint: GET /health → { status: 'ok', uptime, database: 'connected' }. Graceful shutdown: handle SIGTERM, close database connections, drain requests. Process managers: PM2 for production. Why console.log is not logging — and what to use instead.

Placement relevance: "Add real-time notifications to your app" and "implement file upload" are common interview extensions. Socket.io is expected for any chat or real-time feature. BullMQ for background jobs shows production awareness. Logging and health checks are what interviewers at product companies evaluate — they signal the candidate builds for production, not just for demos.

⭐ React 19: Components, Hooks & Routing

Building interactive UIs with TypeScript, Vite, and modern React patterns

6.1 React + Vite + TypeScript Setup

npm create vite@latest -- --template react-ts. Project structure: components/, pages/, hooks/, services/, types/. JSX with TypeScript. React DevTools. Hot Module Replacement. Why Vite replaced CRA: 10x faster, native ESM, better build.

6.2 Components, Props & TypeScript Typing

Functional components with typed props: interface Props { title: string; count?: number; children: React.ReactNode }. Generic components. Conditional rendering. Key prop for lists. Event handlers with TypeScript: React.ChangeEvent, React.FormEvent. Component composition patterns.

6.3 Hooks: useState, useEffect, Custom Hooks

useState with TypeScript: useState<User | null>(null). useEffect: API calls, subscriptions, cleanup. useRef for DOM access. useMemo and useCallback for performance. Custom hooks: useAuth, useFetch, useDebounce, useLocalStorage, useSocket — reusable logic extraction.

6.4 State Management: Context + Zustand

React Context for simple global state (auth, theme). Zustand for complex state: create(set => ({ count: 0, increment: () => set(s => ({ count: s.count + 1 })) })). Zustand selectors for re-render optimization. Why Zustand beats Redux for most apps: zero boilerplate, no providers, TypeScript-native.

6.5 React Router v6+

BrowserRouter, Routes, Route, Link, NavLink. Dynamic routes: /users/:id with useParams. Nested routes with Outlet (shared layout). Protected routes: auth check → render or redirect. useNavigate for programmatic navigation. Lazy loading routes: React.lazy + Suspense for code splitting. Catch-all 404 route.

Placement relevance: React with TypeScript is the #1 frontend skill in demand. Vite is the modern standard (CRA is dead). Custom hooks demonstrate advanced React understanding. Zustand is increasingly preferred over Redux — knowing it signals current practice. React Router is fundamental for any multi-page SPA. Every startup and product company expects these skills.

React ↔ Express Integration

Connecting frontend to backend — auth flow, API calls, forms, and real-time features

7.1 API Integration: Axios + React Query

Axios instance with interceptors: base URL, JWT auto-attach, 401 redirect to login. React Query (TanStack Query): useQuery for GET, useMutation for POST/PUT/DELETE. Automatic caching, background refetching, loading/error states. Optimistic updates. Infinite queries for infinite scroll. Why React Query eliminates 80% of useState + useEffect for API calls.

7.2 Auth Flow: Login → JWT → Protected UI

Login form → POST /api/auth/login → store tokens (httpOnly cookie or localStorage). AuthContext: isAuthenticated, user, login(), logout(). Axios interceptor: attach Authorization header. Protected route wrapper: check auth → render or redirect. Token refresh on 401. Registration with validation. The complete auth lifecycle shared between React and Express.

7.3 Forms: React Hook Form + Zod

React Hook Form: register, handleSubmit, errors. Zod resolver: validate forms with the SAME Zod schemas used on the backend — single source of truth. Multi-step forms. File upload forms. Displaying server-side validation errors inline. Why React Hook Form + Zod is the modern form stack: type-safe, performant, shared validation.

7.4 Real-Time UI with Socket.io Client

socket.io-client: connect, emit, on, disconnect. useSocket custom hook: manage connection lifecycle. Typing indicator, online status, live notifications. React + Socket.io: update state on incoming events. Reconnection handling. Building the React side of the real-time chat feature from Module 5.

7.5 UI: Tailwind CSS + shadcn/ui

Tailwind CSS: utility-first styling, responsive modifiers, dark mode. shadcn/ui components: Button, Input, Dialog, Toast, Table, Dropdown, Sheet. Lucide icons. Toast notifications for success/error feedback. Loading skeletons. Mobile-first responsive layout. The UI toolkit that makes apps look professional.

Placement relevance: "Build a full-stack app connecting React to your Express API" is THE MERN interview assignment. React Query is the modern standard. Shared Zod schemas between frontend and backend demonstrate end-to-end TypeScript thinking. The auth flow (React → JWT → Express) is the single most evaluated full-stack skill in interviews.

Testing: Backend & Frontend

Vitest, Supertest, React Testing Library — proving your code works

8.1 Backend Testing: Vitest + Supertest

Vitest: fast, TypeScript-native test runner (replaces Jest for Vite projects). Supertest: HTTP assertions for Express endpoints. Testing pattern: setup (seed data) → act (make request) → assert (check response). Mocking: vi.mock() for external services. Test database: in-memory MongoDB (mongodb-memory-server). Testing auth endpoints, CRUD operations, validation errors.

8.2 Frontend Testing: RTL + MSW

React Testing Library: render, screen queries, userEvent. Test behavior, not implementation. MSW (Mock Service Worker): intercept network requests, return mock data — test components that call APIs without a real backend. Testing: forms, navigation, auth state, error handling. Vitest as runner. Coverage reports. Writing tests that give confidence to refactor.

8.3 E2E Testing: Playwright (Overview)

Playwright: automate real browser testing. Test complete user flows: register → login → create post → verify. Cross-browser testing. When to use E2E vs unit vs integration. Playwright is an OVERVIEW — not a deep dive — but understanding where it fits in the testing pyramid matters for interview discussions.

Placement relevance: "Do you write tests?" separates production developers from tutorial followers. Vitest is the modern TypeScript test runner. Supertest for API testing is the Node.js standard. Having tests in your portfolio project is a differentiator. RTL + MSW shows frontend testing competence that most candidates lack.

Next.js Overview & Architecture Concepts

The React meta-framework and when to use it, plus microservices overview

9.1 Next.js: When and Why

Next.js: the React framework for production. Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR). App Router (Next.js 14+): Server Components, file-based routing. API Routes: backend endpoints inside Next.js. When to use Next.js (SEO-critical pages, marketing sites, full-stack in one repo) vs React + Express (separate frontend/backend, more control). Overview — not a deep dive — but understanding the landscape matters.

9.2 Monolith vs Microservices

Monolith (Express + React): simpler, faster to build, perfect for MVPs. Microservices: independent services, separate deployments. When to split: different scaling needs, different team ownership. Communication: REST APIs, message queues (Redis/RabbitMQ). API Gateway pattern. "Start monolith, split when needed" — the pragmatic advice. Most student projects should be monoliths.

9.3 System Design Basics

Database selection: MongoDB vs PostgreSQL vs Redis — when each fits. Caching strategy. Message queues: BullMQ for async processing. Load balancing concepts. CDN for static assets. Rate limiting. The vocabulary needed for system design interview discussions at product companies.

Placement relevance: "Have you used Next.js?" is increasingly asked. Understanding SSR vs CSR shows architectural thinking. "Monolith vs microservices" is a standard interview question. System design basics (caching, queues, load balancing) are asked at product companies — knowing the vocabulary matters even for entry-level roles.

⭐ Docker, CI/CD & Cloud Deployment

Ship your application — from local to production

10.1 Docker for MERN

Dockerfile for Node.js/Express: multi-stage build (install deps → copy source → build TypeScript → slim runtime image). Dockerfile for React: build stage (npm run build) + Nginx serve stage. docker-compose.yml: Express + MongoDB + Redis + React in one command. .dockerignore for node_modules. Docker networking: services communicate by container name. "docker compose up" runs the entire stack.

10.2 Git Workflow & GitHub

Feature branch workflow: main → feature/add-auth → PR → review → merge. Conventional commits: "feat:", "fix:", "chore:". .gitignore: node_modules, dist, .env. README with setup instructions, API docs, screenshots. Making GitHub profile interview-ready: pinned repos, clean history, descriptive READMEs.

10.3 CI/CD: GitHub Actions

On push: lint (ESLint) → typecheck (tsc) → test (Vitest) → build → deploy. Parallel jobs: backend + frontend. GitHub secrets for environment variables. Branch protection: PR must pass CI before merge. Automated deployment on merge to main. The pipeline that ensures "it works on my machine" actually works everywhere.

10.4 Cloud Deployment

Frontend: Vercel (React/Next.js, free tier, instant deploys from GitHub). Backend: Railway or Render (Node.js + MongoDB + Redis, free tier). MongoDB Atlas (cloud database, free tier). Custom domain + HTTPS. Environment variables in cloud platforms. Production checklist: CORS, rate limiting, logging, error tracking (Sentry). "Here's my live project URL" — the strongest interview statement.

Placement relevance: A deployed MERN app with a live URL is 10x more credible than a GitHub repo. Docker is expected for modern developer roles. GitHub Actions CI/CD is the most popular platform. Vercel for frontend + Railway for backend is the student-friendly deployment stack that produces production-grade results. Deployment completes the "I can build AND ship software" narrative.

Node.js + React 19 + MongoDB:JavaScript Everywhere.