Foundations of the Web
Build a deep understanding of how the web works — from network requests to browser rendering and execution.
These topics form the core layer of any frontend system design interview, ensuring you can explain how the browser transforms code into an interactive experience.
Topic | Importance | Link |
|---|---|---|
How the Web Works (from URL → Rendered Page) | High | Coming soon / create |
Networking Fundamentals (DNS, IP, TCP, UDP, HTTP, HTTPS) | High | Coming soon / create |
HTTP Versions (HTTP/1.0, 1.1, 2.0, 3.0 - QUIC) | High | Coming soon / create |
Browser Architecture (Processes, Threads, Rendering & JS Engine) | High | Coming soon / create |
Critical Rendering Path (DOM, CSSOM, Paint, Composite) | High | Coming soon / create |
Rendering Patterns (CSR, SSR, SSG, ISR, Streaming) | Medium | Coming soon / create |
Browser Event Loop & Task Queues | Medium | Coming soon / create |
Same-Origin Policy & CORS Basics | Low | Coming soon / create |
WebAssembly Basics (Understanding JS Execution Model) | Low | Coming soon / create |
Communication Systems
Master client–server communication models used in frontend system design — from traditional polling to modern real-time synchronization.
This section is crucial for designing responsive, scalable, and event-driven applications.
Topic | Importance | Link |
|---|---|---|
WebSockets (Full Duplex Communication) | High | Coming soon / create |
Server-Sent Events (SSE) | High | Coming soon / create |
WebHooks (Server-to-Server Triggers) | High | Coming soon / create |
GraphQL Subscriptions | High | Coming soon / create |
Long Polling (Server-held Connections) | Medium | Coming soon / create |
WebRTC (Peer-to-Peer Communication) | Medium | Coming soon / create |
Offline Communication Queues (Retry, Backoff) | Medium | Coming soon / create |
Short Polling (Traditional Request Cycles) | Low | Coming soon / create |
Real-Time Data Synchronization Strategies | Low | Coming soon / create |
Offline Support & PWAs
Design resilient web apps that continue to function under poor or no network conditions.
This section focuses on Service Workers, caching strategies, and PWA principles — key system design areas for modern frontend reliability.
Topic | Importance | Link |
|---|---|---|
Service Workers (Core of Offline Support) | High | Coming soon / create |
Progressive Web Applications (PWAs) | High | Coming soon / create |
Caching Strategies (Cache First, Network First, Stale-While-Revalidate) | High | Coming soon / create |
IndexedDB & Background Sync | Medium | Coming soon / create |
Push Notifications & Manifest Files | Low | Coming soon / create |
Offline-First Architecture (UX Patterns & Fallbacks) | Low | Coming soon / create |
Background Sync & Retry Queues | Low | Coming soon / create |
Web Storage APIs (localStorage, sessionStorage) | Low | Coming soon / create |
Manifest & Installable Experience | Low | Coming soon / create |
Security & Reliability
Designing secure and reliable frontend systems means understanding how to protect users, data, and communication channels while ensuring apps stay resilient under failure or attack.
This section focuses on the most relevant web security principles for system design interviews, emphasizing prevention, mitigation, and best practices.
Topic | Importance | Link |
|---|---|---|
HTTPS & TLS (Secure Communication) | High | Coming soon / create |
Cross-Site Scripting (XSS) | High | Coming soon / create |
Cross-Site Request Forgery (CSRF) | High | Coming soon / create |
Cross-Origin Resource Sharing (CORS) | High | Coming soon / create |
Security Headers (CSP, HSTS) | High | Coming soon / create |
Client-Side Security (tokens, cookies, storage) | High | Coming soon / create |
Dependency Security & Vulnerability Patching | High | Coming soon / create |
Input Validation & Sanitization | High | Coming soon / create |
Server-Side Request Forgery (SSRF) | Medium | Coming soon / create |
Server-Side JavaScript Injection (SSJI) | Medium | Coming soon / create |
iFrame Protection | Medium | Coming soon / create |
Feature Policy / Permissions Policy | Medium | Coming soon / create |
Sub-Resource Integrity (SRI) | Medium | Coming soon / create |
Compliance & Regulation (GDPR, OWASP, ISO) | Low | Coming soon / create |
Performance Optimization
Performance optimization in frontend system design focuses on minimizing load times, reducing runtime overhead, and delivering consistent user experiences at scale.
This section targets network, asset, and build-level optimizations — the most impactful strategies for scalable web performance.
Topic | Importance | Link |
|---|---|---|
Network Optimization (Compression, HTTP/2+, Resource Hinting, Async/Defer, CDN) | High | Coming soon / create |
Image Optimization (Lazy Loading, Responsive Images, Progressive Enhancement) | High | Coming soon / create |
Video Optimization (Adaptive Bitrate Streaming, Codecs, Preload Strategies) | High | Coming soon / create |
Font Optimization (Subset Fonts, Preload, FOUT/FOIT Handling) | High | Coming soon / create |
List Virtualisation | High | Coming soon / create |
Build Optimization (Tree-shaking, Code Splitting, Minification, Compression) | High | Coming soon / create |
Runtime Optimization (JavaScript Execution, Main Thread Scheduling, Web Workers) | Medium | Coming soon / create |
Build Tools & Frameworks (Webpack, Vite, esbuild, Rollup) | Low | Coming soon / create |
State & Data Management + Caching
Designing scalable frontend systems means managing how data flows between clients, caches, and servers efficiently.
This section focuses on data fetching strategies, client-side state management, and caching architectures that ensure responsiveness and reliability at scale.
Topic | Importance | Link |
|---|---|---|
REST vs GraphQL vs gRPC (Choosing the Right Data Fetching Strategy) | High | Coming soon / create |
Client-Side Caching (HTTP Cache, SWR, React Query, Apollo Cache) | High | Coming soon / create |
State Management Patterns (Redux, Zustand, Recoil, Context API) | High | Coming soon / create |
Distributed Caching Layers (CDN, Edge, API Gateway Caches) | Medium | Coming soon / create |
Data Synchronization & Staleness (Stale-While-Revalidate, Background Fetch) | Low | Coming soon / create |
IndexedDB & Local Storage Strategies (Persistence, Offline Cache) | Low | Coming soon / create |
Server State vs Client State (Separation of Responsibility) | Low | Coming soon / create |
Cache Invalidation & Revalidation Patterns | Low | Coming soon / create |
Storage APIs (sessionStorage, localStorage, cookies) | Low | Coming soon / create |
Testing & Observability
A well-designed frontend system ensures not only performance but also reliability and confidence in code delivery.
This section focuses on designing scalable testing strategies and maintaining visibility into app health — ensuring continuous, fault-tolerant delivery.
Topic | Importance | Link |
|---|---|---|
Testing Strategy & Pyramid (Unit → Integration → E2E) | High | Coming soon / create |
Unit & Integration Testing (Jest, RTL, Vitest) | High | Coming soon / create |
E2E and Automation Testing (Cypress, Playwright) | High | Coming soon / create |
Test-Driven Development (TDD) & Continuous Testing | Medium | Coming soon / create |
A/B Testing & Feature Experimentation | Medium | Coming soon / create |
Performance & Load Testing (Lighthouse CI, k6) | Medium | Coming soon / create |
Logging & Monitoring (Console, Sentry, DataDog, NewRelic) | Low | Coming soon / create |
Telemetry & Tracing (OpenTelemetry, Browser APIs) | Low | Coming soon / create |
Alerting & Error Recovery (Alerts, Rollbacks, Graceful Degradation) | Low | Coming soon / create |
Fixing & Post-Mortem Analysis (Root Cause, RCA Documentation) | Low | Coming soon / create |
Accessibility & Compliance
A scalable frontend system must be usable by everyone, regardless of device or ability.
This section focuses on core accessibility principles, testing techniques, and compliance standards (WCAG, ARIA) that ensure inclusive, legally compliant web experiences.
Topic | Importance | Link |
|---|---|---|
Accessibility Overview (WCAG, ADA, Section 508) | High | Coming soon / create |
Keyboard Accessibility (Tab Order, Focus States, Shortcuts) | High | Coming soon / create |
Screen Readers & ARIA Roles (Semantic HTML, aria-labels) | High | Coming soon / create |
Focus Management (Focus Trap, Skip Links, Modal Handling) | Medium | Coming soon / create |
Color Contrast & Themes (Dark Mode, Accessibility Colors) | Medium | Coming soon / create |
Accessibility Testing Tools (aXe, Lighthouse a11y, WAVE) | Low | Coming soon / create |
Fixing Accessibility Issues (Linting, Automation in CI/CD) | Low | Coming soon / create |
Internationalization (i18n) & Localization (l10n) | Low | Coming soon / create |
Architecture & Design Patterns
Frontend architecture defines how complex web apps scale, stay modular, and enable independent team development.
This section focuses on architectural patterns and runtime systems that form the backbone of modern frontend system design interviews.
Topic | Importance | Link |
|---|---|---|
Monorepo Architecture (Nx, Turborepo, Yarn Workspaces) | High | Coming soon / create |
Microfrontends (Independent Deployments, Module Federation, Isolation) | High | Coming soon / create |
Component-Driven Architecture (Atomic Design, Reusability, Encapsulation) | High | Coming soon / create |
GraphQL / Rest API | High | Coming soon / create |
Event-Driven Frontend Systems (Pub/Sub, Context, Observer Patterns) | Medium | Coming soon / create |
State Machines & Statecharts (XState, Predictable UI Flows) | Medium | Coming soon / create |
Client-Side Routing (Nested, Dynamic, Protected Routes) | Low | Coming soon / create |
Frameworks for HLD
After learning all the core topics, it’s time to understand how to systematically approach frontend system design questions.
These frameworks help you structure your thought process, ensuring you explain design decisions clearly and confidently during interviews.
Subtopic | Importance | Link |
|---|---|---|
RACADO Framework — (Requirements, Architecture, Communication, API, Data Flow, Optimization) | High | |
RADIO Framework — (Requirements, Architecture, Data Flow, Integration, Optimization) | Medium |
Examples
With all the concepts above — from networking and caching to performance and architecture — it’s now time to understand how these ideas come together in real-world frontend system designs.
This section walks through practical examples that showcase how large-scale web applications are structured, how they handle data flow, optimize performance, and support millions of users.
Subtopic | Importance | Link |
|---|---|---|
News Feed / Social Feed (Facebook, Twitter) — fanout, ranking, pagination, real-time updates | High | |
HLD Overview (approach, trade-offs, capacity, SLOs) | High | Coming soon / create |
Photo Sharing App (Instagram) — feed, media CDN, upload, caching, real-time comments | High | Coming soon / create |
E-Commerce App (Amazon, Flipkart) — product pages, cart, checkout, personalization | High | Coming soon / create |
Video Streaming (Netflix) — adaptive bitrate streaming, buffering, analytics | High | Coming soon / create |
Collaborative Docs / Sheets (Google Docs/Sheets) — CRDT, real-time sync, conflict resolution | High | Coming soon / create |
Music Streaming (Spotify) — playlists, streaming, offline sync, low-latency seek | Medium | Coming soon / create |
Live Commentary / Sports (Cricbuzz) — low-latency updates, event ordering, high fanout | Medium | Coming soon / create |
Email Client (Web) — mailbox sync, search, offline support | Medium | Coming soon / create |
Diagram Tools (Excalidraw) — real-time collaboration, canvas performance, persistence | Medium | Coming soon / create |