System Design

A frontend-leaning system design round on one page: a framework to structure your answer, the trade-off tables interviewers expect, and outlines for the classic prompts.

The interview framework

1. Requirements (about 5 min): functional (what users do), non-functional (devices, network, scale, SEO, offline, a11y, i18n, real-time?). Write them down and confirm scope.
2. Architecture: boxes for client, CDN, BFF/API and third parties; the component tree; the rendering strategy and why.
3. Data model & API: entities and their fields, endpoint or query shapes, pagination, error format, real-time channel.
4. State & caching: what is local, global, server or URL state; cache layers and invalidation.
5. Performance: Core Web Vitals targets, bundle strategy, images, lists, network.
6. Accessibility: semantics, keyboard, focus, screen reader announcements, contrast.
7. Edge cases: slow or offline network, errors and retries, races, empty and loading states, huge data, security, observability.

• State trade-offs aloud (“SSR costs server time but helps SEO”) and check in before going deep.

Rendering strategies

• Hydration attaches handlers and state to server-rendered HTML; until then the page looks ready but may not respond. Mix strategies per route.

Core Web Vitals

• Assessed at the 75th percentile of page loads, mobile and desktop separately. INP replaced FID as a Core Web Vital in March 2024.
• Diagnostics, not Core Web Vitals: TTFB (good ≤ 0.8 s), FCP (good ≤ 1.8 s), and TBT, the lab proxy for INP.
• Improve LCP: split it into TTFB, resource load delay, load duration and render delay. CDN and caching; LCP image in the HTML with fetchpriority="high" or a preload; never lazy-load it; compress it; don’t wait for client JS.
• Improve INP: break long tasks (> 50 ms) and yield to the main thread; ship less JS; paint feedback first, defer the rest; move heavy work to a Web Worker.
• Improve CLS: dimensions or aspect-ratio on media; reserve space for ads and embeds; don’t insert content above the reader; animate transform. Shifts within 500 ms of a tap or key press don’t count.

Performance checklist

• Network: CDN, HTTP/2 or HTTP/3, Brotli/gzip, preconnect to critical origins, long-lived caching of hashed assets, fewer redirects.
• JavaScript: split by route with dynamic import(), tree-shake, audit dependencies, load third-party scripts async/defer or later, enforce a bundle budget in CI.
• Rendering: server-render or pre-render first paint, inline critical CSS, font-display: swap, virtualize long lists, content-visibility: auto for long pages.
• Images: AVIF/WebP with srcset/sizes, lazy-load below the fold, explicit dimensions, an image CDN for resizing.
• Data: fetch in parallel (no waterfalls), prefetch on hover or when a link nears the viewport, debounce input (debounce vs throttle), paginate, cache server state.
• Measure: lab tools (Lighthouse, DevTools) for debugging; field data (RUM, the Chrome UX Report) for truth.

Caching layers & headers

• Deploy pattern: HTML no-cache, assets content-hashed and immutable. Keep old assets online for a while so open tabs don’t 404.

Real-time data & pagination

• Pick the simplest that fits: polling for loose freshness, SSE for feeds, notifications and streamed LLM output, WebSockets for chat, games and collaborative editing.

• A cursor encodes the last item’s sort key plus a unique tiebreaker (created_at, id); keep it opaque to clients.

State & optimistic updates

• Keep state as local as possible, derive instead of copying, and treat server data as a cache with staleness, not as global state. Normalize entities by id so one update shows everywhere.
• Optimistic update: snapshot, apply the change at once, send the request, roll back and tell the user on failure, then reconcile with the server’s answer. Use it for likely, reversible actions (like, rename, reorder), not payments.

async function toggleLike(postId) {
  const prev = cache.get(postId);
  cache.set(postId, { ...prev, liked: !prev.liked, likes: prev.likes + (prev.liked ? -1 : 1) });
  try {
    const saved = await api.post(`/posts/${postId}/like`, { liked: !prev.liked });
    cache.set(postId, saved);                 // the server's answer wins
  } catch {
    cache.set(postId, prev);                  // roll back, then tell the user
    toast('Could not save your like');
  }
}

API styles

• A BFF can sit in front of REST or GraphQL services; it’s where auth tokens, aggregation and response shaping for one client live.

Security

• Cookie flags: HttpOnly (no JS access), Secure (HTTPS only), SameSite=Strict (same-site only), Lax (also top-level GET navigations), None (cross-site; requires Secure). Max-Age beats Expires; neither means a session cookie. __Host- requires Secure, Path=/ and no Domain.
• Strict CSP: script-src 'nonce-{random}' 'strict-dynamic'; object-src 'none'; base-uri 'none'. Roll it out with Content-Security-Policy-Report-Only and report-to. frame-ancestors and report-only don’t work in a <meta> tag.
• Also: X-Content-Type-Options: nosniff, integrity (SRI) on third-party scripts, CORS allowlists (CORS controls who can read responses, not who can send requests).

Accessibility, i18n & observability

• A11y at scale: an accessible design system, WCAG 2.2 AA as the bar, lint plus axe in CI (automation catches only some issues), manual keyboard and screen reader passes.
• In SPAs, move focus to the new page’s heading (or announce it) after a route change, and announce async results with a live region.
• i18n: externalize strings with ICU messages for plurals and gender, never concatenate fragments; format with Intl.NumberFormat, DateTimeFormat, PluralRules, RelativeTimeFormat; sort with Intl.Collator.
• RTL via dir="rtl" and logical properties (margin-inline-start); room for longer text; store UTC, render in the user’s zone; lazy-load locale bundles.
• RUM: collect LCP, INP and CLS from real users (a PerformanceObserver), segmented by route, device and country; alert on p75 regressions.
• Errors: window error and unhandledrejection listeners, framework error boundaries, source maps uploaded privately to the error tracker, releases tagged.
• Logs: structured, sampled, with a trace id passed to the backend (traceparent); send on visibilitychange with navigator.sendBeacon or fetch(url, { keepalive: true }); scrub PII.

Micro-frontends & offline

• Composition options: route-level split (simplest), runtime Module Federation, Web Components, server or edge composition, iframes (strong isolation, poor UX). Split by business domain and talk through the URL or events, not a shared store. Worth it for many teams, rarely for one.
• Service worker: a script between the page and the network, HTTPS only (localhost excepted). Lifecycle: install (precache) → waiting → activate (clean old caches) → fetch. A new version waits for old tabs to close unless it calls skipWaiting().
• Strategies: cache-first for hashed assets, network-first for HTML and fresh data, stale-while-revalidate for avatars and non-critical API calls.
• A web app manifest (name, icons, start_url, display) makes the app installable. Store offline data in IndexedDB, queue writes and replay them when back online; resolve conflicts (last write wins, versions, or CRDTs for collaborative editing).

Back-of-envelope numbers

• These are rules of thumb: state your assumptions and round aggressively.

Mini-designs

Autocomplete (full walkthrough)

• Debounce input (~250 ms), minimum length, abort the previous request and ignore stale responses; LRU cache with a TTL per query.
• ARIA combobox: focus stays in the input, arrows move aria-activedescendant, Enter selects, Esc closes. Plan loading, empty and error states.

let controller;
async function search(q) {
  controller?.abort();                        // cancel the previous request
  controller = new AbortController();
  try {
    const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`, { signal: controller.signal });
    render(await res.json());
  } catch (err) {
    if (err.name !== 'AbortError') showError(err);
  }
}

News feed

• Cursor pagination, normalized post cache, virtualized list, optimistic likes, reserved media sizes (CLS).
• New posts: show a “5 new posts” pill (SSE or polling) instead of shifting the list; prefetch the next page near the bottom.

Chat

• WebSocket with heartbeats and reconnect plus exponential backoff; after reconnecting, resync from the last seen message id.
• Client-generated ids for dedup and idempotent retries; states sending → sent → delivered → read; order by server sequence.
• Load history upward with a cursor, keep the scroll anchored at the bottom, queue unsent messages in IndexedDB, announce new messages politely.

Infinite scroll

• IntersectionObserver on a sentinel with a rootMargin to prefetch; cursor pagination; virtualization to cap DOM nodes.
• Restore scroll position on back navigation, dedupe, retry inline; a “Load more” button keeps the footer reachable.

Image upload

• <input type="file" accept="image/*" multiple> plus a keyboard-reachable drop zone; validate type and size; preview with URL.createObjectURL (then revoke it).
• Optionally resize or compress on the client in a worker; upload straight to object storage with a pre-signed URL; chunked, resumable uploads for big files.
• Progress through XHR upload.onprogress (fetch has no upload progress events), cancel with AbortController. Server side: scan, strip EXIF (GPS), generate sizes, serve via CDN.

Quick answers

• SSR vs CSR? SSR sends ready HTML (fast first paint, SEO) at a server cost; CSR builds pages in the browser (cheap hosting, slow first load).
• What are the Core Web Vitals? LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1, judged at the 75th percentile.
• no-cache vs no-store? no-cache stores but revalidates every time; no-store never stores.
• How do you cache-bust? Content-hashed file names with immutable, and no-cache HTML that points at them.
• SSE vs WebSocket? SSE is one-way over plain HTTP with built-in reconnect; WebSocket is two-way and needs more infrastructure.
• Offset vs cursor pagination? Offset allows jumping to page N; cursor stays fast and stable on large, changing lists.
• Where do auth tokens go? An HttpOnly, Secure, SameSite cookie (plus CSRF protection); not localStorage.
• XSS vs CSRF? XSS runs the attacker’s code in your page; CSRF makes the victim’s browser send a request it didn’t intend.
• How do you stop clickjacking? Content-Security-Policy: frame-ancestors 'none' (or X-Frame-Options: DENY).
• When micro-frontends? When many teams need to deploy independently; otherwise a modular monolith is cheaper.
• How do you handle search races? Abort earlier requests (or tag them) and render only the latest response.

Gotchas & traps

• no-cache does not mean “don’t cache”; no-store does.
• A personalized response without private can be cached by a CDN and shown to other users.
• SameSite=None without Secure is rejected, and SameSite alone doesn’t stop attacks from other subdomains of the same site.
• CORS is not CSRF protection: the request is still sent, the page just can’t read the response.
• Lazy-loading or client-rendering the LCP element wrecks LCP. A Lighthouse page load can’t measure INP: use field data (TBT is only a lab proxy).
• Offset pagination on a live feed duplicates items as new ones arrive.
• Optimistic updates without rollback, or with out-of-order responses, leave the UI lying.
• WebSockets behind a load balancer need sticky sessions or a pub/sub backplane, plus heartbeats to detect dead connections.
• A buggy service worker can pin users to an old build: serve sw.js with no-cache, version caches, and plan an update prompt.
• navigator.onLine === true only means there’s a network interface, not that your API is reachable.