Start here
Roadmap
A Beginner → Advanced path through the whole repo. Don't read top-to-bottom randomly — follow a track below, then use the section tables to go deep.
Difficulty legend: 🟢 Easy · 🟡 Medium · 🔴 Hard
🧱 Stage 0 — Foundations (must know cold)
You can't design systems on shaky ground. Lock these first.
01-fundamentals ──▶ 02-browser ──▶ 03-javascript ──▶ 05-css- Fundamentals 🟢 — rendering, DOM, HTTP, storage, SEO
- Browser Internals 🟡 — event loop, rendering pipeline, GC
- JavaScript 🟡 — closures, promises,
this, prototypes, modules - CSS 🟢 — box model, flexbox, grid, cascade, specificity
🧩 Stage 1 — Framework & Types
04-typescript ──▶ 06-react ──▶ 07-nextjs- TypeScript 🟡 — generics, utility types, guards
- React 🟡 — reconciliation, hooks, memoization, error boundaries
- Next.js 🟡 — routing, SSR/SSG/ISR, caching, server actions
🚦 Stage 2 — The Cross-Cutting Concerns
The topics every system-design answer touches.
09-performance ──▶ 10-security ──▶ 11-accessibility ──▶ 12-networking ──▶ 13-state-management- Performance 🔴 — Core Web Vitals, bundles, virtualization
- Security 🔴 — XSS, CSRF, CSP, auth
- Accessibility 🟡 — ARIA, WCAG, keyboard, focus
- Networking 🟡 — HTTP/2-3, WebSocket, SSE, GraphQL, CDN
- State Management 🟡 — Redux, Zustand, React Query, signals
🏛️ Stage 3 — Architecture & Testing
08-architecture ──▶ 14-testing ──▶ 18-design-patterns- Architecture 🔴 — micro-frontends, monorepos, design systems
- Testing 🟡 — RTL, Playwright, MSW, visual/a11y testing
- Design Patterns 🟡 — observer, factory, strategy, DI
🚀 Stage 4 — The Interview Itself
This is what the interview actually tests. Do these last, do them a lot.
17-interview-patterns ──▶ 15-system-design ──▶ 16-machine-coding ──▶ 20-company-guides- Interview Patterns 🔴 — real-time, offline, infinite data, optimistic UI
- Frontend System Design 🔴 — 200+ "Design X" problems + flagships
- Machine Coding 🔴 — 300+ build-this-component problems + flagships
- Company Guides 🔴 — what each company actually asks
- DSA for Frontend 🟡 — arrays, trees, recursion + frontend-flavored problems (flatten, DOM traversal, LRU)
🛠️ Stage 5 — Master (optional, for Staff)
Nothing teaches internals like rebuilding them.
- Build Your Own 🔴 — React, Redux, Router, Virtual DOM, a bundler
🎯 Time-boxed tracks
⚡ 2-Week Crash Course
For "my interview is soon."
| Days | Focus |
|---|---|
| 1–2 | Fundamentals + Browser essentials |
| 3–4 | JavaScript 🟡 + React core |
| 5–6 | Performance + Networking |
| 7–8 | State + Security + a11y |
| 9–11 | 5 flagship system designs |
| 12–13 | 4 flagship machine coding |
| 14 | Company guide for your target |
📈 SDE-2 → Senior (4–6 weeks)
All 🟢 + 🟡 topics, every flagship, Performance + State + a11y end-to-end.
🎯 Staff / FAANG (8–12 weeks)
Everything, with emphasis on all 🔴 topics, Architecture, Build Your Own, and mock interviews from Company Guides.
Tip: keep a checklist. Fork the repo, tick rows in each section table as you master them, and you'll see your gaps at a glance.