Stop 23 · Interview PreparationTechnical · 8/8

System design (frontend)

In short

'Design an autocomplete' or 'Design a news feed'. Frontend system design checks if you can plan a feature before coding it: parts, data, APIs and what breaks at scale.

Higher-level interview questions about architecting a frontend feature or app — component structure, state management choices, API design, scalability — common in senior interviews.

The jaadu architect sketches a house blueprint with a pencil and ruler beside a model house.

Think of it like this

Planning a house before building

A good architect asks: how many people live here, what's the budget, do they need a lift? Only then do they draw rooms. In design rounds, asking questions first is the actual skill being tested.

Watch it happen

An autocomplete under a slow network

Search box

suggest()

Cache

Search API

query 'ja'

1/7After the debounce, suggest('ja') runs and requestId becomes 1.

The big ideas

What you need to know

Clarify requirements

Who uses it, on what devices, how much data, what's in and out of scope. Spend the first few minutes here.

Break into components

Sketch the component tree and say which parts own which state.

Data and API

What the frontend requests, response shapes, pagination and caching.

Performance, a11y, edge cases

Loading and error states, slow networks, keyboard support, and what happens with 10,000 items.

How it works

A structure for any design question

1
Requirements
Ask questions and agree on scope with the interviewer.
2
High-level layout
Draw the main components and how data flows between them.
3
Data model and API
Define state shape and the endpoints you need.
4
Deep dive
Pick one tricky part, like caching or race conditions, and go deep.
5
Trade-offs and extras
Performance, accessibility and what you'd improve with more time.

See it in code

Walk through the code

1// Autocomplete: debounce, cache, and ignore stale responses2const cache = new Map();3let latest = 0;4 5async function suggest(query, render) {6  if (cache.has(query)) return render(cache.get(query));7 8  const requestId = ++latest;9  const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);10  const results = await res.json();11  cache.set(query, results);12 13  if (requestId === latest) render(results); // drop out-of-order replies14}

1/4A cache of past results and a counter for the newest request.

Call suggest from a debounced input. The cache avoids repeat requests, and the requestId check stops a slow reply for 'ja' from overwriting results for 'java'.

Save yourself the pain

Common mistakes

Oops

Starting to draw components in the first 30 seconds.

Do this instead

Ask clarifying questions first. 'Mobile or desktop? How many results? Offline support?' all change the design.

Oops

Staying silent while you think.

Do this instead

Think out loud. The interviewer grades your reasoning, not just the final diagram.

Your mission

Mock design round

~45 min

Quick check

In an autocomplete, results for 'ja' arrive after results for 'java'. What's the problem, and the fix?

Go deeper

1Practice a mock frontend system design question, e.g. 'design a news feed'.
2Structure your answer: requirements, component breakdown, state/data flow, trade-offs.
3Study how a real product you use is likely architected, as a reference.

More technical at this stop