A structured learning path and reference for Frontend System Design — from networking fundamentals to high-level architecture — organized as numbered modules that take a topic from "fresher" to "senior engineer" depth. Each module folder has its own README.md; this file is the map that ties them together.
01–09: Core engineering topics (networking, communication, security, testing, performance, caching, monitoring, accessibility, offline support), each split into Fresher/Early Engineer and Senior Engineer sections.10–11: Frontend Low-Level Design (LLD) and High-Level Design (HLD) — the "how" vs. the "what/where" of frontend architecture.12: Design Principles (SOLID, DRY, KISS, etc.) with React-specific examples.practice-system-design/: Applied case studies and sector breakdowns for practicing full system-design write-ups.
| # | Module | Summary |
|---|---|---|
| 01 | Networking | DNS/IP/request-response cycle, HTTP/HTTPS/TCP/UDP, REST & GraphQL, browser rendering, API design. |
| 02 | Communication | Short/long polling, WebSockets, Server-Sent Events, webhooks, and choosing the right real-time pattern. |
| 03 | Security | Input sanitization, XSS, CSRF, CORS/HTTPS, AuthN/AuthZ (OAuth2/OIDC/JWT), security headers, SSRF, SRI, compliance. |
| 04 | Testing | Unit, TDD, component testing, E2E (Cypress/Playwright), integration, A/B testing, visual regression, performance testing. |
| 05 | Performance | Web Vitals (LCP/FID/CLS/TTFB), React optimization, build/network optimization, CSR vs SSR vs SSG vs ISR. |
| 06 | Database & Caching | LocalStorage/cookies, state normalization, IndexedDB, HTTP caching, service workers, React Query/SWR. |
| 07 | Logging & Monitoring | Telemetry basics, Sentry/LogRocket/New Relic, RUM, alerting/on-call, log aggregation. |
| 08 | Accessibility (a11y) | Semantic HTML, keyboard access, forms/labels, WAI-ARIA, screen readers, WCAG contrast, focus management. |
| 09 | Offline Support | Service workers, PWAs, Workbox caching strategies, background sync, offline storage, blob data. |
| 10 | Low-Level Design (LLD) | Component architecture, state management, TypeScript patterns, testing/debugging, design patterns, machine coding tasks. |
| 11 | High-Level Design (HLD) | Network/API architecture, security architecture, performance & caching strategy, monitoring, micro-frontends, case studies. |
| 12 | Design Principles | SOLID, DRY, KISS, YAGNI, SoC, Composition over Inheritance, Reusability, Immutability, SSOT — see subfolders below. |
| Principle | Link |
|---|---|
| SOLID | 01-SOLID |
| DRY (Don't Repeat Yourself) | 02-DRY |
| KISS (Keep It Simple, Stupid) | 03-KISS |
| YAGNI (You Ain't Gonna Need It) | 04-YAGNI |
| SoC (Separation of Concerns) | 05-SoC |
| Composition over Inheritance | 06-Composition-over-Inheritance |
| Reusability | 07-Reusability |
| Immutability | 08-Immutability |
| SSOT (Single Source of Truth) | 09-SSOT |
| Folder | Description |
|---|---|
practice-system-design/ |
Applied case studies: sector breakdowns and a full Uber-style worked example. |
↳ applications-sectors/ |
12 product sectors (ride-hailing, e-commerce, food delivery, streaming, social media, fintech, SaaS, job portals, edtech, health, travel, dev tools) to use as case-study prompts. |
↳ Ride-Hailing Transport/ |
16 full case studies (Uber, Ola, Rapido, Namma Yatri, BluSmart, InDrive, Meru Cabs, Yulu, Bounce, Quick Ride, BlaBlaCar, sRide, Shuttl, Chalo, Zoomcar, Revv): business requirements → users → user stories → functional & non-functional requirements → API design. |
- Start with 01–09 for core concepts, reading the Fresher section first and returning for the Senior section later.
- Move to 12 (Design Principles) to internalize the "rules" behind good structure.
- Read 10 (LLD) and 11 (HLD) to see how those concepts combine into real architecture.
- Apply everything in
practice-system-design/by picking a sector and writing your own case study, using the Uber example as a template.
Each module folder is self-contained — click any link above to jump straight to that topic's README.md.