Loading...
Loading...
A 10-phase, interview-focused frontend system design curriculum. The Senior Track follows a 3-month roadmap: core web fundamentals, architecture, state, APIs, performance, caching, security, real-time, SSR/Next.js, then system design practice. The Staff Track covers platform architecture, org-scale trade-offs, migrations, and capstone walkthroughs.
What happens when you enter a URL: the JavaScript runtime, the browser rendering path, DNS, TLS, HTTP versions, cookies, CORS, CDNs, and cache headers.
How JavaScript actually runs: V8 engine, call stack, memory heap, Web APIs, event loop, microtask vs callback queues, non-blocking I/O, garbage collection, and Web Workers.
The complete 5-stage path from URL to pixels: Parse (DOM & CSSOM), Style (render tree), Layout (reflow), Paint, and Composite, plus what triggers each stage and how to optimize for Web Vitals.
HTTP/2 vs HTTP/3, TCP vs UDP vs QUIC, DNS, TLS, connection pooling, load balancing, CDN, WebSockets, SSE, and Service Workers.
Structuring large applications: component and feature boundaries, container vs presentational split, shared design systems, monorepos, and micro-frontend basics.
How React works under the hood: Virtual DOM, Fiber architecture, render vs commit phases, reconciliation, diffing, hooks storage, state updates, and React 18 concurrent features.
Compound components, controlled vs uncontrolled, render props, custom hooks, HOCs, provider pattern, error boundaries, portals, and state machines.
Micro-frontend architecture: Module Federation, Native Federation, Single-SPA, Web Components, iframes, team autonomy, and independent deployment.
The four state layers: local, global, server, and URL. Pick the smallest tool that fits and defend the choice with re-render and caching trade-offs.
Local, global, and server state: Redux Toolkit, Zustand, Context API, React Query, MobX, Jotai, patterns, trade-offs, and when to use each.
The fourth state layer: search params, routing state, shareable and restorable UI, filter/sort/pagination in the URL, and navigation patterns in the App Router.
REST vs GraphQL, versioning, pagination, retries, timeouts, cancellation, debouncing, throttling, polling, and race-condition handling in real UIs.
REST vs GraphQL, API versioning, offset vs cursor pagination, retries with backoff, timeouts, request cancellation, debouncing, throttling, polling, and race-condition handling.
Loading and runtime optimization plus the metrics interviewers ask for by name: LCP, INP, CLS, FCP, and TTFB.
Core Web Vitals (LCP, INP, CLS), Critical Rendering Path optimization, image/JS/CSS/network tuning, and the tools SDE-2 frontend engineers use to measure and budget performance.
The full cache chain from browser to CDN to API to database, with invalidation strategy, stale-while-revalidate, and load-balancing basics.
Multi-layer caching from browser to database: HTTP headers, CDN, Redis, cache patterns (cache-first, stale-while-revalidate), browser storage APIs, and React Query / SWR client caching.
XSS, CSRF, CORS, CSP, and the question every loop asks: where do you store an access token, and what are the trade-offs?
Protect client-side apps from XSS, CSRF, SSRF, IDOR, JWT theft, SQL injection, CORS misconfig, insecure dependencies, and sensitive data exposure.
Sessions vs JWT, OAuth 2.0 and OIDC flows, access and refresh tokens, silent refresh, rotation, logout and revocation, RBAC vs ABAC, and route protection.
WebSockets, SSE, and polling, plus the parts candidates forget: reconnection, heartbeats, ordering, duplicates, and offline handling.
WebSockets, SSE, long polling and polling compared, plus reconnection with backoff, heartbeats, message ordering, deduplication, offline queues, and sync on reconnect.
CSR, SSR, SSG, ISR, Server Components, streaming, hydration, route caching, revalidation, and middleware in the App Router.
How HTML gets generated and delivered to the browser: CSR, SSR, SSG, ISR, Streaming, Hydration, Islands Architecture, and React Server Components.
Next.js App Router architecture: SSG, SSR, ISR, CSR, React Server Components, data fetching, middleware, Server Actions, streaming, and performance optimizations.
Stop reading and start designing: the RADIO framework, production-quality concerns, and timed drills from autocomplete through collaborative editors.
Design large-scale frontend systems: RADIO framework, UI components vs applications, rendering strategies, state management, performance, accessibility, i18n, and security.
Unit, integration, E2E, and snapshot testing: Jest, Vitest, React Testing Library, Playwright, Cypress, MSW, testing pyramid, and Web Vitals.
Metrics, logs, and traces: the 3 pillars of observability, Golden Signals, Prometheus, Grafana, OpenTelemetry, SLIs/SLOs/SLAs, and distributed tracing.
Staff and principal interviews test judgment under ambiguity: platform design, RFC/ADR process, build-vs-buy, TCO, compliance, migrations, multi-tenant B2B, experimentation, AI features, media dashboards, and global i18n: with 45-minute capstone scripts and explicit time budgets. Complete the Senior Track first.
Staff-level frontend architecture: org-scale platform design, RADIO+OTE framework, migrations at scale, design system governance, reliability, and capstone exercises for principal/staff interviews.
Monorepo vs polyrepo, CI/CD golden path, preview environments, codegen, lint gates, dependency policy, and internal SDK patterns for platform engineers.
Design tokens, governance models, semver and codemods, Chromatic visual regression, a11y CI, adoption metrics, and contribution RFC workflows.
Client-side SLOs, error budgets, RUM, graceful degradation, circuit breakers, incident response, per-remote error boundaries, and kill switches.
Feature flag architecture, gradual rollouts, guardrails, holdouts, flag debt lifecycle, and emergency kill switches for safe releases.
B2B multi-tenant architecture: tenant context, entitlements, white-label theming, audit logs, client data isolation, and SSO at scale.
Locale bundle splitting, RTL layouts, CDN regional delivery, ICU message format, compliance copy, and i18n testing at global scale.
Adaptive bitrate video (HLS/DASH), dashboard virtualization, Web Workers, real-time charts, and performance budgets for media-heavy UIs.
Streaming LLM tokens, context window management, cost controls, content safety, fallbacks, and observability for AI-powered UI.
New to system design? Start at Module 1, JavaScript Internals: the runtime model every later module builds on.
Open JavaScript Internals →Practise real prompts. 13 timed design drills with full model answers, failure modes, and interviewer pushback.
Design Drills →Size a design in your head. Reference numbers, worked examples, and a JavaScript budget calculator.
Frontend Estimation →Ready for a full staff loop? Run the 60-minute cross-topic mock with synthesis prompts and self-assessment rubric.
Start 60-min Staff Mock →Preparing for staff or principal? Start with Module 20, then deepen with Platform, Design Systems, and Reliability modules.
Staff Frontend System Design →