Frontend System Design

How frontend system design interviews work: what is being tested, the RADIO framework with a 45 minute time budget, requirements and clarifying questions, frontend estimation (bytes, requests, DOM nodes, memory), component API design, data model and API contract, trade-off vocabulary, and how to communicate a design.

Where and when HTML is produced and how it reaches the user: the critical rendering path, CSR, SSR, SSG, ISR, streaming, React Server Components, islands, partial prerendering, hydration and its alternatives, CDN and edge delivery, HTTP caching headers, resource hints, speculation rules, and SEO.

Frontend performance for system design: Core Web Vitals (LCP, INP, CLS) and how they are measured, loading performance (bundles, code splitting, images, fonts, third parties), runtime performance (long tasks, scheduling, rendering cost, virtualization, workers), memory, performance budgets, and a debugging playbook.

Where state lives and how data flows in a large frontend: server state vs client state vs URL state, query caches (stale-while-revalidate, deduplication, invalidation), normalization, pagination and infinite queries, optimistic updates and rollback, race conditions, forms and drafts, client persistence, and fetching architecture.

Keeping a client live and usable on bad networks: polling, long polling, SSE, WebSockets, WebTransport and push, reconnect with backoff and resume, ordering and dedupe, backpressure, multi-tab connections, service workers and caching strategies, IndexedDB, offline-first with an outbox, background sync, conflict resolution, and CRDTs.

Scaling a frontend codebase and the teams behind it: layered and feature-sliced architecture, module boundaries, design systems and tokens, headless components, styling strategy, monorepos and build caching, micro-frontends (Module Federation, iframes, web components, edge composition), feature flags and experiments, migrations, and error containment.

The quality bars every frontend design must meet: browser security model (same-origin, CORS, XSS, CSRF, CSP, Trusted Types, cookies and tokens, clickjacking, supply chain), authentication flows (sessions, OAuth with PKCE, passkeys), accessibility (semantics, keyboard, focus, ARIA patterns, WCAG), and internationalization (ICU messages, Intl, RTL, locale loading).

Shipping a frontend safely: the testing pyramid and trophy (unit, component, integration, contract, end-to-end, visual regression, accessibility, performance), test strategy for flaky and async UI, RUM and error tracking, logging and tracing correlation, analytics design, CI/CD, progressive delivery (canary, flags, rollback), versioning, and incident response.

Worked frontend system designs for reusable UI components: typeahead, news feed with infinite scroll, image carousel, modal and toast overlay manager, data table, file uploader, nested comments, and date picker. Each covers requirements, architecture, state, API, performance, accessibility, and edge cases.

Worked frontend system designs for full applications: chat, collaborative document editor, e-commerce storefront and checkout, real-time analytics dashboard, video streaming UI, kanban board with drag and drop, maps and ride tracking, and photo library. Each covers requirements, architecture, data flow, real-time, performance, and trade-offs.

Frontend system design interview rehearsal: what each level is expected to know, a 60-question bank with strong-answer checklists, a mock 45 minute walkthrough, 30 design prompts with key points, diagnose-the-problem scenarios, cheat sheets, common mistakes, and a 7-day study plan.