System Design

What the frontend system design round tests, and how to approach it.

Every concept in this guide in one place, and where each one comes up.

A step by step way to run the interview, from scoping to the final design.

What to read first and how to practice before the interview.

What to ask the interviewer at the end, and what to leave out.

Comparing plain CSS, CSS Modules, Tailwind, and CSS in JS.

Designing the contract between the frontend and the server.

Keeping open tabs of the same site in sync with the BroadcastChannel API.

One open HTTP connection that streams updates from the server to the browser.

Long polling, Server Sent Events, and WebSocket compared side by side.

Rendering only the rows on screen so a huge list stays smooth.

Choosing between plain React, a global store, and server state tools.

Why one codebase is the right start, and the problems that show up later.

Keeping many frontend apps and libraries together in one repository.

Splitting a frontend into remotes that teams build and deploy on their own.

Picking between a monolith, microfrontends, and one repo or many.

Keeping a large, long lived frontend fast for the whole session.

Setting limits on bundle size and speed, then enforcing them in CI.

Choosing a testing shape and deciding what each layer should cover.

Testing past the happy path: permissions, translations, access.

The performance problems that appear once a frontend is split into remotes.

Update the screen first, send the request after, roll back if it fails.

Building a React component that survives server rendering and hydration.

Adding an LLM feature to a frontend, worked through one shopping assistant.

Deciding whether to install a dependency or build the thing yourself.

A component library: tokens, APIs, theming, distribution, and versioning.

A Kanban board with drag and drop, optimistic reordering, and live updates.