Frontend System Design
The concepts and patterns behind frontend architecture rounds — how to reason about rendering, state, data flow, caching, performance, and accessibility. Once these click, the interview questions become a matter of applying a repeatable structure.
What frontend system design is
Frontend system design is the architecture discipline of building a large client application: how you render, where state lives, how data flows in and out, and how the UI stays fast, accessible, and resilient at scale. Unlike backend system design, you own the client boundary — the browser, the network edge, and the user’s perception of speed.
A repeatable approach (RADIO)
Strong candidates follow a structure instead of improvising: Requirements (clarify scope and constraints), Architecture (high-level components and boundaries), Data model (state shape and API contracts), Interface (component and API design), and Optimizations (performance, accessibility, resilience). Driving the conversation through a framework is itself a scored signal.
Rendering strategy
Choosing between client rendering, server rendering, static generation, and streaming — and knowing the trade-offs for time-to-first-byte, interactivity, SEO, and caching. Most real answers are hybrid: server-render the shell, hydrate islands, and stream the rest.
State ownership and data flow
Deciding what is server state vs client state, where each piece lives, and how it updates. Good designs give every piece of state a clear owner and avoid one global bucket. Server-cache libraries (React Query / SWR) handle fetching, caching, and invalidation so components stay declarative.
Data fetching, caching & invalidation
How the client requests data (REST, GraphQL, RPC), how it paginates (offset vs cursor), and how it caches responses across navigations. The hard part is invalidation: optimistic updates with safe rollback, stale-while-revalidate, and keeping caches consistent under live inserts and deletes.
Performance & Core Web Vitals
Designing for LCP, INP, and CLS: code-splitting, prefetching on intent, virtualization for long lists, image optimization, and avoiding layout shift. Performance is a first-class architecture concern, not a final polish step.
Resilience, accessibility & observability
Loading, empty, and error states for every async path; graceful degradation when a request or model call fails; keyboard and screen-reader support; and the monitoring, alerting, and rollback safety that keep a frontend reliable in production. Interviewers probe these because juniors skip them.