Frontend System Design Certification

Syllabus

Every paper is drawn to this mix, so the weights are a promise rather than a guide. The numbers are how many of the 65 questions come from each area.

• 3

  CSR, SSR, and SSG: the real trade-offs

  What each rendering strategy actually does, and the honest trade-offs in TTFB, time-to-interactive, SEO, and infrastructure cost.

• 2

  Incremental Static Regeneration

  Stale-while-revalidate at the page level, time-based versus on-demand revalidation, and where ISR is the wrong tool.

• 2

  Streaming SSR and Suspense

  Why one slow dependency blocks a whole SSR response, and how Suspense boundaries let fast content ship first.

• 3

  Hydration and why it's expensive

  What hydration actually re-executes after paint, why a finished-looking page can still be unresponsive, and partial/progressive hydration.

• 2

  Resumability, islands, and choosing a rendering strategy

  Islands architecture, resumability as a further alternative to full-page hydration, and a repeatable framework for choosing per route.

• 2

  Local, lifted, and global state

  Defaulting to the smallest scope that works, lifting to a common ancestor, and why 'everything global' erodes locality of reasoning.

• 2

  Normalizing state shape

  Duplicated nested entities as a bug source, ID-keyed normalization, and the write-time/read-time trade it makes.

• 4

  Server state vs. client state

  Why server-owned data is a fundamentally different problem — staleness, revalidation, deduplication, cache invalidation — from local UI state.

• 2

  Optimistic updates and rollback

  Hiding latency by updating before server confirmation, the rollback path this obligates, and reconciling concurrent mutations.

• 3

  State machines for complex UI

  Why independent booleans allow impossible states, and modeling explicit states and named transitions instead.

• 2

  The critical rendering path

  DOM/CSSOM to render tree to layout to paint, which resources block it, and the concrete levers (defer/async, critical CSS, resource hints).

• 2

  Code-splitting and bundle budgets

  Route- and component-level splitting, the prefetching trade-off it introduces, and enforcing a real, CI-checked bundle budget.

• 2

  Virtualization for large lists

  The real cost of rendering unbounded lists in full, windowing to render only the visible range, and fixed vs. variable item heights.

• 3

  Memoization strategy and its costs

  React.memo, useMemo, and useCallback as a comparison-cost-for-render-cost trade, and why memoizing everything can be net slower.

• 2

  Core Web Vitals, images, and fonts

  LCP, INP, and CLS as distinct, targeted metrics, and the concrete image and font strategies that move each one.

• 2

  Why and when to split a frontend

  The organizational problem micro-frontends actually solve, and the real costs — duplicated dependencies, cross-team contracts.

• 2

  Module federation and composition models

  How independently built pieces compose at runtime, and the build-time versus run-time composition trade-off.

• 2

  The well-organized monolith alternative

  What actually makes a monolith painful, and how enforced module boundaries and fast CI deliver the same benefit without splitting.

• 2

  Building a component library that scales

  Layering tokens, primitives, and patterns, resisting scope creep on shared components, and real ownership of the library's coherence.

• 2

  API design for shared components

  Composition over configuration, controlled versus uncontrolled components, and consistent naming across a component library.

• 1

  Versioning and breaking changes

  Honoring semantic versioning as a promise, deprecation windows, and codemods for migrating consumers.

• 1

  Theming and design tokens

  Tokens as indirection between a design decision and its usage sites, and semantic tokens as what makes dark mode and rebrands tractable.

• 2

  How to approach a system design interview

  Clarifying requirements before proposing a solution, naming trade-offs explicitly, and when 'it depends' is the strongest answer.

• 2

  Worked scenario: a social media feed

  Splitting rendering strategy by public/indexable versus personalized, normalized feed data, virtualization, and optimistic likes.

• 2

  Worked scenario: an image-heavy e-commerce PLP

  ISR for SEO-sensitive periodically-changing listings, image strategy against LCP/CLS, and URL-driven filter state.

• 1

  Worked scenario: a real-time collaborative editor

  Why the editing surface is a CSR case, optimism at typing-latency stakes, and CRDTs/OT conceptually for concurrent edits.

• 1

  Worked scenario: a Kanban board

  Per-column virtualization, drag under concurrent writes, filter state in the URL as the shareable primitive, and real-time reconciliation.

• 1

  Worked scenario: a collaborative wiki

  SSR reader + CSR editor split, progressive tree loading, CRDT/OT for concurrent editing, autosave with real conflict merge, and honest presence.

• 1

  Worked scenario: a code-review diff viewer

  Two-level virtualization (file + line), highlighting split between main thread and Worker, and content-addressed comment anchors across force-pushes.

• 1

  Worked scenario: a CI/CD pipeline dashboard

  Layered-DAG stage layout, virtualized log with bounded live tail and user-controlled auto-scroll, and server-filtered run history with URL state.

• 1

  Worked scenario: a browser code editor

  Owning the render loop instead of React-per-line, tokenization split between main thread and Worker, latency-budget tiering, and sandboxed extensions.

• 1

  Worked scenario: a chat with threads

  Variable-height virtualization with pinned-bottom and two-direction windowing, threads as a parallel URL, coalesced typing indicators, and heartbeat-based presence.

• 1

  Worked scenario: a search autocomplete

  Debounce + cancellation + match-on-response, bounded LRU with stale-while-revalidate, and the combobox ARIA pattern.

• 1

  Worked scenario: a video player

  Adaptive bitrate (HLS/DASH), DRM via EME as a trust boundary, custom controls, WebVTT captions, and QoE telemetry.

• 1

  Worked scenario: an analytics dashboard

  Progressive query loading via IntersectionObserver, keyed cancellation, SVG/canvas/WebGL by point density, and URL-as-state for time range and filters.

• 1

  Worked scenario: an infinite canvas

  Single canvas with viewport culling via a spatial index, one-transform-matrix pan+zoom, hit-testing from the index, and local-first drag with throttled multi-user sync.

What sitting it is like