Full-Stack + System Design

Job-Ready Learning Roadmap

Module-wise map to the best FREE resources (YouTube-first) — JavaScript → Backend → System Design →
Frontend → Deployment

7 Phases • ~70 Modules • ~500–600 hours • 100% Free Resources

Phase 1 — JavaScript Mastery
Goal: go deeper than "syntax" — understand how JS actually runs, so you're interview-ready and framework-ready.

Resources used in this phase

Resource Creator Link Duration Level

R1 JavaScript Full Course for [Link]

Open 3.5–7 hrs Beginner
Beginners (Beau Carnes / Scrimba)

R2 Namaste JavaScript Intermediate

Akshay Saini Open ~14 hrs
(Season 1 + 2) –Advanced

R3 What the heck is the event Philip Roberts (JSConf

Open 26 min Intermediate
loop anyway? EU)

R4 JavaScript30 (30 vanilla-JS Wes Bos (free, not Beginner–

Open ~15 hrs
build-alongs) YouTube) Intermediate

Module-wise Study Map

Module Study From (module-wise) Duration Level

Module 1 R1 — Introduction to JavaScript section ~30 min Beginner

Module 2 R1 — Fundamentals: variables, types, operators ~1 hr Beginner

Module 3 R1 — Control flow: conditionals & loops ~1 hr Beginner

Module 4 R2 — Execution Context, Hoisting, Scope episodes ~2 hrs Intermediate

Module 5 R2 — Call Stack & Closures episodes ~2 hrs Intermediate

Module 6 R1 (Arrays/Strings) + R2 (Higher-Order Functions ep.) ~2 hrs Beginner–Intermediate

Module 7 R1 (Objects/JSON) + R2 (Prototype episode) ~1.5 hrs Beginner–Intermediate

Module 8 R1 — ES6+ section (destructuring, spread, modules, Map/Set) ~1.5 hrs Intermediate

Module 9 R2 — this keyword, Prototypal Inheritance, Classes episodes ~2 hrs Intermediate

Module 10 R2 — Callbacks, Promises, async/await episodes ~2.5 hrs Intermediate

Module 11 R2 — Event Loop episode + R3 (Philip Roberts talk) ~1.5 hrs Intermediate–Advanced

Module 12 R1 — DOM Manipulation section ~1 hr Beginner

Module 13 R1 — Events section (bubbling, delegation) ~1 hr Beginner–Intermediate

Module 14 R1 (Fetch/AJAX) + R2 (call/apply/bind episode) ~2 hrs Intermediate

Added Recommendations (not in original roadmap, industry-expected)

● JavaScript design patterns & clean-code basics (module, revealing module, singleton) — useful before OOP
interviews.
Hands-on Practice
● Work through JavaScript30 (R4) alongside Modules 6–14 — every mini-project uses DOM + events + async.
● Solve 3–5 problems per topic on freeCodeCamp's JS Algorithms & Data Structures curriculum.
● Do the 10 JS projects listed in your roadmap only after finishing Modules 1–11 (don't jump ahead).

Phase Capstone Project

Build a small "JS-only" app that touches every module: a Weather/Expense-Tracker/Quiz app using Fetch API + DOM
updates + localStorage + async/await + custom error handling. No framework allowed — this is the proof you
understand vanilla JS.

Common Beginner Mistakes

● Memorizing syntax without understanding execution context/closures → fails in interviews. Fix: always ask
"what does the call stack look like right now?"
● Skipping the Event Loop because it "feels theoretical" → causes bugs with async code later. Watch R3 even if it
feels repetitive.
● Learning DOM/events before closures/scope → makes debugging real apps confusing. Follow the module order
above.

Estimated Study Time

6–8 weeks @ 12–15 hrs/week ≈ 90–110 hours total.

Phase 2 — Backend Mastery

Goal: build real REST APIs with Node, Express, MongoDB, auth and file uploads — the way production codebases actually
look.

Resources used in this phase

Resource Creator Link Duration Level

R1 Chai aur JavaScript Hitesh Choudhary — Beginner →

Open ~35–40 hrs
Backend (full series) Chai aur Code Advanced

Beginner–
R2 (Alt) Master NodeJS Piyush Garg Open ~15 hrs
Intermediate

R3 (Alt) Complete NodeJS + Complete Coding by

Open ~20 hrs Beginner
ExpressJS + MongoDB Course Prashant Sir

R4 Production RAG with

[Link] Open ~4 hrs Intermediate
LangChain & Vector Databases

[Link] ~24 hrs (pick

R5 Agentic AI using LangGraph Intermediate
(channel — search this Open relevant
— Build AI Agents –Advanced
title) parts)

Module-wise Study Map

Module Study From (module-wise) Duration Level

Module 1 R1 — Backend intro, client-server, [Link] internals ~2 hrs Beginner

 Module Study From (module-wise) Duration Level

Module 2 R1 — [Link] basics, CommonJS modules ~1.5 hrs Beginner

Module 3 R1 — File System (fs), async vs sync in Node ~1.5 hrs Beginner

Module 4 R1 — Building an HTTP server from scratch ~2 hrs Beginner

Module 5 R1 — Introduction to [Link] ~2 hrs Beginner

Module 6 R1 — Routing, middleware, request lifecycle ~2.5 hrs Beginner–Intermediate

Module 7 R1 — REST API design, CRUD, error handling ~3 hrs Intermediate

Module 8 R1 — MongoDB basics, CRUD in MongoDB ~2.5 hrs Beginner

Module 9 R1 — Mongoose schemas, models, validation ~3 hrs Intermediate

R1 — JWT auth, bcrypt hashing, protected routes (flagship

Module 10 ~4 hrs Intermediate
section)

Module 11 R1 — Multer file uploads + Cloudinary ~2 hrs Intermediate

~6–8 hrs
Module 13 R4 (RAG + Vector DB) + R5 (AI Agents) Intermediate–Advanced
(selected parts)

Added Recommendations (not in original roadmap, industry-expected)

● Postman / Thunder Client for API testing — used constantly through R1's series.
● Zod or Joi for request validation — modern replacement for hand-written validation logic.

Hands-on Practice
● Rebuild 2–3 REST APIs from scratch without following along (todo app, blog API, e-commerce-lite API).
● Test every endpoint in Postman and save a public collection — great to link in your resume.
● Add JWT auth + file upload to at least one of your own APIs, not just the tutorial project.

Phase Capstone Project

Build the full "video-hosting style backend" project used throughout the Chai aur Backend series (auth, subscriptions,
uploads, aggregation pipelines) and add one AI feature — semantic search over content using embeddings (from Module
13).

Estimated Study Time

6–8 weeks @ 12–15 hrs/week ≈ 90–110 hours total.

Phase 3 — System Thinking & Backend Scaling Basics

Goal: move from "it works on my laptop" to "it works under real traffic" — rate limiting, caching, real-time, and basic
scaling intuition.

Resources used in this phase

Resource Creator Link Duration Level

R1 System Design (full playlist) Piyush Garg Open ~10 hrs Beginner–
 Resource Creator Link Duration Level

Intermediate

[Link] Beginner–
R2 [Link] / WebSockets (channel — search Intermediate
Open ~1.5–2 hrs
Crash Course '[Link] Crash
Course')

Module-wise Study Map

Module Study From (module-wise) Duration Level

Module 1 R1 — What is System Design, scale, monolith vs microservices ~1 hr Beginner

Module 2 R1 — Bottlenecks, horizontal vs vertical scaling ~1 hr Beginner

R1 — Rate limiting concept + Express middleware

Module 3 ~1.5 hrs Intermediate
implementation

Module 4 R1 — MongoDB indexes, replication & sharding (basic intuition) ~1.5 hrs Intermediate

Module 5 R1 — Caching fundamentals, intro to Redis, cache invalidation ~1.5 hrs Intermediate

Module 6 R2 — WebSockets vs polling vs SSE + [Link] implementation ~2 hrs Intermediate

Module 7 R1 — Applied system-design thinking for a real feature ~1.5 hrs Intermediate

Hands-on Practice
● Add a rate limiter middleware to the backend project from Phase 2.
● Wrap one expensive DB query with Redis caching and measure the speed difference.
● Build a small real-time feature — live notifications or a chat box — using [Link].

Phase Capstone Project

Take your Phase 2 backend project and upgrade it: add rate limiting on the login route, Redis caching on a read-heavy
endpoint, and one real-time feature (e.g. live order status). This mirrors the roadmap's "build one project" instruction.

Estimated Study Time

3–4 weeks @ 10–12 hrs/week ≈ 35–45 hours total.

Phase 4 — Advanced System Design (Internals + HLD)

Goal: interview-grade system design — quantitative scaling, DB internals, search, caching, messaging, and design
patterns.

Resources used in this phase

Resource Creator Link Duration Level

R1 System Design (full playlist, Intermediate

Gaurav Sen Open ~15–20 hrs
30+ videos) –Advanced

R2 System design explainer ByteByteGo Open Ongoing Intermediate

Resource Creator Link Duration Level

videos (CDN, sharding, caching, library, ~10

messaging) hrs relevant

R3 Database & backend Open Ongoing Advanced

internals deep-dives (Kafka, Hussein Nasser library, ~8
Elasticsearch, indexing) hrs relevant

[Link] Open Intermediate

R4 Elasticsearch / Apache ~3–4 hrs
(channel — search each
Kafka full courses each
title)

Module-wise Study Map

Module Study From (module-wise) Duration Level

Module 1 R1 — Scalability numbers, CAP theorem, latency vs throughput ~2 hrs Intermediate

Module 2 R1 (API Gateway, LB) + R2 (L4 vs L7, reverse proxy explainers) ~2.5 hrs Intermediate

R1 — Replication, sharding, consistent hashing (his signature

Module 3 ~3 hrs Advanced
video)

R3 (MongoDB/storage-engine internals) + R2 (B+ Tree indexing

Module 4 ~2.5 hrs Advanced
explainer)

Module 5 R4 — Elasticsearch full course + R3 (inverted index deep-dive) ~4 hrs Advanced

Module 6 R1 (caching strategies) + R2 (Redis internals, eviction policies) ~2 hrs Intermediate–Advanced

R4 — Apache Kafka full course + R3 (Kafka internals: partitions,

Module 7 ~4 hrs Advanced
offsets)

Module 8 R1 — Rate limiting algorithms (Token/Leaky Bucket) at scale ~1.5 hrs Advanced

Module 9 R2 — Strangler pattern, SAGA, CQRS, Circuit Breaker explainers ~2.5 hrs Advanced

R2 — CDN, object storage (S3), media pipelines,

Module 10 ~2.5 hrs Advanced
recommendation systems

Module 11 R3 — Logging, metrics, distributed tracing fundamentals ~1.5 hrs Intermediate–Advanced

Module 12 R1 — Security in system design, API protection, attack patterns ~1.5 hrs Intermediate–Advanced

Added Recommendations (not in original roadmap, industry-expected)

● "System Design Interview" Vol. I & II by Alex Xu — the standard free-to-borrow reference book most HLD
YouTubers base their content on; pairs perfectly with R1/R2.

Hands-on Practice
● After every 2–3 modules, do a mock design (whiteboard/Excalidraw) for a classic problem: URL shortener →
Instagram feed → WhatsApp → Uber.
● Implement consistent hashing and a token-bucket rate limiter in code, not just on paper.
● Read (don't just watch) one real engineering blog post per topic — Netflix Tech Blog, Uber Engineering, Discord
Engineering.
Phase Capstone Project
Write a full HLD document (like a real interview answer) for a system of your choice — requirements, back-of-envelope
estimation, high-level architecture diagram, deep-dive into 2 components, and trade-offs. This becomes a portfolio
artifact for interviews.

Estimated Study Time

6–8 weeks @ 10–12 hrs/week ≈ 65–85 hours total.

Phase 5 — Frontend Development (React, TypeScript, Tailwind)

Goal: ship a production-style React front-end — typed, styled, connected to your own backend and auth flow.

Resources used in this phase

Resource Creator Link Duration Level

R1 Chai aur React (full series, Hitesh Choudhary — Beginner →

Open ~30 hrs
project-based) Chai aur Code Advanced

[Link]
(channel — search Beginner–
R2 TypeScript full course Open ~5 hrs
'TypeScript Course for Intermediate
Beginners')

R3 Tailwind CSS tutorial

The Net Ninja Open ~3 hrs Beginner
playlist

Module-wise Study Map

Module Study From (module-wise) Duration Level

Module 1 R1 — Why React, Virtual DOM, Vite project setup ~1.5 hrs Beginner

Module 2 R1 — JSX, components, props, conditional rendering, lists ~2.5 hrs Beginner

Module 3 R1 — useState, controlled components, lifting state up ~2 hrs Beginner

Module 4 R1 — useEffect, data fetching, cleanup, common mistakes ~2 hrs Intermediate

Module 5 R1 — useRef, useMemo, useCallback, custom hooks ~2.5 hrs Intermediate

Module 6 R1 — React Router: dynamic & protected routes ~2 hrs Intermediate

R1 — Connecting to your Phase-2 backend, JWT login/logout

Module 7 ~2.5 hrs Intermediate
flow

Module 8 R2 — TypeScript fundamentals: types, interfaces, functions ~2.5 hrs Beginner–Intermediate

Module 9 R2 (typing patterns) + R1 (Chai aur React uses TS in later videos) ~2 hrs Intermediate

Module 10 R3 — Tailwind CSS: utility classes, flex/grid, responsive design ~3 hrs Beginner

R1 — Redux Toolkit crash course (store, slices, async thunks) +

Module 11 ~2.5 hrs Intermediate
Context API

R1 — Forms, validation, UX patterns (built into the series'

Module 12 ~1.5 hrs Intermediate
projects)
 Module Study From (module-wise) Duration Level

Module 13 R1 — Re-renders, memoization, lazy loading, code splitting ~1.5 hrs Intermediate–Advanced

Added Recommendations (not in original roadmap, industry-expected)

● React Query / TanStack Query — the modern industry-standard replacement for hand-rolled data-fetching +
loading/error state (used far more than raw Redux for server state in 2026 job postings).

Hands-on Practice
● Rebuild one Chai aur React project on your own, in TypeScript, styled with Tailwind, without pausing the video.
● Connect your React app to the backend you built in Phase 2 end-to-end (real login, real API calls).
● Use React DevTools to inspect unnecessary re-renders and fix at least 2 with memoization.

Phase Capstone Project

A typed, styled, full-stack "mini SaaS" front-end: auth (login/signup/protected routes), a dashboard that fetches and
displays data from your own API, global state via Redux Toolkit, and fully responsive Tailwind UI.

Estimated Study Time

6–7 weeks @ 12–15 hrs/week ≈ 85–100 hours total.

Phase 6 — Capstone Projects

These two projects combine everything from Phases 1–5. No new courses are needed here — this is where you apply
what you've already studied. Use the legends above (especially R1 of Phases 2–5, plus Docker/AWS from Phase 7) as
your reference material while building.

Project 1 — Cloud Video Storage System (S3-like)

● Backend: your Phase 2 [Link]/Express skills + Multer→direct-to-cloud uploads.
● Presigned URLs & basic transcoding: follow AWS S3 docs (free) —
[Link]
● HLS streaming: "HLS Video Streaming" concept videos — search freeCodeCamp / Piyush Garg channels for 'HLS
video streaming [Link]'.
● Frontend: React + TypeScript + Tailwind (Phase 5 stack).

Project 2 — Quick Commerce Platform (Blinkit-style + AI)

● Full CRUD + order state machine: Phase 2 (Chai aur Backend) patterns.
● Real-time rider tracking: [Link] (Phase 3, Module 6).
● Search + Elasticsearch: Phase 4, Module 5.
● Semantic search & AI agent: Phase 2, Module 13 resources (R4/R5).
● Frontend: React + TypeScript + Tailwind + Redux Toolkit (Phase 5).

Estimated Time
4–6 weeks @ 15–20 hrs/week ≈ 90–120 hours total (both projects combined).
Phase 7 — Deployment & Production Setup
Goal: ship your projects the way production systems actually run — Docker, Nginx, HTTPS, and real cloud deployment.

Resources used in this phase

Resource Creator Link Duration Level

R1 Git & GitHub for Beginners

[Link] Open ~1 hr Beginner
– Crash Course

R2 Master Docker
Beginner–
Containerisation & Piyush Garg Open ~8 hrs
Intermediate
Deployments

R3 Deploying [Link] apps on Piyush Garg /

Open ~2–3 hrs Intermediate
AWS EC2 (search on channel) [Link]

R4 Nginx + reverse proxy

fundamentals (search 'Nginx [Link] Open ~1–2 hrs Intermediate
crash course')

R5 HTTPS, TLS & Let's Encrypt

~1 hr reading
setup (official docs — most Let's Encrypt / Certbot Open Intermediate
+ setup
reliable, always current)

Module-wise Study Map

Module Study From (module-wise) Duration Level

Module 1 R1 — Git basics, branching, merging, GitHub collaboration ~1 hr Beginner

R2 (env vars in Docker context) + [Link] for

Module 2 ~1 hr Beginner
secrets/env best practice

R2 — Docker fundamentals, Dockerfile, containerizing full-stack

Module 3 ~8 hrs Intermediate
apps

R1 (build process) — general deployment concepts covered

Module 4 ~1 hr Beginner
inside Git/Docker courses

Module 5 R3 — Deploying [Link] on AWS EC2, connecting a database ~2.5 hrs Intermediate

Module 6 R4 — Nginx as reverse proxy, serving static frontend files ~2 hrs Intermediate

R5 — HTTPS/TLS concepts + Let's Encrypt certificate setup &

Module 7 ~1.5 hrs Intermediate
auto-renewal

Module 8 R2 (build step) + R4 (Nginx serving React build) combined ~1 hr Beginner–Intermediate

Added Recommendations (not in original roadmap, industry-expected)

● GitHub Actions — basic CI/CD pipeline (lint → test → build → deploy on push) is expected in almost every 2026
job posting; official docs: [Link]

Hands-on Practice
● Push a full-stack project to GitHub with a clean commit history and a proper README.
 ● Dockerize your Phase-2 backend and Phase-5 frontend, and run both with docker-compose.
● Deploy the Dockerized app on a free-tier AWS EC2 instance, serve it through Nginx, and secure it with a free
Let's Encrypt certificate.

Phase Capstone Project

Take ONE of your Phase 6 capstone projects and fully productionize it: Dockerized services → deployed on AWS EC2 →
Nginx reverse proxy → HTTPS via Let's Encrypt → CI/CD via GitHub Actions. This is your "live URL" to put on your
resume.

Common Beginner Mistakes

● Exposing [Link] directly to the internet on port 3000 instead of behind Nginx — insecure and doesn't scale.
Always reverse-proxy.
● Committing .env files / secrets to GitHub — use .gitignore and environment variables on the server instead.
● Forgetting certificate auto-renewal — Let's Encrypt certs expire every 90 days; set up certbot's auto-renew cron
job.

Estimated Study Time

3–4 weeks @ 10–12 hrs/week ≈ 35–45 hours total.

Final Roadmap Summary

Complete Learning Sequence (Checklist)

● Phase 1 — JavaScript Mastery (Namaste JavaScript + freeCodeCamp JS)
● Phase 2 — Backend Mastery (Chai aur Backend: Node, Express, MongoDB, Auth, AI)
● Phase 3 — System Thinking Basics (Rate limiting, Caching, WebSockets)
● Phase 4 — Advanced System Design (Gaurav Sen + ByteByteGo: DB internals, Kafka, Elasticsearch, patterns)
● Phase 5 — Frontend (Chai aur React: React + TypeScript + Tailwind + Redux Toolkit)
● Phase 6 — Capstones (Cloud Video Storage + Quick Commerce + AI)
● Phase 7 — Deployment (Git, Docker, AWS, Nginx, HTTPS)

Total Estimated Learning Time

Phase 1: 90–110 hrs | Phase 2: 90–110 hrs | Phase 3: 35–45 hrs | Phase 4: 65–85 hrs | Phase 5: 85–100 hrs |
Phase 6: 90–120 hrs | Phase 7: 35–45 hrs
TOTAL ≈ 490–615 hours ≈ 6–8 months at 15–20 hrs/week (part-time) or 3–4 months full-time.

Skills Acquired After Completion

● Deep JavaScript (execution context, closures, event loop, async patterns) — interview-ready.
● Backend engineering with [Link], Express, MongoDB, Mongoose, JWT auth, file uploads.
● Practical scaling: rate limiting, Redis caching, WebSockets, basic sharding/replication intuition.
● High-level system design: CAP theorem, consistent hashing, Kafka, Elasticsearch, CQRS, SAGA, circuit breakers.
● Modern frontend: React, TypeScript, Tailwind CSS, Redux Toolkit, protected routing.
● AI integration: LLMs, vector databases, RAG, and basic AI agents.
● DevOps fundamentals: Git/GitHub, Docker, AWS EC2, Nginx reverse proxy, HTTPS/TLS, basic CI/CD.
Portfolio Projects to Build
● 10 vanilla-JS mini projects (Phase 1) — proves core JS fluency.
● A complete backend API project with auth + file uploads (Phase 2).
● A full-stack app with real-time + caching + rate limiting layered on top (Phase 3).
● A written HLD design doc for a well-known system (Phase 4) — great interview talking point.
● A typed, styled full-stack SaaS-style front-end (Phase 5).
● Cloud Video Storage System + Quick Commerce Platform w/ AI (Phase 6) — flagship resume projects.
● One fully deployed, HTTPS-secured, Dockerized project with a live URL (Phase 7).

Job Roles This Roadmap Prepares You For

● Full-Stack Developer (MERN / Node + React)
● Backend Engineer ([Link], REST APIs, databases)
● Frontend Engineer (React + TypeScript)
● Junior/Mid Software Engineer roles requiring system-design awareness
● SDE roles at startups building AI-integrated products

Optional Advanced Topics for Deeper Mastery

● GraphQL (Apollo Server/Client) as an alternative to REST.
● [Link] — for SSR/SSG and full-stack React in one framework (very common in 2026 job postings).
● Testing: Jest/Vitest + React Testing Library + Supertest for backend integration tests.
● Kubernetes basics — once comfortable with Docker, for orchestration at scale.
● gRPC and protobuf — for service-to-service communication in microservices.
● Data Structures & Algorithms (Striver's A2Z DSA Course, free on YouTube/takeUforward) — needed in parallel
for coding interviews; not covered in this roadmap but essential for FAANG-style interviews.