Frontend System Design

Design real frontends the way senior interviews and real teams do: a repeatable framework, the trade-offs, and the building blocks in code.

45 lessons across 8 units: rendering, state, networking, performance, accessibility and security, then seven full case studies, with quizzes and 62 coding problems.

Units
8
Lessons
45
Coding problems
62
Examples
45

Free: units 1 to 2 (10 lessons). Units 3 to 8 with DevArcade Pro.

See pricing

What you'll learn

  • The Design InterviewWhat frontend system design is, the RADIO framework, requirements, estimates and trade-offs.
  • Rendering and ArchitectureCSR, SSR, SSG and ISR, hydration and islands, SPA vs MPA, micro-frontends and component boundaries.
  • State and Data FlowKinds of state, URL state, normalization, server caches, optimistic updates and events.
  • Networking and APIsREST, GraphQL and RPC, pagination, dedupe and retries, cancellation, real time and offline sync.
  • PerformanceCore Web Vitals, the critical path, code splitting, images, virtualization and caching layers.
  • Accessibility, i18n and UXSemantics and focus, keyboard widgets, localization, loading and error states, resilience.
  • Security and ReliabilityXSS and output encoding, CSP and CSRF, tokens, feature flags, monitoring and testing.
  • Case StudiesNews feed, typeahead, carousel, chat, kanban, product page and design system, then the boss.

Course outline

8 units and 45 lessons. Each lesson has a short read with examples you run, a quiz, and coding problems tested in your browser; most have a step-through visualizer.

  1. Unit 1:The Design Interview

    What frontend system design is, the RADIO framework, requirements, estimates and trade-offs.

    Free
    1. What Frontend System Design Is Designing the client side of a product: components, data, networking and quality, and how this differs from backend system design.
      1 problem
    2. The RADIO Framework A repeatable order for any design question: Requirements, Architecture, Data model, Interface, Optimizations.
      1 problem
    3. Requirements and Scope Functional versus non-functional requirements, the questions that shape a design, and cutting scope on purpose.
      1 problem
    4. Back-of-Envelope Estimates Quick client-side numbers: payload sizes, list lengths, DOM nodes and update rates, and what each one tells you to do.
      1 problem
    5. Communicating Trade-offs Every choice costs something: name the options, the criteria and the cost, and decide out loud.
      1 problem

  2. Unit 2:Rendering and Architecture

    CSR, SSR, SSG and ISR, hydration and islands, SPA vs MPA, micro-frontends and component boundaries.

    Free
    1. CSR, SSR, SSG and ISR Where and when HTML is produced: in the browser, on each request, at build time, or at build time with periodic refresh.
      1 problem
    2. Hydration, Streaming and Islands Making server HTML interactive, streaming it in pieces, and only shipping JavaScript for the parts that need it.
      1 problem
    3. SPA vs MPA and Routing One page that swaps views versus many server pages, client routing on the History API, and the hybrids in between.
      1 problem
    4. Micro-frontends Splitting one product across independently deployed frontends: when it pays off, how pieces are composed, and the shared-dependency trap.
      1 problem
    5. Component Architecture and Boundaries Splitting a screen into components, presentational versus container pieces, and where shared state should live.
      1 problem

  3. Unit 3:State and Data Flow

    Kinds of state, URL state, normalization, server caches, optimistic updates and events.

    Pro
    1. Kinds of State Local UI state, server state, URL state, form state and global client state: each has a natural home.
      1 problem
    2. Normalizing Client Data Store each entity once, by id, and refer to it everywhere else: no duplicate copies to keep in sync.
      2 problems
    3. Caching Server State Fresh, stale and expired data, stale-while-revalidate, cache keys and invalidation after writes.
      2 problems
    4. Optimistic Updates and Rollback Show the result of an action before the server confirms it, and undo it cleanly when the request fails.
      1 problem
    5. Event-Driven Updates and Form State Publish and subscribe between distant parts of the app, and the state a real form needs beyond its values.
      1 problem

  4. Unit 4:Networking and APIs

    REST, GraphQL and RPC, pagination, dedupe and retries, cancellation, real time and offline sync.

    Pro
    1. REST, GraphQL and RPC Three ways to shape the client-server interface, over-fetching and under-fetching, and batching many small requests into one.
      1 problem
    2. Offset vs Cursor Pagination Page numbers versus "give me what comes after this item", why feeds use cursors, and merging pages without duplicates.
      1 problem
    3. Request Dedupe and Retries Share one in-flight request between callers, and retry failures with exponential backoff and jitter.
      2 problems
    4. Timeouts, Cancellation and Rate Limits Give up on slow requests, cancel ones nobody needs any more with AbortController, and limit how fast the client sends.
      2 problems
    5. Real-Time Updates Polling, long polling, server-sent events and WebSockets, reconnection, and keeping messages in order.
      1 problem
    6. Offline Support and Sync Local-first writes, an outbox of pending changes replayed in order, and resolving conflicts when two devices disagree.
      1 problem

  5. Unit 5:Performance

    Core Web Vitals, the critical path, code splitting, images, virtualization and caching layers.

    Pro
    1. Core Web Vitals LCP, INP and CLS: what each measures, the thresholds, and what moves them.
      2 problems
    2. The Critical Rendering Path From bytes to pixels: what blocks the first paint, and how preload, async, defer and inlining change it.
      1 problem
    3. Code Splitting and Lazy Loading Ship only the code the current screen needs, load the rest on demand, and survive a chunk that fails to load.
      2 problems
    4. Images and Fonts Responsive images, modern formats, lazy loading and reserved space; fonts that load fast without jumping.
      1 problem
    5. Virtual Lists, Memoization and Workers Render only the rows on screen, skip work whose inputs did not change, and move heavy work off the main thread.
      2 problems
    6. Caching Layers and Budgets Memory, HTTP cache, service worker and CDN: who caches what, Cache-Control, and performance budgets.
      2 problems

  6. Unit 6:Accessibility, i18n and UX

    Semantics and focus, keyboard widgets, localization, loading and error states, resilience.

    Pro
    1. Semantic Structure and Focus Landmarks and headings as the page's map, focus management in SPAs and dialogs, and honoring reduced motion.
      1 problem
    2. Keyboard and Screen Readers for Complex Widgets Tabs, menus, listboxes and comboboxes: roving tabindex, arrow keys, and the roles and states that make them announce correctly.
      1 problem
    3. Internationalization Message catalogs with fallbacks, plural rules, numbers and dates through Intl, right-to-left layouts and text that grows.
      1 problem
    4. Loading, Empty and Error States Every data-driven view has more states than "loaded": design each one, avoid spinner flashes, and keep stale data visible on errors.
      1 problem
    5. Resilience and Graceful Degradation Error boundaries, progressive enhancement, fallbacks for failing dependencies, and circuit breakers that stop hammering a broken service.
      1 problem

  7. Unit 7:Security and Reliability

    XSS and output encoding, CSP and CSRF, tokens, feature flags, monitoring and testing.

    Pro
    1. XSS and Output Encoding How injected scripts get into pages, encoding output for its context, safe URLs, and sanitizing the HTML you must render.
      2 problems
    2. CSP, CSRF and Clickjacking A Content Security Policy as a second line of defense, forged cross-site requests, and pages framed to trick clicks.
      2 problems
    3. Auth Tokens and Sessions Cookies versus web storage for credentials, short-lived access tokens with refresh, and refreshing once when many requests need it.
      1 problem
    4. Feature Flags and Error Monitoring Ship dark, roll out gradually with stable buckets, keep a kill switch, and group production errors into actionable issues.
      2 problems
    5. Testing Strategy and Observability Unit, integration, end-to-end and visual tests, what each catches, and measuring real users with percentiles.
      1 problem

  8. Unit 8:Case Studies

    News feed, typeahead, carousel, chat, kanban, product page and design system, then the boss.

    Pro
    1. Case Study: News Feed An endless, live feed of posts with images, likes and comments: cursor pages, a "new posts" pill, virtualization and optimistic likes.
      1 problem
    2. Case Study: Autocomplete A search box with suggestions: debouncing, caching by prefix, racing responses, keyboard support and highlighting.
      2 problems
    3. Case Study: Image Carousel A gallery carousel: state machine, autoplay that respects users, preloading neighbors, swipe and keyboard, and no layout shift.
      2 problems
    4. Case Study: Chat App Real-time messaging: WebSocket transport, optimistic sends reconciled with server ids, ordering, unread counts and history.
      2 problems
    5. Case Study: Collaborative Kanban A board several people edit at once: fractional ordering, drag and drop that works with a keyboard, and merging concurrent moves.
      2 problems
    6. Case Study: Product Page and Cart An e-commerce product page and cart: rendering for SEO and speed, money in integer cents, a cart that survives sign-in, and a careful checkout.
      2 problems
    7. Case Study: Design System A component library many teams share: tokens and theming, component APIs with variants, accessibility built in, versioning and adoption.
      2 problems
    8. Boss: A Query Client Put the course together: a small data layer with caching, freshness, request dedupe, subscriptions, optimistic writes and invalidation.
      1 problem

Start Frontend System Design for free

Enroll for free and units 1 and 2 are yours. DevArcade Pro opens every unit of every course, including new ones as they launch, monthly or yearly.

All courses