Skip to content

Design a trading screen (frontend)

Design the web client for a trading screen: a price chart, a live order book, recent trades, a form to place an order and the person's own holdings.

System designFrontend and full stackPayments and ledgersSeniorStaff

What to work through

Work through a trading screen as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • Show a price chart, a live order book and recent trades for one market
  • Place a market or limit order and see it go from sent to open to filled
  • Show the person's open orders and holdings, kept up to date
  • Show clearly when prices are stale or the live feed is down

Constraints to discuss

  • Each frame's work fits in about 10 milliseconds, so the screen never stutters
  • A tap on buy or sell answers within 200 milliseconds
  • An order is never placed twice, however many times the button is pressed
  • A price on screen is never older than it looks
Need a starting point?

Watch for these common gaps as you prepare:

  • Redrawing the book on every message that arrives
  • Showing a fill or a new balance before the exchange confirms it
  • Retrying an order with no id that lets the exchange spot a repeat
  • Showing old prices as live while the feed is down
  • Ordering book changes by time instead of by sequence number
Read: Frontend system design interview questions, and who asks them

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

AI systemsDesign a ChatGPT-style chat (frontend)Search and autocompleteDesign an autocomplete search box (frontend)CollaborationDesign a calendar (frontend)Messaging and notificationsDesign a chat app (frontend)
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.