Skip to content

Latest commit

 

History

History
346 lines (288 loc) · 23.1 KB

File metadata and controls

346 lines (288 loc) · 23.1 KB

System Design — Frontend, Backend & Everything In Between

A structured, self-paced roadmap for mastering system design end to end, from interview framing and low-level design to distributed systems, frontend architecture, cloud scalability, AI/ML systems, and complete case studies.

Most system design resources focus only on backend architecture. This repo treats every layer of the stack as a first-class design surface: APIs, databases, browsers, rendering, infrastructure, observability, ML serving, and trade-off communication.


How to Use This Repo

Each topic lives in its own markdown file inside the relevant phase folder. Start with Phase 0 if you are preparing for interviews, Phase 1 if you want to strengthen object-oriented design, or jump directly to the phase that matches your current gaps.

system-design/
├── phase-0-interview-primer/
├── phase-1-low-level-design/
├── phase-2-foundations/
├── phase-3-backend/
├── phase-4-distributed-systems/
├── phase-5-frontend/
├── phase-6-cloud-and-scalability/
├── phase-7-ai-and-ml-systems/
└── phase-8-case-studies/

Roadmap

Phase Folder Focus Topics
Phase 0 Interview Primer Interview framing, requirements, estimation, diagrams, trade-offs 8
Phase 1 Low Level Design SOLID, design patterns, UML, LLD case studies 6
Phase 2 Foundations Networking, protocols, APIs, auth, caching, databases 19
Phase 3 Backend Backend & data architecture, databases, queues, messaging reliability, search, storage 38
Phase 4 Distributed Systems Consistency, consensus, transactions, clocks, event/stream patterns, resilience, distributed data structures 32
Phase 5 Frontend Browser internals, rendering, state, data fetching, performance, observability, frontend architecture 29
Phase 6 Cloud and Scalability Containers, cloud, delivery, observability, reliability engineering (SLOs, chaos, autoscaling), platform & security 28
Phase 7 AI and ML Systems ML infrastructure, LLMs, RAG, agents, guardrails, AI observability 15
Phase 8 Case Studies End-to-end system design examples 17

Phase 0 — Interview Primer

How to approach system design interviews with structure, numbers, diagrams, and clear trade-off communication.

# Topic
1 The 6-Step Framework
2 Functional vs Non-Functional Requirements
3 Capacity Estimation
4 Latency Numbers Every Engineer Should Know
5 API Design in Interviews
6 Drawing System Diagrams
7 Trade-Off Communication
8 Scaling a Design

Phase 1 — Low-Level Design

Object-oriented design foundations for building maintainable systems and discussing component-level architecture.

# Topic
1 SOLID Principles
2 Design Patterns: Creational
3 Design Patterns: Structural
4 Design Patterns: Behavioral
5 UML and Class Diagrams
6 LLD Case Studies

Phase 2 — Foundations

The protocol, networking, API, authentication, caching, and database basics every system design discussion builds on.

# Topic
1 Client-Server Architecture
2 HTTP and HTTPS
3 HTTP/2 and HTTP/3 QUIC
4 DNS
5 CDN
6 OSI Model and Networking
7 Browser Architecture
8 WebSockets and Long Polling
9 REST APIs
10 GraphQL
11 gRPC and Protocol Buffers
12 Authentication vs Authorization
13 OAuth 2.0 and OpenID Connect
14 Cookies, Sessions, JWT
15 API Versioning
16 Caching Basics
17 Rate Limiting
18 Database Fundamentals
19 SQL vs NoSQL

Phase 3 — Backend & Data Architecture

Core patterns for building reliable, scalable server-side systems, plus data-layer internals, backend architecture discipline, and messaging reliability.

# Topic
1 Monolith Architecture
2 Modular Monolith
3 Microservices Architecture
4 Service Mesh
5 Load Balancers
6 Reverse Proxy
7 API Gateway
8 Circuit Breaker
9 Database Internals
10 Database Indexing
11 Database Isolation Levels
12 Database Migrations
13 Replication
14 Sharding
15 Connection Pooling
16 Distributed Locking
17 Unique ID Generation
18 Redis
19 Message Queues
20 Task Queues
21 Message Broker vs Event Streaming
22 Idempotency
23 Search Systems
24 Object Storage
25 Concurrency and Thread Models
26 Domain-Driven Design (DDD)
27 Clean & Hexagonal Architecture
28 Multi-Tenant Architecture
29 Backend-for-Frontend (BFF)
30 Storage Engines: B-Trees vs LSM-Trees
31 Query Optimization & Execution Plans
32 Partitioning Strategies & Hot Partitions
33 Secondary Indexes
34 Data Lifecycle & Archival
35 Dead Letter Queues & Retry Strategies
36 Outbox & Inbox Pattern
37 Exactly-Once vs At-Least-Once Delivery
38 Choreography vs Orchestration

New in this revision (topics 26–38): backend architecture discipline (DDD, hexagonal, multi-tenancy, BFF), data-layer depth (storage engines, query optimization, partitioning/hot partitions, secondary indexes, data lifecycle), and messaging reliability (DLQ/retries, outbox/inbox, delivery semantics, choreography vs orchestration). See ROADMAP-REVIEW.md for the full rationale.


Phase 4 — Distributed Systems

The hard problems that emerge when systems are split across machines, regions, and failure domains.

# Topic
1 CAP Theorem
2 PACELC Theorem
3 Consistency Models
4 Eventual Consistency
5 Logical Clocks and Vector Clocks
6 Gossip Protocol
7 Heartbeats and Failure Detection
8 Backpressure
9 CQRS
10 Event Sourcing
11 Saga Pattern
12 Distributed Transactions
13 Idempotency in Distributed Systems
14 CRDTs
15 Service Discovery
16 Consensus Algorithms
17 Leader Election
18 Consistent Hashing
19 Bloom Filters
20 Count-Min Sketch
21 HyperLogLog
22 Distributed Caching
23 Event-Driven Architecture
24 Stream Processing
25 Change Data Capture (CDC)
26 Kafka Internals
27 Distributed Rate Limiting
28 Distributed Scheduling
29 Bulkheads
30 Request Hedging
31 Retry Storms & Failure Domains
32 Cell-Based Architecture

Phase 5 — Frontend

Browser, rendering, performance, and application architecture topics that matter in modern frontend system design.

# Topic
1 Browser Rendering Pipeline
2 Critical Rendering Path
3 CSR vs SSR vs SSG vs ISR
4 Streaming SSR and Partial Hydration
5 Virtual DOM
6 Frontend Architecture Patterns
7 State Management
8 Code Splitting
9 Lazy Loading
10 Image Optimization
11 Font Loading Strategies
12 Web Workers and Service Workers
13 Browser Storage
14 WebSockets on the Frontend
15 SSE on the Frontend
16 Frontend Security
17 Bundlers and Build Tools
18 Monorepo Architecture
19 Progressive Web Apps (PWA)
20 Micro Frontends
21 Error Boundaries and Resilience
22 Frontend Testing Strategy
23 Design Systems
24 Accessibility (a11y) at Scale
25 Frontend Performance
26 Client Data Fetching & Caching
27 React Architecture at Scale
28 Frontend Observability & RUM
29 Frontend CI/CD & Deployment

New in this revision (topics 26–29): client data fetching & caching (server-state libraries), React architecture at scale (RSC), frontend observability & RUM, and frontend CI/CD & deployment.


Phase 6 — Cloud & Scalability

Production readiness: deployment, cloud infrastructure, observability, resilience, security, and operating cost.

# Topic
1 Docker
2 Kubernetes
3 Serverless Architecture
4 Edge Computing
5 CI/CD
6 Feature Flags and Progressive Delivery
7 Infrastructure as Code
8 AWS Fundamentals
9 Cloud Networking
10 High Availability
11 Disaster Recovery
12 Observability
13 Logging, Metrics, Tracing
14 Testing Distributed Systems
15 Time-Series Databases
16 Geospatial Indexing
17 Data Pipelines
18 Security Architecture
19 Cost Optimization
20 Multi-Region Design
21 SLOs, SLIs & Error Budgets
22 Chaos Engineering
23 Load & Stress Testing
24 Autoscaling Strategies
25 Deployment Strategies: Blue-Green & Canary
26 Capacity Planning
27 Platform Engineering & Internal Developer Platforms
28 Secrets Management

New in this revision (topics 21–28): the reliability-engineering layer (SLOs/SLIs/error budgets, chaos engineering, load testing, autoscaling, capacity planning), explicit deployment strategies (blue-green & canary), and platform/security (internal developer platforms, secrets management). Note: Time-Series DBs (15) and Geospatial Indexing (16) are data topics that pair with Phase 3; Data Pipelines (17) anchors the data-engineering material — see ROADMAP-REVIEW.md.


Phase 7 — AI & ML Systems

Designing production ML and LLM systems, from data pipelines and serving to RAG, agents, guardrails, feedback loops, and observability.

# Topic
1 ML System Design Overview
2 Data Pipelines for ML
3 Model Training Infrastructure
4 Fine-Tuning Infrastructure
5 Model Serving and Inference
6 LLM Inference Architecture
7 RAG: Retrieval-Augmented Generation
8 Vector Databases
9 Prompt Engineering at Scale
10 AI Agent Architecture
11 Guardrails and Content Moderation
12 Feedback Loops and Online Learning
13 A/B Testing Models
14 AI Observability
15 Cost and Latency Trade-Offs in AI Systems

Phase 8 — Case Studies

Full system design walkthroughs that combine requirements, architecture, data modeling, scaling, reliability, and trade-offs.

# Topic
1 Design a URL Shortener
2 Design Twitter/X Feed
3 Design a Notification System
4 Design a Chat Application
5 Design YouTube Video Platform
6 Design Google Docs Collaborative Editor
7 Design an Autocomplete Typeahead
8 Design a Web Crawler Search Indexer
9 Design a Rate Limiter
10 Design a Ride-Sharing System
11 Design an E-Commerce Checkout
12 Design a Payment System Wallet
13 Design a Distributed Job Scheduler
14 Design an Ad Click Aggregator
15 Design a CI/CD Pipeline
16 Design an LLM-Powered Search
17 Design a React Component Library

Who This Is For

  • Frontend engineers who want to go deep on browser internals, rendering strategies, performance, and micro frontends
  • Backend engineers who want to go deep on distributed systems, database internals, scalability patterns, and resilience
  • Full-stack engineers who want a single structured reference across the entire stack
  • Engineers preparing for system design interviews, frontend, backend, low-level design, or AI/ML systems
  • Anyone building production systems who wants to understand every layer, not just their own

Contributing

Contributions are welcome. If you are adding a new topic:

  1. Place the file in the correct phase folder.
  2. Follow the existing doc format: concept, problem it solves, trade-offs, and examples.
  3. Keep the topic number sequential within that phase.
  4. Update this README so the roadmap stays aligned with the project structure.

Star This Repo

If this roadmap saves you hours of scattered searching, a star goes a long way.