Every core concept in this guide in one place: what each one is, the decision it turns on, and where it comes up in the interview.

Core Concepts

A preparation plan for the frontend system design round: what to read first, and how to practice.

How to Prepare

How to decide whether to install a dependency or build it yourself, what to check beyond stars and downloads, and what you owe a dependency after it ships.

External Dependencies

A frontend system design walkthrough of a design system library: design tokens, component APIs, theming, distribution, versioning, and the governance that keeps it healthy.

Design System Library

How to add an LLM-powered feature to a frontend, worked through one shopping assistant: where the model runs, streaming the reply, prompts as configuration, tool use with human approval, grounding answers in your data, and running it in production.

AI & LLM Integration

A step-by-step framework for the frontend system design interview: how to start, scope requirements, and stay on track when the interviewer goes deep.

Delivery Framework

How to design the contract between the frontend and the server: entities shaped for the screen, endpoints, pagination, error shapes, and writes that are safe to retry.

API Design

How to build a React component that survives server rendering, hydration, multiple instances, portals, and future React features, shown step by step on one sidebar component.

Future-Proof Components

How to set performance budgets for a frontend and enforce them in CI so bundle size and Core Web Vitals do not regress as the app grows.

Performance Budgets

How to decide between a monolith, microfrontends, one monorepo, or many repos, by separating how the product ships from how the code is stored.

Choosing a Repo

How to split a frontend into independently built and deployed remotes, and the sharing, coordination, and ownership decisions that come with it.

Microfrontends

Update the interface first, send the request in the background, and roll back if the server says no.

Optimistic Updates

A frontend system design walkthrough of a Kanban board: drag and drop, optimistic reordering, real-time collaboration, and conflict resolution.

Jira Board

How to choose the way you write CSS in a frontend: plain CSS, CSS Modules, Tailwind, and runtime versus zero-runtime CSS-in-JS, compared on scoping, runtime cost, and React Server Component support.

Styling Approaches

What a monorepo is, how an Nx workspace is organized, and the four benefits of keeping many frontend apps and libraries in one repository.

Monorepos

How SSE streams server-to-client updates over one open HTTP connection: the wire format, EventSource, reconnection and replay, and when to use it.

Server Sent Events

The performance problems that appear once a frontend is split into remotes: bundle duplication, waterfalls, duplicate fetching, hydration pile-up, ownership.

Microfrontend Perf Problems

How the BroadcastChannel API keeps tabs of the same site in sync: the message API, what it is not, the initial-state gap, and use cases like session and theme sync.

Broadcast Channels

Testing patterns beyond the happy path: permission matrices, multi-tenant isolation, internationalization, and accessibility checks.

Specialized Testing Patterns

How to choose between React on its own, a global state library like Redux, and server-state tools by matching the tool to the kind of app you are building.

State Management Tools

Keeping large, long-lived frontends fast for the whole session: Core Web Vitals, bundle and rendering optimization, caching, memory hygiene, and Web Workers.

Performance at Scale

What a monolith is, why it is the right starting architecture for most frontends, and the problems that appear as the codebase and the number of teams grow.

Monoliths

How to test a frontend at scale: choosing between the pyramid, trophy, and honeycomb, picking a runner, and deciding what each layer of tests should cover.

Testing Strategy

An introduction to frontend system design interviews: what they assess, why they now matter at every level, and how this guide helps you approach them with clarity.

Introduction

How the browser stays in sync with the server: long-polling, Server-Sent Events, and WebSocket compared side by side, including why SSE needs a separate POST to send.

Real-Time Transports

Rendering only the visible window of a large list so the DOM stays small and scrolling stays smooth.

Virtualization

Build the reactive engine behind a spreadsheet: store formulas, track which cells depend on which, and recompute every dependent in the right order when a cell changes, detecting circular references.

Spreadsheet Engine

Build a data table with column sorting, a text filter, and pagination, deriving the visible rows from one filter then sort then paginate pipeline.

Data Table

Render a heatmap of a values matrix on an HTML canvas: map each value to a colour, draw a crisp grid on high-density screens, and show a tooltip for the cell under the pointer.

Heatmap Canvas

Build an image gallery: a grid of thumbnails that open a lightbox with previous and next navigation and full keyboard control.

Image Gallery

Build a pannable, zoomable canvas like a design tool: drag to pan, scroll to zoom toward the cursor, with shapes drawn in world coordinates through a single view transform.

Infinite Canvas

Build a modal on the native HTML dialog element, driving showModal and close from React, dismissing on backdrop click, and returning a result.

Native Dialog

Build an editable spreadsheet grid on top of a formula engine: edit a cell to see its formula, blur to see the value, and watch dependent cells update through event delegation and imperative DOM writes.

Spreadsheet UI

Build an autocomplete input backed by a Trie: type a prefix to see matching words, navigate the dropdown with the keyboard, and select with Enter or click.

Trie Typeahead

How do you build an accessible form?

Why should you animate transform and opacity instead of other properties?

What are CSS keyframes?

What is the difference between CSS transitions and animations?

What is focus management and why does it matter for accessibility?

What is IntersectionObserver?

How do you make a custom component keyboard accessible?

What is MutationObserver?

What is ResizeObserver?

What are generics in TypeScript?

What is type narrowing in TypeScript?

What is the difference between unknown and any in TypeScript?

What are TypeScript utility types?

Implement a myExtends helper that mimics ES5 prototype-based inheritance by combining two constructor functions into one, with constructor stealing, a shared prototype chain, and static inheritance.

ES5 Extends

Build a tree from slash-delimited paths, replay a sequence of clicks that cascade selection down to descendants and recompute every ancestor, then render the tree with selected, not selected, and partial states.

Tree Select

Build a file upload component with a live progress bar, upload speed and time remaining, and pause, resume, and cancel controls, powered by a reusable custom hook.

File Upload

Build a live markdown editor: type markdown on the left and see it rendered to HTML on the right, with a small parser that stays safe against injection.

Markdown Editor

Recursively render a hierarchical portfolio as a collapsible tree, where each node shows its name, value, and percentage of the total.

Portfolio Visualizer I

Make the portfolio tree editable: normalize it into a flat map, validate edits against budget constraints, and show the unallocated cash at each level.

Portfolio Visualizer II

Build a sliding tile puzzle where numbered tiles slide into the empty space, with move validation, win detection, and a new game button.

Sliding Puzzle

Build a ChatGPT style chat where the assistant reply streams in a little at a time, the input locks while it streams, a Stop button ends it mid way, and the view auto scrolls to the bottom.

Streaming Chat

What is doctype in HTML?

Build a Connect Four game with gravity based disc dropping, turn handling, and four in a row win detection.

Connect Four

Build a nested checkbox tree where checking a parent checks its children and a partly checked parent shows an indeterminate state.

Nested Checkboxes

Build a grid of randomly colored cells that can be regenerated and recolored on click.

Random Color Matrix

Build a temperature converter with live two-way conversion between Celsius and Fahrenheit.

Temperature Converter

Build a chainable, awaitable class that queues deploy steps, runs rollback prep first, and resolves to an ordered list of executed actions.

Deploy Pipeline Builder

A React hook that runs a countdown from a starting number of seconds down to zero, with start and stop controls.

useCountdown

A chainable add function that accumulates numbers across method calls and returns the total when sum() is invoked.

Chainable Add

A utility that measures how long another function takes to run and works for both synchronous and asynchronous functions.

Measure Execution Time

The TimerManager class in JavaScript manages multiple timers, offering multiple functionalities.

Timer Manager

Login form with client-side validations for name, email, and password fields.

Form Validations

Build a Toast component in React that renders a variant-based icon, a message, and a dismissible close button at the bottom right of the screen.

Toast I

Make the Toast provider manage state so that submitting the form adds a new toast and clicking the close button dismisses that specific toast.

Toast II

Let users dismiss every visible toast at once by pressing the Escape key, using a reusable custom hook.

Toast III

Mixed HTML, CSS, JavaScript, TypeScript, and React questions from a HackerRank assessment

HackerRank MCQ

Extend composeAsync so the returned function can accept multiple arguments that are passed to the rightmost function.

composeAsync II

Compose multiple async functions into one, running them right-to-left and awaiting each step.

composeAsync

Build a minimal jq(selector).css(...) that reads and writes inline styles across multiple call shapes.

Implement jQuery css()

Count the integers in an array that are divisible by 3 and contain at least two digits equal to 7.

Lucky Sevens

Convert a non-negative integer into its English word form, e.g. 18653 becomes "eighteen thousand six hundred fifty three".

Number to Words

Build a paginated data table with a page-size selector and Prev/Next navigation.

Pagination

Build a modal window component with a dark backdrop and close button that opens on user action.

Modal Window I

Enhance the modal window with Escape key support, body scroll lock, and smooth CSS transitions.

Modal Window II

Make the modal fully accessible with focus trapping, ARIA attributes, and return-focus on close.

Modal Window III

Build an NxN Tic Tac Toe game where the board size is configurable and winning lines are generated automatically for any board size.

NxN Tic Tac Toe

Build an OTP input component with auto-focus management, keyboard navigation, and paste support.

OTP Input

Recursively convert all keys in an object from snake_case or kebab-case to camelCase.

Camel Case Keys

Check whether an object satisfies a set of predicate functions — one for each property you care about.

Conforms To

Build a function that takes a list of values and returns a function that cycles through them on each call.

Cycle

Given an array of session records with user IDs, merge entries for the same user — sum their durations and combine their equipment lists without duplicates.

Data Merging

Recursively apply a transform function to every leaf value in a nested object or array.

Deep Map

Recursively strip specified keys from an object and all its nested children.

Deep Omit

Filter an array down to only the elements that do not appear in any of the given exclusion arrays.

Difference

Remove elements from the end of an array as long as a predicate holds true, then return what's left.

Drop Right While

Remove elements from the front of an array as long as a predicate holds true, then return the rest.

Drop While

Reimplement Array.prototype.fill — replace a slice of an array with a given value, supporting negative indices.

Fill

Reimplement Array.prototype.findIndex — locate the position of the first element passing a test.

Find Index

Search an array from the end and return the index of the last element that passes a predicate test.

Find Last Index

Turn an array of [key, value] pairs into a plain object — the inverse of Object.entries.

From Pairs

Return how many parameters a function expects — a tiny question about Function.length.

Function Length

Find DOM elements matching a chain of nested tag names, like a simplified descendant CSS selector.

getElementsByTagName Hierarchy

Find common elements across multiple arrays, using an iteratee to determine how values are compared.

Intersection By

Find common elements across arrays using a custom comparator function instead of strict equality.

Intersection With

Given multiple arrays, return a new array of unique values that appear in every one of them.

Changelog

July 2026