Skip to content
    Back to courses

    Frontend track

    Frontend System Design, from how the browser works to large-scale architecture

    Every concept of front-end system design in its own lesson, grouped in modules: the browser, rendering, state, data, performance, security, real-time and offline, reliability, testing, accessibility and delivery. 8 lessons are published so far, and the lists below show every concept to come.

    The first course

    The published course. Start here; the modules below list every concept the track covers.

    Starter · ~11 hr · 8 lessons

    Frontend System Design Foundations: How the Web Runs

    Learn how a browser works inside, how a page becomes pixels, how the event loop and HTTP caching shape speed, and how to choose a rendering strategy and measure it.

    View course

    What you will be able to do

    • Explain how a browser turns a URL into an interactive page: processes, navigation, parsing, layout, paint and compositing.
    • Reason about the event loop and keep the main thread responsive.
    • Set HTTP caching rules for HTML and static assets that are fast and safe.
    • Choose between client, server, static and streaming rendering, and explain the trade-off.
    • Measure loading and interaction with Core Web Vitals, and set a performance budget.
    • Turn "make it fast" into testable front-end requirements.

    Modules

    24 modules, 18 of 220 lessons published so far. Each lesson teaches one concept. A module without published lessons is marked coming soon and is not linked.

    1. F01 · 4 of 5 lessons published

      Introduction to frontend system design

      What a front-end system is, how it differs from the back end, and a repeatable way to approach any front-end design problem.

      5 concepts in Introduction to frontend system design
      1. Frontend System Design: The Big Picture
      2. Frontend Requirements: Users, Devices and Networks
      3. A Repeatable Framework for Front-End Design Problems
      4. Trade-Off Analysis for Front-End Decisions
      5. From Multi-Page Sites to SPAs and Back: How Web App Architecture Evolved (coming soon)

    2. F02 · 5 of 11 lessons published

      Web fundamentals and networking

      How a request travels from the browser, how HTTP, caches, storage and the same-origin policy shape what a front end can do.

      11 concepts in Web fundamentals and networking
      1. DNS, TCP, TLS and the Request Lifecycle
      2. HTTP/1.1, HTTP/2 and HTTP/3 for Front-End Engineers
      3. HTTP Methods, Status Codes and Headers a Front End Relies On (coming soon)
      4. HTTP Caching for the Front End
      5. CDN and Edge Caching From the Browser's Side (coming soon)
      6. Browser Storage: Cookies, Web Storage, IndexedDB and the Cache API (coming soon)
      7. Cookies and Web Storage in Depth (coming soon)
      8. IndexedDB, Storage Quotas and Eviction (coming soon)
      9. The Same-Origin Policy and CORS
      10. CORS in Practice: Preflights, Credentials and Debugging
      11. Reading a Network Waterfall: Putting Web Fundamentals to Work (coming soon)

    3. F03 · 7 lessons planned

      HTML, CSS and JavaScript architecture

      Structuring markup, styles and scripts so a large interface stays fast, accessible and maintainable.

      7 concepts in HTML, CSS and JavaScript architecture
      1. HTML, CSS and JavaScript Architecture: Structuring a Large Interface (coming soon)
      2. Semantic HTML and Document Structure (coming soon)
      3. CSS Architecture: the Cascade, Layers, Methodologies and Utility-First (coming soon)
      4. Modern CSS Layout: Flexbox, Grid and Container Queries (coming soon)
      5. JavaScript Modules and TypeScript at Scale (coming soon)
      6. The DOM, Event Propagation and Event Delegation (coming soon)
      7. Web Components and the Shadow DOM (coming soon)

      Coming soon

    4. F04 · 3 of 8 lessons published

      Browser architecture

      The processes and threads inside a browser, how a page becomes pixels, and how the event loop schedules everything on the main thread.

      8 concepts in Browser architecture
      1. How a Browser Actually Works
      2. The Critical Rendering Path
      3. The Event Loop and the Main Thread
      4. Layout, Paint and Compositing in Depth (coming soon)
      5. Layout Thrashing and Forced Reflow (coming soon)
      6. The JavaScript Engine: Parsing, JIT and Garbage Collection (coming soon)
      7. Web Workers, Worklets and Off-Main-Thread Architecture (coming soon)
      8. Scheduling Work: Yielding, Idle Time and Task Priorities (coming soon)

    5. F05 · 9 lessons planned

      React fundamentals and internals

      How React renders, updates and reconciles a component tree, and what that means for correctness and performance.

      9 concepts in React fundamentals and internals
      1. React Reconciliation and the Virtual DOM (coming soon)
      2. React's Render and Commit Phases (coming soon)
      3. Fiber, Scheduling and Concurrent Rendering (coming soon)
      4. How Hooks Work: State, Ordering and the Rules of Hooks (coming soon)
      5. Effects, Cleanup and Synchronizing With the Outside World (coming soon)
      6. Keys, Lists and Component Identity (coming soon)
      7. Memoization and Controlling Re-renders (coming soon)
      8. Context and Its Render Cost (coming soon)
      9. Purity, Strict Mode, Refs and Escape Hatches (coming soon)

      Coming soon

    6. F06 · 10 lessons planned

      Frontend application architecture

      Component, folder, layer and package structure, and how a front-end codebase scales with the size of the team.

      10 concepts in Frontend application architecture
      1. Component-Based Architecture (coming soon)
      2. Component Composition and API Design (coming soon)
      3. Feature-Based and Modular Folder Structure (coming soon)
      4. Module Boundaries and Public APIs (coming soon)
      5. Client-Side Routing Architecture (coming soon)
      6. Layered and Clean Architecture for the UI (coming soon)
      7. Ports and Adapters in the Front End (coming soon)
      8. Dependency Injection and Separation of Concerns (coming soon)
      9. Monorepos and Shared Libraries (coming soon)
      10. Before Micro-Frontends: the Modular Monolith Front End (coming soon)

      Coming soon

    7. F07 · 10 lessons planned

      State management

      Where state lives, who owns it, and the trade-offs between local, global, server, URL and persisted state.

      10 concepts in State management
      1. Local vs Global State (coming soon)
      2. State Management Libraries Compared: Context, Redux, Zustand and Signals (coming soon)
      3. Server State: Caching and Revalidation (coming soon)
      4. URL State (coming soon)
      5. Form State and Validation (coming soon)
      6. Derived and Normalized State (coming soon)
      7. Optimistic Updates and Rollback (coming soon)
      8. State Persistence and Synchronization (coming soon)
      9. Cross-Tab Sync With BroadcastChannel (coming soon)
      10. State Machines With XState (coming soon)

      Coming soon

    8. F08 · 12 lessons planned

      API integration and data architecture

      Calling REST, GraphQL and tRPC APIs, a BFF, pagination, cancellation, retries, error states and typed contracts.

      12 concepts in API integration and data architecture
      1. API Integration Basics: Fetching, Headers and Failure (coming soon)
      2. Consuming REST, GraphQL and tRPC (coming soon)
      3. Backend for Frontend (BFF) (coming soon)
      4. Pagination: Offset, Cursor and Infinite Scroll (coming soon)
      5. List Virtualization (coming soon)
      6. Debouncing and Throttling (coming soon)
      7. Request Cancellation, Timeouts and Race Conditions (coming soon)
      8. Client Retries, Exponential Backoff and Jitter (coming soon)
      9. Error, Loading and Empty States (coming soon)
      10. API Contracts and Data Transformation (coming soon)
      11. From OpenAPI to TypeScript Contract Types (coming soon)
      12. API Versioning and Contract Evolution for Clients (coming soon)

      Coming soon

    9. F09 · 1 of 10 lessons published

      Rendering architecture

      Client, server, static, incremental and streaming rendering, hydration, server components, the edge and SEO, chosen page by page.

      10 concepts in Rendering architecture
      1. Rendering Strategies: CSR, SSR, SSG, ISR and Streaming
      2. Choosing a Rendering Strategy Per Page (coming soon)
      3. Incremental Static Regeneration and On-Demand Revalidation (coming soon)
      4. Streaming SSR and Suspense (coming soon)
      5. Hydration, Selective Hydration and Islands (coming soon)
      6. Debugging Hydration Mismatches (coming soon)
      7. React Server Components (coming soon)
      8. Server Actions and Server-Driven Mutations (coming soon)
      9. Edge Rendering (coming soon)
      10. SEO Architecture for Web Apps (coming soon)

    10. F10 · 5 of 12 lessons published

      Performance engineering

      Core Web Vitals, bundles, images and fonts, preloading, memory, budgets and real-user monitoring, and the design choices that move them.

      12 concepts in Performance engineering
      1. Loading Performance and Core Web Vitals
      2. Optimizing Largest Contentful Paint
      3. Interaction to Next Paint and Responsiveness (coming soon)
      4. Cumulative Layout Shift and Layout Stability
      5. Code Splitting, Lazy Loading and Tree Shaking
      6. Image and Font Optimization
      7. Preloading, Prefetching and Priority Hints (coming soon)
      8. Memory Management and Leaks (coming soon)
      9. Performance Budgets and Profiling (coming soon)
      10. Real User Monitoring (coming soon)
      11. Caching Across the Stack: Browser, CDN, Server and Client State (coming soon)
      12. Performance and Cost Trade-Offs (coming soon)

    11. F11 · 12 lessons planned

      Frontend security

      The browser security model, authentication in the client, injection, CSP, UI permissions and supply-chain risk, with a threat-model view.

      12 concepts in Frontend security
      1. Authentication vs Authorization in the UI (coming soon)
      2. OAuth 2.0, OIDC and PKCE in Single-Page Apps (coming soon)
      3. JWTs, Single Sign-On and the Session Lifecycle (coming soon)
      4. Token Storage and Secure Cookies (coming soon)
      5. Authentication Flows From the SPA to the API (coming soon)
      6. Cross-Site Scripting (XSS) and Its Defenses (coming soon)
      7. CSRF and Clickjacking Defenses (coming soon)
      8. Content Security Policy (coming soon)
      9. RBAC and ABAC on the UI (coming soon)
      10. Dependency and Supply-Chain Security (coming soon)
      11. Third-Party Scripts and Iframe Sandboxing (coming soon)
      12. Threat Modeling for Front Ends (coming soon)

      Coming soon

    12. F12 · 9 lessons planned

      Micro-frontends

      Splitting a front end across teams with Module Federation and other composition models, and what independence costs.

      9 concepts in Micro-frontends
      1. Monolith vs Micro-Frontends (coming soon)
      2. Micro-Frontend Composition: Build-Time, Runtime, Iframes and the Edge (coming soon)
      3. Module Federation in React (coming soon)
      4. Independent Deployment and Shared Dependencies (coming soon)
      5. Cross-App Communication in Micro-Frontends (coming soon)
      6. Micro-Frontends, Conway's Law and Team Topology (coming soon)
      7. Sharing Authentication Across Micro-Frontends (coming soon)
      8. Failure Isolation and Observability in Micro-Frontends (coming soon)
      9. Micro-Frontend Anti-Patterns and Migration From a Monolith (coming soon)

      Coming soon

    13. F13 · 6 lessons planned

      Testing

      What to test at which level, how to test components and networks, and how contract and visual tests keep a front end safe to change.

      6 concepts in Testing
      1. The Testing Pyramid and Trophy for Front Ends (coming soon)
      2. Unit and Component Testing (coming soon)
      3. Integration Testing With Network Mocking (coming soon)
      4. End-to-End Testing and Flaky Tests (coming soon)
      5. Contract Testing for Front Ends (coming soon)
      6. Visual Regression Testing (coming soon)

      Coming soon

    14. F14 · 11 lessons planned

      Design systems and accessibility

      Shared components and tokens, WCAG-level accessibility, internationalization and the compliance view.

      11 concepts in Design systems and accessibility
      1. Design Systems and Accessibility (coming soon)
      2. Design Tokens and Theming (coming soon)
      3. Component Library Architecture (coming soon)
      4. Design System Governance and Versioning (coming soon)
      5. Accessibility Fundamentals and WCAG (coming soon)
      6. Semantic HTML, ARIA and Accessible Names (coming soon)
      7. Keyboard Navigation, Focus Management and Screen Readers (coming soon)
      8. Accessible Forms and Dynamic Content (coming soon)
      9. Internationalization, Localization and RTL (coming soon)
      10. Message Formatting, Plurals and the Intl APIs (coming soon)
      11. Accessibility and Compliance (coming soon)

      Coming soon

    15. F15 · 7 lessons planned

      PWA and offline-first

      Service workers, caching strategies, installable apps and syncing offline changes when the network returns.

      7 concepts in PWA and offline-first
      1. Service Workers (coming soon)
      2. Service Worker Lifecycle and Updates (coming soon)
      3. Service Worker Caching Strategies (coming soon)
      4. Installable PWAs, the Manifest and Push Notifications (coming soon)
      5. Offline-First Sync and Conflict Resolution (coming soon)
      6. Offline Queues and Background Sync (coming soon)
      7. Offline UX Patterns (coming soon)

      Coming soon

    16. F16 · 9 lessons planned

      Real-time architecture

      Polling, server-sent events and WebSockets, reconnection and ordering, presence, CRDTs and collaborative editing.

      9 concepts in Real-time architecture
      1. Polling, Server-Sent Events and WebSockets (coming soon)
      2. WebSockets in Depth (coming soon)
      3. Server-Sent Events in Depth (coming soon)
      4. Reconnection and Message Ordering (coming soon)
      5. Heartbeats, Backpressure and Delivery Guarantees on the Client (coming soon)
      6. Presence and Pub/Sub (coming soon)
      7. Real-Time Data in React State and Query Caches (coming soon)
      8. CRDTs and Operational Transformation (coming soon)
      9. Collaborative Editing Basics (coming soon)

      Coming soon

    17. F17 · 10 lessons planned

      Reliability and observability

      Error boundaries, graceful degradation, feature flags, tracing with correlation IDs and error reporting for real users.

      10 concepts in Reliability and observability
      1. Error Boundaries and Global Error Handling (coming soon)
      2. Graceful Degradation (coming soon)
      3. Resilient UI and Client-Side Circuit Breakers (coming soon)
      4. Failure Modes of Front-End Systems (coming soon)
      5. Feature Flags and A/B Testing (coming soon)
      6. Feature Flag Lifecycle and Experiment Pitfalls (coming soon)
      7. Logging, Tracing and Correlation IDs (coming soon)
      8. OpenTelemetry in the Browser (coming soon)
      9. Error Reporting and Source Maps (coming soon)
      10. End-to-End Observability: From the Browser to the Database (coming soon)

      Coming soon

    18. F18 · 9 lessons planned

      Build tools and deployment

      Bundlers, build performance, CI/CD, canary and blue-green releases, rollbacks and version skew between a front end and its API.

      9 concepts in Build tools and deployment
      1. Bundlers and Build Tooling (coming soon)
      2. Module Formats, Package Exports and Browser Targets (coming soon)
      3. Build Performance and Build Caching (coming soon)
      4. Runtime Configuration and Environments (coming soon)
      5. CI/CD for Front Ends (coming soon)
      6. Blue-Green and Canary Releases, and Rollbacks (coming soon)
      7. Version Skew and Cache-Busting Deployments (coming soon)
      8. Preview Environments and Pipeline Design (coming soon)
      9. Shipping Front-End Changes Safely Alongside the Backend (coming soon)

      Coming soon

    19. F19 · 5 lessons planned

      Mobile and cross-platform

      Sharing code across the web and mobile apps, choosing between responsive web, PWA, hybrid and native, and where sharing stops paying off.

      5 concepts in Mobile and cross-platform
      1. Mobile and Cross-Platform Front Ends (coming soon)
      2. Responsive Web, PWA or Native: a Decision Framework (coming soon)
      3. React Native and Shared-Code Architecture (coming soon)
      4. WebView and Hybrid App Architecture (coming soon)
      5. Mobile Web Performance, Touch and Gestures (coming soon)

      Coming soon

    20. F20 · 8 lessons planned

      AI-powered frontends

      Streaming model output, chat state, long-running requests, tool calls and the trust and safety questions of AI interfaces.

      8 concepts in AI-powered frontends
      1. AI-Powered Frontend Architecture (coming soon)
      2. Streaming LLM Responses in the Browser (coming soon)
      3. Chat Interface State and the Message Model (coming soon)
      4. Long-Running Jobs and Cancellation in AI Interfaces (coming soon)
      5. Tool Calls and Generative UI (coming soon)
      6. AI UX: Trust, Citations and Feedback (coming soon)
      7. Prompt Injection and Output Safety in the UI (coming soon)
      8. On-Device AI and Client-Side Inference (coming soon)

      Coming soon

    21. F21 · 6 lessons planned

      Enterprise frontend architecture

      Governance, platform teams, multi-tenancy and migration for front ends that many teams build and maintain for years.

      6 concepts in Enterprise frontend architecture
      1. Enterprise Frontend Architecture (coming soon)
      2. Front-End Platform Teams and Governance (coming soon)
      3. Multi-Tenant UI Architecture (coming soon)
      4. Enterprise SSO, Audit and Compliance in the UI (coming soon)
      5. Large-Scale Migration and Modernization (coming soon)
      6. Long-Term Maintenance and Dependency Management (coming soon)

      Coming soon

    22. F22 · 8 lessons planned

      Advanced architectural patterns

      Classic design patterns, finite state machines, statecharts and event-driven UI for large and long-lived interfaces.

      8 concepts in Advanced architectural patterns
      1. Design Patterns for Front Ends (coming soon)
      2. Observer, Pub/Sub and Mediator (coming soon)
      3. Command, Strategy, Adapter and Facade (coming soon)
      4. Finite State Machines for UI (coming soon)
      5. Statecharts and Hierarchical State (coming soon)
      6. Event-Driven UI Architecture (coming soon)
      7. Undo, Redo and Event Sourcing in the UI (coming soon)
      8. Plugin and Extension Architectures (coming soon)

      Coming soon

    23. F23 · 17 lessons planned

      Case studies

      Sixteen complete front-end designs, worked end to end as educational reference designs, from autocomplete and feeds to AI chat and collaboration.

      17 concepts in Case studies
      1. How to Read and Reproduce a Front-End Case Study (coming soon)
      2. Front-End Case Study: Search Autocomplete (coming soon)
      3. Front-End Case Study: Infinite Scroll Feed (coming soon)
      4. Front-End Case Study: Instagram- or Twitter-Style Social Feed (coming soon)
      5. Front-End Case Study: WhatsApp Web-Style Chat (coming soon)
      6. Front-End Case Study: Gmail-Style Email Client (coming soon)
      7. Front-End Case Study: Google Docs-Style Collaborative Editor (coming soon)
      8. Front-End Case Study: Netflix- or YouTube-Style Video Front End (coming soon)
      9. Front-End Case Study: Amazon-Style E-Commerce Storefront (coming soon)
      10. Front-End Case Study: Banking Dashboard (coming soon)
      11. Front-End Case Study: Enterprise SaaS Dashboard (coming soon)
      12. Front-End Case Study: Multi-Tenant Application (coming soon)
      13. Front-End Case Study: Real-Time Analytics Dashboard (coming soon)
      14. Front-End Case Study: Travel Booking Flow (coming soon)
      15. Front-End Case Study: Enterprise Micro-Frontend Platform (coming soon)
      16. Front-End Case Study: AI Chat Application (coming soon)
      17. Front-End Case Study: Collaborative Project Management Board (coming soon)

      Coming soon

    24. F24 · 9 lessons planned

      Architect interview and capstone

      Presenting and defending a front-end design, documenting decisions, and a capstone that puts the whole course together.

      9 concepts in Architect interview and capstone
      1. The Front-End Architect Interview Framework (coming soon)
      2. Front-End Estimation and Capacity Drills (coming soon)
      3. Component API and Data Model Design Rounds (coming soon)
      4. JavaScript, Browser and React Interview Questions (coming soon)
      5. Senior, Staff and Architect Expectations (coming soon)
      6. Architecture Decision Records and Documentation (coming soon)
      7. Capstone: Brief and Requirements (coming soon)
      8. Capstone: Architecture and Design Document (coming soon)
      9. Capstone: Build, Audit and Review (coming soon)

      Coming soon

    Questions

    What is front-end system design?
    It is the design of everything between a person's device and the back end: how the browser loads and renders the page, where HTML is produced, how data is fetched and cached, where state lives, how code is split and shipped, and how the result stays fast, accessible, secure and reliable.
    What does this track cover?
    Every part of a front-end system, in modules: the browser and the web platform, application architecture, state management, data fetching, rendering strategies, performance, security, real-time and offline, reliability, testing, accessibility, build and delivery, micro-frontends, design patterns and complete case studies. Each concept has its own lesson.
    Why is the runtime different?
    The code runs on a device you do not control, on a network you cannot predict, on one main thread, for users who keep old copies of your code. The lessons start from that fact.
    Who is it for?
    Developers who can read basic HTML, CSS and JavaScript and want to understand how front-end systems work inside, from a junior moving toward senior to an architect checking their model.
    Is it free?
    Yes. The first lesson of each course is open to everyone, and a free account unlocks the rest, tracks your progress and keeps your place.
    What is published, and what is next?
    The Foundations course is published: the browser, rendering, the event loop, HTTP caching, rendering strategies and Core Web Vitals. The module list below shows every concept the track covers; a lesson is marked coming soon until it is published, and nothing is linked before it exists.
    Do I need to know React?
    Not for the first course. It teaches the browser and the web platform that every framework runs on. React and other frameworks get their own modules later.