System Design

Rendering strategy is the first architectural decision in any frontend system — it shapes SEO, time-to-first-byte, JavaScript bundle size, server cost, and how much interactivity happens on the client vs the server.

SDE-2 interviews expect you to compare CSR, SSR, SSG, and ISR with concrete trade-offs, explain hydration and partial hydration, and describe how React Server Components and streaming SSR change the traditional model.

This module covers each strategy with flow diagrams, performance metrics (FCP, LCP, TTFB, TTI), scenario-based recommendations, and interview questions so you can defend your rendering choices under pressure.

You will leave knowing when to pick CSR for dashboards, SSR for SEO-critical pages, SSG for docs, ISR for semi-static content, and how Islands Architecture and RSC reduce client JavaScript without sacrificing interactivity.

Once HTML and CSS reach the browser, a fixed pipeline converts bytes into pixels on screen. Every frontend performance decision — animations, layout changes, lazy loading — maps to one of these five stages.

This module is built for SDE-2 frontend interviews: you will learn not just the stages, but which CSS properties trigger layout vs paint vs composite-only updates, how forced reflow happens, and how LCP, INP, and CLS connect to the pipeline.

By the end, you will be able to explain the critical rendering path end-to-end, diagnose layout thrashing in DevTools, and recommend animation and DOM strategies that stay on the compositor thread.

The Concepts tab walks through each pipeline stage with examples; the Interview tab covers reflow vs repaint, GPU layers, and how to fix CLS and INP issues rooted in layout work.

Web performance is not one trick — it is a stack of measurable optimizations aligned to Core Web Vitals. LCP measures loading, INP measures responsiveness, and CLS measures visual stability.

This module covers the fix techniques, code patterns, and tooling interviewers expect at SDE-2 level: from preloading LCP images to breaking up long tasks, from Brotli compression to Lighthouse performance budgets.

You will learn how to read a Lighthouse report, set performance budgets, prioritize fixes by Web Vitals impact, and explain the difference between lab data and real-user monitoring in production.

Topics include image lazy-loading and responsive srcset, code splitting and tree shaking, font loading strategies, CDN caching, and breaking long tasks that hurt INP on low-end devices.

Understanding React internals helps you write efficient code, debug performance issues, and explain architectural trade-offs in SDE-2 interviews.

This module covers Virtual DOM vs Fiber, the two-phase rendering model, reconciliation rules, why keys matter, how hooks are stored on Fiber nodes, and automatic batching in React 18.

Expect deep-dive questions on useTransition, useDeferredValue, why you cannot call hooks conditionally, and how the commit phase applies DOM updates without blocking the main thread unnecessarily.

Walk through Virtual DOM diffing, Fiber's linked-list structure, reconciliation with keys, hooks storage on fiber.memoizedState, and React 18 automatic batching with concrete diagrams and interview drills.

Caching is one of the highest-leverage frontend performance techniques — it reduces load times, server load, and improves scalability across every layer of the stack.

This module covers the four caching layers, six core cache strategies, browser storage options, API caching with TanStack Query and SWR, and the best practices SDE-2 interviews expect.

You will understand cache invalidation trade-offs, when stale-while-revalidate beats cache-first, how CDN edge caching interacts with Cache-Control headers, and how to avoid serving stale or sensitive data to the wrong user.

Layers covered: browser HTTP cache, CDN, application cache (Redis), database query cache, Service Worker strategies, and client libraries like TanStack Query — each with headers, patterns, and interview comparisons.

Next.js is the production React framework SDE-2 frontend interviews expect you to know deeply — not just syntax, but rendering strategies, Server Components, and when to reach for client boundaries.

This module covers App Router file-based routing, hybrid rendering, RSC, data fetching patterns, middleware, Server Actions, and the optimizations that ship with next/image, next/font, and next/script.

Interviewers often ask where to draw the client boundary, how caching works with fetch in Server Components, and how middleware differs from client-side route guards — all covered with decision tables and code examples.

Learn file-based routing, route groups, loading.tsx streaming, generateStaticParams for SSG, dynamic rendering, Server Actions for mutations, and built-in optimizations that ship with every Next.js production app.

JavaScript Internals is the foundation of every SDE-2 frontend interview — if you understand the runtime, event loop, and memory model, async bugs, performance issues, and polyfill questions become predictable.

This module walks through the full runtime environment with step-by-step examples: call stack traces, microtask vs macrotask ordering, debounce/throttle internals, V8 optimization, GC, and Web Workers.

Mastering this module means you can predict async output in whiteboard questions, explain why the UI freezes during heavy synchronous work, and describe how the browser keeps I/O non-blocking despite JavaScript being single-threaded.

Covers the runtime vs engine split, call stack overflow, microtask priority over macrotasks, Promises and async/await ordering, closure memory, V8 hidden classes, mark-and-sweep GC, and moving heavy work off-thread with Web Workers.

Frontend System Design is about architecture — not just building UI. SDE-2 interviews ask you to design autocomplete, news feeds, chat apps, and explain trade-offs across performance, scalability, and accessibility.

This module covers the RADIO framework (Requirements, Architecture, Data, Interface, Optimizations), question types, rendering and caching patterns, WCAG accessibility, i18n, security, and the quick-fire answers interviewers expect.

You will practice structuring answers for autocomplete, infinite scroll feeds, real-time chat, and e-commerce flows — with explicit trade-off discussions for scalability, offline support, and API design.

The RADIO framework gives interview answers a clear shape: clarify requirements first, sketch architecture, define data models, specify API contracts, then layer optimizations for performance, accessibility, i18n, and security.

State management is the backbone of every frontend app — SDE-2 interviews expect you to distinguish local vs global vs server state and pick the right tool without over-engineering.

This module covers useState and useReducer, Redux Toolkit, Zustand, Context API, React Query, MobX, and Jotai — plus single source of truth, immutable updates, selectors, middleware, and architecture patterns.

The goal is to pick the smallest tool that fits: local state for UI, React Query for server data, Zustand or Redux only when multiple distant components genuinely need shared mutable state.

Compare Redux Toolkit, Zustand, Context API, React Query, MobX, and Jotai with bundle size, boilerplate, DevTools, and re-render behavior — plus patterns like selectors, middleware, and optimistic updates.

Frontend security is no longer optional — SDE-2 interviews expect you to explain XSS types, CSRF prevention, JWT storage trade-offs, CSP headers, and why localStorage is dangerous for tokens.

This module covers the top 10 frontend security risks, prevention patterns with code examples, security headers, best practices, and the testing tools every engineer should know.

Security is a design constraint, not an afterthought — you will learn to threat-model auth flows, sanitize user HTML safely, configure CSP without breaking the app, and audit dependencies before they reach production.

Walk through XSS variants, CSRF token patterns, JWT storage in httpOnly cookies, SSRF and IDOR risks, CORS misconfiguration, CSP directives, and npm audit workflows with prevention code you can cite in interviews.

Advanced networking goes beyond fetch() — SDE-2 interviews expect you to explain HTTP/2 multiplexing, why HTTP/3 uses QUIC over UDP, the TCP 3-way handshake, DNS resolution flow, and when to pick WebSockets vs SSE.

This module covers protocol comparisons, TLS handshakes, CDN architecture, load balancing strategies, real-time communication patterns, and Service Worker offline caching.

From typing a URL to receiving a response, you will trace DNS resolution, TCP/TLS handshakes, HTTP caching headers, and when to choose WebSockets, SSE, or long-polling for live data.

Deep dives include HTTP methods, Cache-Control and ETag, CDN benefits, CORS preflight, PUT vs PATCH, symmetric vs asymmetric encryption, and the full browser-to-server request lifecycle.

Frontend testing is a core SDE-2 skill — interviews expect you to explain the testing pyramid, when to use unit vs integration vs E2E, and how tools like RTL, MSW, and Playwright fit together.

This module covers all test types with code examples, the 70/20/10 pyramid, snapshot testing trade-offs, performance measurement with Web Vitals, memory leak detection, and MSW for API mocking.

Good testing strategy balances speed and confidence: fast unit tests for logic, integration tests for component + API flows, and a thin layer of E2E tests for critical user journeys only.

Includes the 70/20/10 testing pyramid, RTL best practices, MSW for API mocking, Playwright login flows, snapshot testing pitfalls, Web Vitals measurement, and detecting memory leaks in React with DevTools.

React design patterns are a staple SDE-2 topic — interviews expect you to explain when to use compound components vs prop drilling, controlled vs uncontrolled inputs, and why custom hooks replaced HOCs and render props.

This module covers all 10 core patterns plus advanced techniques: Suspense, memoization, portals, and state machines — with code examples and a when-to-use guide.

Patterns are tools, not rules — you will learn which pattern solves prop drilling, repeated logic, cross-cutting auth, modal rendering, and complex multi-step flows without over-engineering simple components.

All 10 core patterns plus Suspense, memoization, portals, and XState state machines — each with code examples, a when-to-use table, and 30 interview questions from compound components to error boundaries.

Micro-frontends are a growing SDE-2 system design topic — interviews expect you to explain when MFE beats a monolith, how Module Federation works, and how teams share state without tight coupling.

This module covers all five integration approaches, Martin Fowler's common traits, architecture diagrams, when to use vs avoid MFE, and cross-app communication patterns.

Micro-frontends solve organizational scale, not small-app complexity — you will compare Module Federation vs Single-SPA vs Web Components, and learn how teams share dependencies and route between independently deployed apps.

Covers bounded contexts, independent CI/CD, CSS isolation strategies, bootstrap/mount/unmount lifecycles, cross-app events, shared React singletons, and 45 interview questions from architecture to deployment.

Observability is increasingly asked in SDE-2 and SRE-flavored frontend interviews — you need to explain the three pillars, how monitoring differs from observability, and how to instrument apps with OpenTelemetry.

This module covers Golden Signals, Prometheus and Grafana, distributed tracing, high-cardinality pitfalls, SLIs/SLOs/SLAs, error budgets, and production observability best practices.

Frontend engineers increasingly own client-side reliability — you will learn to instrument React apps, define meaningful SLOs, avoid alert fatigue, and use traces to debug slow API calls across services.

Topics span metrics vs logs vs traces, Golden Signals, Prometheus pull model, Grafana dashboards, OpenTelemetry instrumentation, SLI/SLO/SLA chains, error budgets, and Kubernetes monitoring with ServiceMonitors.