Frontend system design

Question 1

You are asked to design the frontend for a ride dispatch map used by dispatchers. Before picking any libraries, what do you ask first?

Accepted Answer

Who uses it and on what screens, how many vehicles show at once, and how fresh positions must be

Question 2

A clinic booking site learns that most patients book on older Android phones over slow mobile networks. Which design decision does this most directly drive?

Accepted Answer

A tight JavaScript budget and a server-rendered form that works before scripts finish loading

Question 3

You are designing the diff view for a code review tool. Which clarifying question changes the design the most?

Accepted Answer

What is the largest diff we must show, and must it stay interactive at that size?

Question 4

Product asks for real-time charts on a factory sensor dashboard. What should you clarify before choosing a transport?

Accepted Answer

What delay users can accept, such as under one second or within a minute

Question 5

During a design round the interviewer will not give a number for daily users. What should you do?

Accepted Answer

State a reasonable assumption out loud, design for it, and say what would change at 10 times that

Question 6

A payroll export screen will be used by about 40 internal accountants on office laptops. A teammate proposes edge rendering, CDN page caching, and a service worker. What is your view?

Accepted Answer

That adds cost and moving parts for little gain; a client-rendered app behind login is enough here

Question 7

In a design round for a photo backup web app, you propose server rendering. The interviewer asks what tradeoff you are choosing. What is the best answer?

Accepted Answer

Faster first view and less client work, paid for with server cost and more complex caching

Question 8

A ticket sale page must be usable within 5 seconds on a 1.6 megabit per second link. You allow 1 second for connection setup and 1.5 seconds for script parsing and running. About how many compressed bytes can the page download?

Accepted Answer

About 500 KB in total

Question 9

On a travel deals page, the server responds at 0.8 s, the hero image request starts only after the app script runs at 1.9 s, the image takes 0.9 s to download, and painting takes 0.1 s. What is the best first fix for Largest Contentful Paint (LCP)?

Accepted Answer

Put the hero image in the HTML or preload it so its request starts near 0.8 s

Question 10

Field data for a recipe site shows that 70 percent of page loads have Largest Contentful Paint under 2.5 seconds. Does the page meet the good threshold?

Accepted Answer

No, because it needs at least 75 percent of loads under 2.5 seconds

Question 11

On a grocery app, a tap waits 40 ms for the main thread, the handler runs 120 ms, rendering takes 90 ms, and the browser needs 30 ms to show the next frame. About what does Interaction to Next Paint (INP) record, and how is it rated?

Accepted Answer

About 280 ms, which needs improvement because it is over 200 ms

Question 12

A late cookie banner on a bakery site shifts content. The moved elements affect half of the viewport, and they move by a fifth of the viewport height. What is the layout shift score for this one shift?

Accepted Answer

0.1

Question 13

A log viewer team plans to load 1 million rows into the browser, each about 200 bytes as a JavaScript object. Roughly how much memory is that, and what follows?

Accepted Answer

About 200 MB, so keep rows on the server and fetch windows of them

Question 14

A ride dispatch map shows 2,000 vehicles, and each position update is about 100 bytes, sent once per second for every vehicle. What is the download rate per client, and what do you do?

Accepted Answer

About 200 KB per second, which is heavy, so send only vehicles in view and only changes

Question 15

A cooking magazine home page has 30 card images of 150 KB each, and only 6 are visible on first load. What is the image payload on first load with lazy loading of offscreen images, versus loading them all?

Accepted Answer

About 900 KB versus about 4.5 MB

Question 16

Six product teams share one storefront app. Each team keeps adding a little JavaScript, and load time creeps up every quarter. What keeps a performance budget from eroding?

Accepted Answer

Per-route size and timing budgets enforced in CI, plus field metrics with a named owner

Question 17

Two pages each send 300 KB compressed: one is mostly JavaScript, the other mostly JPEG images. Which costs more on a low-end phone, and why?

Accepted Answer

The JavaScript page, since script must also be parsed, compiled, and run on the main thread

Question 18

An email client's message composer is used in three places and now takes 25 boolean props to switch features on and off. What is the better design?

Accepted Answer

Split it into composable parts, such as editor, toolbar, and attachments, that callers assemble

Question 19

In a photo backup app, each of 200 thumbnails in an album grid fetches its own metadata on mount, making 200 requests. What is a better boundary?

Accepted Answer

Fetch the album metadata in one request at the grid level and pass each item down

Question 20

A design system must support three brands with the same combobox behavior and very different looks. How should the component be structured?

Accepted Answer

A headless layer for behavior and accessibility, with each brand supplying its own styling

Question 21

A furniture store product page has a long static description and a small interactive color picker. With React server components, where do you draw the client boundary?

Accepted Answer

Keep the page on the server and make only the color picker a client component

Question 22

A shared Table component takes a mode prop with nine values, and a new mode is added almost every sprint. What should the owning team do?

Accepted Answer

Expose lower-level parts like header, row, and cell so unusual tables are composed

Question 23

A hotel search page has a filter panel, a results list, and a map. All three must react when a filter changes. Which design keeps them decoupled?

Accepted Answer

Make the filters one shared source, such as URL state, that the list and map both read

Question 24

On a concert ticket sale site, where should the chosen price range filter for the event list live?

Accepted Answer

In the URL query string, so it survives reload and can be shared

Question 25

A team copies every API response into a global Redux store and hand-writes reducers for loading flags, errors, and refetching. What would you change?

Accepted Answer

Use a server cache library for API data and keep the store for true client state

Question 26

After a user edits an item's name on its detail page in an inventory app, the list page still shows the old name. What is the right fix?

Accepted Answer

After the save succeeds, update or invalidate the cached list that contains the item

Question 27

Which piece of state in a code review tool belongs in the URL?

Accepted Answer

The file and line the reviewer wants to link to

Question 28

A reviewer types a long comment in a code review tool, then closes the tab by mistake and loses it. What is a good design?

Accepted Answer

Save drafts to local storage keyed by review and line, and restore them on return

Question 29

A factory sensor dashboard stores the whole selected sensor object in component state. After the list refetches, the detail panel shows stale readings. What fixes this?

Accepted Answer

Store only the selected sensor id and read the current object from the cache

Question 30

A cookbook app's server cache refetches every list each time the window regains focus, and API traffic rises fivefold. Recipes change rarely. What helps?

Accepted Answer

Set a longer stale time for slow-changing data so focus does not trigger refetches

Question 31

A multi-step mortgage application is 6 steps long. Users who refresh midway lose everything. What is a sound design?

Accepted Answer

Save progress to the server at each step and load the draft when the flow reopens

Question 32

A mobile web home page makes 7 API calls to 5 services over networks with about 300 ms round trips, and some calls wait on others. What helps most?

Accepted Answer

Add a backend-for-frontend endpoint that gathers the data near the services in one call

Question 33

In a news feed, opening an article from the list takes about 600 ms because its data loads only after the click. What is a good improvement?

Accepted Answer

Prefetch article data when a link is hovered or scrolls into view, within a budget

Question 34

Three components on a dashboard each request the current user, and the network panel shows three identical calls on every load. What is the best fix?

Accepted Answer

Use a shared cache that dedupes in-flight requests by key

Question 35

After a 10-minute outage, 200,000 open clients of a parcel tracking app all retry every 2 seconds at once, and the recovering API falls over again. What should the client do?

Accepted Answer

Use exponential backoff with random jitter and respect any Retry-After header

Question 36

On a train timetable app, a request sometimes hangs for two minutes on flaky networks and the screen spins forever. What is the best change?

Accepted Answer

Set a timeout with an AbortController and show an error with a retry button

Question 37

A team proposes GraphQL for a large marketplace frontend to fix overfetching. What cost should they plan for?

Accepted Answer

Query cost limits and HTTP caching are harder, since each client query can differ

Question 38

A city events page shows a list that takes 3 seconds to load on slow networks. Users often bounce. What is the best loading design?

Accepted Answer

Render a layout-stable skeleton right away and stream or show items as they arrive

Question 39

In an infinite news feed, a user opens a post and presses Back, and the feed reloads at the top. What is the best fix?

Accepted Answer

Keep loaded pages in the cache and restore the scroll position on return

Question 40

A car parts catalog shows search results that buyers compare, revisit, and share with colleagues. Which list pattern fits best?

Accepted Answer

Numbered or Load more pagination with the position kept in the URL

Question 41

A craft marketplace uses infinite scroll, and users can never reach the footer links for help and returns. What is the best fix?

Accepted Answer

Switch to a Load more button, or move those links somewhere always reachable

Question 42

A team chat app virtualizes its message list, but messages vary in height and the scroll position jumps as users scroll. What is the fix?

Accepted Answer

Measure rendered items, cache their heights, and correct estimates as items appear

Question 43

Users of an inventory table with 50,000 virtualized rows complain that the browser's find-in-page misses most items. What is the right response?

Accepted Answer

Add an in-app search over the full data set, since offscreen rows are not in the DOM

Question 44

A virtualized list has a 900 px viewport, fixed 36 px rows, and an overscan of 5 rows above and 5 below. About how many rows are rendered at once?

Accepted Answer

About 35 rows

Question 45

In a support chat window, loading older messages above the current view pushes the visible messages down. What is the fix?

Accepted Answer

Anchor on the first visible message and adjust the scroll offset after prepending

Question 46

An admin audit log shows Page 1 of 48,213, and the exact count query takes 6 seconds on a huge table. What is the best change?

Accepted Answer

Drop the exact total or show an estimate, and use cursor-based next and previous

Question 47

After an hour of scrolling a pet photo feed, the tab uses 1.5 GB and starts to stutter. What is the best fix?

Accepted Answer

Virtualize the list and evict far-away pages from memory, keeping cursors to refetch

Question 48

A warehouse sensor dashboard gets one-way updates every few seconds, and many users sit behind strict corporate proxies. Which transport fits best?

Accepted Answer

Server-Sent Events, since data flows one way over plain HTTP

Question 49

A payroll export job takes from 30 seconds to 10 minutes. The page must show when the file is ready. What is the simplest sound design?

Accepted Answer

Poll the job status every few seconds with backoff and stop when it is done

Question 50

A team messaging app reconnects its WebSocket after a network drop, and users report missing messages from the gap. What is the fix?

Accepted Answer

On reconnect, fetch messages after the last received sequence number, then resume

Question 51

After a reconnect, a customer support inbox shows some messages twice, because pushed and refetched messages overlap. What is the fix?

Accepted Answer

Deduplicate by message id when merging pushed and fetched messages

Question 52

A live auction board receives about 500 price updates per second, and the page freezes. What should the client do?

Accepted Answer

Buffer updates and apply them once per animation frame, keeping only the latest per item

Question 53

When the chat server restarts, about 100,000 WebSocket clients reconnect within the same second and overload it. What client change helps most?

Accepted Answer

Reconnect with exponential backoff and random jitter so clients spread out

Question 54

A live energy usage dashboard keeps drawing charts while its tab is in the background, draining laptop batteries. What is the best fix?

Accepted Answer

Pause rendering when the page is hidden and catch up from the latest state on return

Question 55

A project tracker gets pushed task updates, but the board, the task page, and the sidebar counts sometimes disagree. What is the best design?

Accepted Answer

Write pushed updates into the same server cache that every view reads from

Question 56

In a shared to-do app with optimistic updates, a user toggles an item twice quickly, and the two server responses arrive out of order. What prevents a wrong final state?

Accepted Answer

Track a version or the latest pending change per item and ignore stale responses

Question 57

For an event ticketing site, which action is the poorest fit for an optimistic update?

Accepted Answer

Confirming payment for a seat that many people want

Question 58

A field inspection app for bridge inspectors must keep working offline for hours and sync later. What is the core client design?

Accepted Answer

Queue writes in IndexedDB as an outbox with client ids and replay them in order online

Question 59

When an offline outbox replays after a flaky reconnect, some field reports are created twice on the server. What fixes this?

Accepted Answer

Send a client-generated idempotency key with each write so the server drops repeats

Question 60

Two nurses edit the same appointment note while offline. Both sync later. What is the safest conflict handling for free-text clinical notes?

Accepted Answer

Detect the conflict with a version number and show both versions for a person to merge

Question 61

A shared notes editor wants concurrent offline text edits to merge automatically with no lost keystrokes. What fits?

Accepted Answer

A conflict-free replicated data type (CRDT) or operational transform for the text

Question 62

An offline-capable news reader uses a service worker. Which caching plan fits the app shell and the article API?

Accepted Answer

Shell cache-first with versioned caches, and articles network-first with a cached fallback

Question 63

Data that a hiking trail app stores offline in IndexedDB sometimes disappears on phones low on space. What should the design do?

Accepted Answer

Request persistent storage, and treat local data as a cache that can be evicted

Question 64

An offline notes app orders edits by each device's clock, and some edits apply in the wrong order. What is the better approach?

Accepted Answer

Use server-assigned versions or logical counters instead of device wall clocks