cf.completefrontend
FRONTEND SYSTEM DESIGN

Design frontends like a senior engineer

Start with the fundamentals: how the web works, APIs, real-time updates, rendering, caching, performance, security, and more, each explained simply with hand-drawn diagrams. Then practice on real design problems, from one component to a whole app, answered step by step with a framework you can use in any interview.

111 lessons in 17 modules · 144 design problems

Start with the fundamentals Browse the problems
A whiteboard sketch of a news feed design. In the browser: a feed view that renders a virtual list, a data layer that fetches and retries, and a post store that keeps posts by ID. Scrolling near the end asks the data layer for more posts, the data layer saves them by ID in the store, and a curved arrow carries new data from the store back to the view. On the server side: a CDN sends JS, CSS, and images to the view, an API or BFF answers the data layer over HTTP at GET /feed, and a push channel sends new posts to the store with server-sent events.BrowserServer sideFeed viewvirtual listData layerfetch and retryPost storeposts by IDnear the endsave by IDCDNJS, CSS, imagesassetsAPI or BFFGET /feedHTTPPush channelSSE: new postspush
A news feed as you would draw it in an interview: the browser's parts on the left, the servers on the right, and data moving one way. Every problem here builds a picture like this, one decision at a time.

One framework for every question

Every problem here is answered in the same order, called RADIO. Learn it once and you'll never stare at a blank whiteboard again.

A timeline of a 45-minute interview answered in RADIO order. Hello from 0 to 3 minutes, requirements 3 to 8, architecture 8 to 16, data model 16 to 20, interface 20 to 25, optimizations 25 to 40, the longest phase, and your questions 40 to 45. Three checkpoints are marked: requirements written by minute 8, a box diagram drawn by minute 16, and deep dives started by minute 25.requirements writtenbox diagram drawndeep dives starthihelloRRequirementsAArchitectureDDataIInterfaceOOptimizations?questions0381620254045minutes into a 45-minute interview
The same order for every question. The basics take about 22 minutes, which leaves 15 for the deep dives, where the level is decided.
  1. RequirementsAsk questions. Agree on what it must do, how well, and what's out of scope.
  2. ArchitectureDraw the main parts, on the client and the server, and how data flows.
  3. Data modelDecide what the client keeps, its shape, and where each piece lives.
  4. InterfaceDefine the APIs and component props the parts use to talk.
  5. OptimizationsGo deep on speed, reliability, accessibility, and security.
How to use RADIO in the interview

The fundamentals

A course in 17 modules, from how the interview runs to structuring large frontends. Each lesson builds the idea from zero with diagrams, labs, and exercises, then ends with interview questions. Read in order, or search for the topic you need.

111 lessons in 5 stages and 17 modules.

Stage 1 Foundations

Start here

How the interview runs and the one framework used for every answer, then what happens between a URL and pixels and how a frontend talks to servers.

3 modules · 17 lessons

  1. 4 lessons · 1 h 31 min

    Module 1: The interview

    How a frontend system design interview runs, and a framework for answering any question in it.

    1. 1.1The RADIO framework23 min
    2. 1.2What interviewers look for, by level25 min
    3. 1.3Back-of-the-envelope numbers for frontend23 min
    4. 1.4Component questions vs app questions20 min
  2. 6 lessons · 2 h 36 min

    Module 2: How the web works

    What happens between typing a URL and seeing pixels: DNS, TCP, TLS, HTTP, and the browser's rendering pipeline.

    1. 2.1From URL to pixels27 min
    2. 2.2The critical rendering path25 min
    3. 2.3Layout, paint, and compositing25 min
    4. 2.4HTTP/1.1, HTTP/2, and HTTP/324 min
    5. 2.5Inside the browser27 min
    6. 2.6DNS, CDNs, and the edge28 min
  3. 7 lessons · 2 h 50 min

    Module 3: APIs and data fetching

    How the frontend talks to servers: REST, GraphQL, gRPC, pagination, and designing APIs around the UI.

    1. 3.1REST for frontends24 min
    2. 3.2GraphQL25 min
    3. 3.3gRPC and gRPC-Web24 min
    4. 3.4Pagination: offset, cursor, and keyset24 min
    5. 3.5Backend for frontend (BFF)24 min
    6. 3.6API contracts, versioning, and errors25 min
    7. 3.7Uploading files24 min

Stage 2 Core

Data in motion

Fetching data reliably, keeping a page live, and letting many people edit the same thing at once.

3 modules · 20 lessons

  1. 7 lessons · 2 h 48 min

    Module 4: Data fetching patterns

    Getting data to the screen reliably: request races, cancellation, debouncing, optimistic updates, retries, and prefetching.

    1. 4.1Request races and cancellation24 min
    2. 4.2Debounce and throttle22 min
    3. 4.3Optimistic updates24 min
    4. 4.4Retries, timeouts, and backoff25 min
    5. 4.5Deduplication and batching24 min
    6. 4.6Prefetching and preloading data23 min
    7. 4.7Server-state libraries26 min
  2. 8 lessons · 3 h 10 min

    Module 5: Real-time communication

    Keeping a page up to date: polling, long polling, server-sent events, WebSockets, and webhooks.

    1. 5.1Short polling26 min
    2. 5.2Long polling23 min
    3. 5.3Server-sent events23 min
    4. 5.4WebSockets26 min
    5. 5.5Webhooks22 min
    6. 5.6Choosing a real-time technique21 min
    7. 5.7Web push notifications26 min
    8. 5.8WebRTC23 min
  3. 5 lessons · 1 h 58 min

    Module 6: Collaboration and sync

    Many people editing the same thing at once: operational transformation, CRDTs, presence, and resolving conflicts.

    1. 6.1Real-time collaboration23 min
    2. 6.2Operational transformation (OT)24 min
    3. 6.3CRDTs24 min
    4. 6.4Presence and live cursors23 min
    5. 6.5Conflict resolution strategies24 min

Stage 3 Core

Rendering and speed

Where HTML gets made, how to make pages fast and keep them fast, and where to keep data close.

3 modules · 25 lessons

  1. 8 lessons · 3 h 8 min

    Module 7: Rendering patterns

    Where and when HTML is made: client-side, server-side, static, streaming, islands, and server components.

    1. 7.1Client-side rendering27 min
    2. 7.2Server-side rendering23 min
    3. 7.3Static generation and incremental regeneration24 min
    4. 7.4Streaming server rendering22 min
    5. 7.5Islands and partial hydration23 min
    6. 7.6React Server Components20 min
    7. 7.7Choosing a rendering strategy24 min
    8. 7.8Single-page vs multi-page apps25 min
  2. 10 lessons · 4 h 3 min

    Module 8: Performance

    Making pages load fast and stay smooth: Core Web Vitals, loading strategies, bundles, images, and runtime work.

    1. 8.1Core Web Vitals24 min
    2. 8.2Loading strategies24 min
    3. 8.3Code splitting and bundling24 min
    4. 8.4Images and media24 min
    5. 8.5Web fonts23 min
    6. 8.6List virtualization24 min
    7. 8.7Runtime performance23 min
    8. 8.8Memory in long-lived apps25 min
    9. 8.9Performance budgets and monitoring28 min
    10. 8.10Compression and minification24 min
  3. 7 lessons · 2 h 54 min

    Module 9: Caching and storage

    Every place data can be kept closer to the user, from HTTP caches and CDNs to IndexedDB, and how to keep it fresh.

    1. 9.1HTTP caching30 min
    2. 9.2CDN caching24 min
    3. 9.3Service worker caching24 min
    4. 9.4Client storage options23 min
    5. 9.5IndexedDB25 min
    6. 9.6Cache invalidation24 min
    7. 9.7In-memory caches24 min

Stage 4 Core

Building it right

State that stays in step, attacks a frontend must stop, interfaces everyone can use, and every language.

4 modules · 27 lessons

  1. 7 lessons · 2 h 41 min

    Module 10: State management

    Where each piece of state should live, how to normalize it, and how to keep the UI and the server in step.

    1. 10.1Kinds of state24 min
    2. 10.2Normalizing state23 min
    3. 10.3Local vs global state21 min
    4. 10.4The URL as state24 min
    5. 10.5State machines for UI24 min
    6. 10.6Forms at scale23 min
    7. 10.7Syncing state across tabs22 min
  2. 9 lessons · 3 h 39 min

    Module 11: Security

    The attacks a frontend must stop (XSS, CSRF, clickjacking) and the defenses: CSP, CORS, secure cookies, and safe dependencies.

    1. 11.1Cross-site scripting (XSS)24 min
    2. 11.2Content Security Policy24 min
    3. 11.3Cross-site request forgery (CSRF)22 min
    4. 11.4CORS24 min
    5. 11.5Authentication and token storage24 min
    6. 11.6Clickjacking and iframes28 min
    7. 11.7Third-party scripts and supply chain24 min
    8. 11.8Security headers24 min
    9. 11.9Validating and sanitizing input25 min
  3. 7 lessons · 2 h 48 min

    Module 12: Accessibility

    Building interfaces everyone can use: semantics, keyboard and focus, screen readers, and color.

    1. 12.1Semantic HTML first23 min
    2. 12.2Keyboard navigation25 min
    3. 12.3Focus management24 min
    4. 12.4ARIA widget patterns25 min
    5. 12.5Screen readers and live regions24 min
    6. 12.6Color, contrast, and motion23 min
    7. 12.7Testing accessibility24 min
  4. 4 lessons · 1 h 34 min

    Module 13: Internationalization

    Serving every language and region: translations, plurals, dates, numbers, and right-to-left layouts.

    1. 13.1Translating an app24 min
    2. 13.2Dates, numbers, and plurals24 min
    3. 13.3Right-to-left layouts24 min
    4. 13.4Locales, routing, and SEO22 min

Stage 5 Advanced

Running it at scale

Working offline, seeing what real users see, testing with confidence, and structuring large frontends.

4 modules · 22 lessons

  1. 4 lessons · 1 h 33 min

    Module 14: Offline and PWAs

    Working with a bad or no connection: service workers, installable apps, and syncing changes later.

    1. 14.1Service workers21 min
    2. 14.2Progressive web apps24 min
    3. 14.3Offline-first design24 min
    4. 14.4Background sync and queued writes24 min
  2. 6 lessons · 2 h 27 min

    Module 15: Observability and experiments

    Knowing what happens in real users' browsers: logging, error tracking, real-user monitoring, feature flags, and A/B tests.

    1. 15.1Logging in the browser24 min
    2. 15.2Error tracking24 min
    3. 15.3Real-user monitoring (RUM)25 min
    4. 15.4Feature flags26 min
    5. 15.5A/B testing24 min
    6. 15.6Product analytics24 min
  3. 4 lessons · 1 h 32 min

    Module 16: Testing

    A testing strategy that catches bugs early: unit, integration, end-to-end, visual, and performance tests.

    1. 16.1A frontend testing strategy24 min
    2. 16.2Unit and integration tests23 min
    3. 16.3End-to-end tests22 min
    4. 16.4Contract and visual regression tests23 min
  4. 8 lessons · 3 h 9 min

    Module 17: Frontend architecture

    Structuring large frontends: component APIs, design systems, config-driven UI, monorepos, and micro-frontends.

    1. 17.1Designing component APIs24 min
    2. 17.2Design systems24 min
    3. 17.3Config-driven UI24 min
    4. 17.4Micro-frontends26 min
    5. 17.5Monorepos25 min
    6. 17.6Structuring a large frontend18 min
    7. 17.7Client-side routing23 min
    8. 17.8Web components and shadow DOM25 min

Design problems

Components, features, and whole apps, each an in-depth guide: the design built up step by step, every big decision weighed against the alternatives, with diagrams, interactive labs, and exercises to check your understanding.

Three nested rings show how a problem grows with its level. Easy, the inner ring: one component, such as a Save button with a tooltip that says Saves a draft. Medium, the middle ring: a feature, which adds a data layer that saves and retries and an API that takes POST /drafts. Hard, the outer ring: a whole app, which adds a CDN, a push channel for live updates, and a service worker so it works offline.Hard: a whole appMedium: a featureEasy: one componentSaves a draftSaveData layersave, retryAPIPOST /draftsCDNPush channellive updatesService workerworks offline
Each level keeps everything inside it and adds a ring. Easy problems are about one component's API, keyboard, and accessibility; medium adds data and state; hard adds scale, real time, and offline.

Easy: one component

17 ready

All easy problems

Medium: a feature

58 ready

All medium problems

Hard: a whole app

69 ready

All hard problems