Senior-level system design interview prep covering rendering strategies, microfrontend architecture, bundle optimization, caching, authentication, security, state management, and Core Web Vitals. Questions asked at Google, Meta, Stripe, Shopify, Atlassian, Razorpay, Flipkart and other top tech companies.
Frontend system design is the discipline of architecting large-scale client-side applications. It covers decisions like rendering strategy (SSR/SSG/CSR), microfrontend architecture, state management patterns, bundle optimization, caching strategies, authentication, and performance. Senior engineers are expected to reason about trade-offs, not just implementation details.
CSR (Client-Side Rendering) delivers a blank HTML shell and renders everything in the browser — best for dashboards. SSR (Server-Side Rendering) generates HTML per request — best for SEO-critical, personalized pages. SSG (Static Site Generation) pre-builds HTML at deploy time — best for blogs and docs. ISR (Incremental Static Regeneration) is SSG with background revalidation — best for pages with infrequent data changes. Streaming SSR (React 18) streams HTML progressively, improving TTFB.
Microfrontends split a monolithic frontend into independently deployable units owned by separate teams. Use them when your team is large (10+ frontend engineers), different parts of the app have different release cadences, or you need independent tech stack choices per domain. The main tools are Webpack Module Federation (runtime sharing), Single-SPA (framework-agnostic orchestration), and Nx/Turborepo (monorepo management). Avoid for small teams — the operational overhead outweighs the benefits.
Module Federation is a Webpack 5 feature that lets one JavaScript application dynamically load code from another at runtime. A 'host' app consumes 'remotes' that expose modules. Dependencies like React can be marked singleton:true so they're shared rather than duplicated. This enables truly independent deployment — each microfrontend ships its own bundle and the host loads it at runtime without a build-time dependency.
Tree shaking eliminates dead code — requires ES module imports and sideEffects:false in package.json. Code splitting divides the bundle into chunks loaded on demand via dynamic import(). Route-based splitting is free in Next.js. Vendor chunks separate third-party libraries from app code for better cache reuse. Analyze with webpack-bundle-analyzer or Vite's rollup-plugin-visualizer. Also audit your dependencies — lodash-es vs lodash, date-fns vs moment, and replacing heavy polyfills with native APIs.
JWTs are self-contained tokens — the server validates them without a database lookup, making them stateless. Store JWTs in HttpOnly cookies (not localStorage) to prevent XSS. Cookie-based sessions store a session ID in a cookie and validate it against a server-side store. The key trade-off: JWTs can't be revoked without a blocklist, while server sessions are immediately revocable. For most web apps, HttpOnly cookies with short-lived JWTs + refresh token rotation is the recommended pattern.
Core Web Vitals are Google's UX quality signals: LCP (Largest Contentful Paint, <2.5s) — preload hero images, use SSR/SSG, optimize TTFB. INP (Interaction to Next Paint, <200ms) — avoid long tasks, defer non-critical JS, use web workers for heavy computation. CLS (Cumulative Layout Shift, <0.1) — set explicit width/height on images and embeds, avoid inserting content above existing content. TTFB (<800ms) — use edge rendering or CDN for static assets.
Cross-Site Scripting (XSS) injects malicious scripts into a web page viewed by other users. Prevent it by: using textContent instead of innerHTML for dynamic content, sanitizing HTML with DOMPurify if you must use innerHTML, setting a Content Security Policy (CSP) that blocks inline scripts, never storing sensitive data in localStorage (use HttpOnly cookies instead), and using frameworks like React that escape JSX output by default. The most impactful single fix is a strict CSP header.
Both are monorepo build orchestration tools. Turborepo (by Vercel) focuses on build pipeline caching — it hashes task inputs and skips tasks whose inputs haven't changed. Configuration is minimal (turbo.json). Nx (by Nrwl) provides a full developer platform: project graph, affected commands (run only what changed), module boundary enforcement, code generators, and first-class support for React/Angular/Node. Turborepo is easier to adopt; Nx provides more power for large teams with strict boundaries.
Server state is data that originates on the server and needs to be fetched, cached, and synchronized — user profiles, API responses, lists of items. Manage it with React Query (TanStack Query) or SWR. Client state is ephemeral UI state that lives only in the browser — modal open/closed, form input values, sidebar collapsed. Manage it with useState, useReducer, or Zustand. The most common architecture mistake is putting server state into Redux/Zustand and manually managing loading/error/caching — React Query makes this unnecessary.
System design interviews are about trade-off reasoning, not memorizing APIs. For every approach (SSR, microfrontends, JWT), know the cost alongside the benefit.
LCP, INP, CLS, TTFB — use real numbers. Say '<2.5s LCP' not 'fast load'. Interviewers at senior levels expect you to quantify performance goals.
Every system design answer should address XSS, CSRF, and token storage. Senior engineers are expected to proactively raise security concerns.
Microfrontends and monorepos add complexity. The best answer often starts: 'This depends on team size and release cadence.' Show you understand the org-level context.
Core Web Vitals directly impact Google ranking. Know which vitals matter for which page types and have a concrete optimization checklist ready.
Theory questions, architecture walkthroughs, and AI-graded answers. Prep for senior-level frontend system design interviews.