Skip to content

Design a live trivia game (frontend)

Design the web client for a live trivia game: players join a round, everyone sees each question at the same moment, answers before the timer ends and watches the scores change.

System designFrontend and full stackCollaborationMid-levelSenior

What to work through

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

  • Join a round and see who else is playing before it starts
  • See each question at the same moment as every other player
  • Answer before the timer ends and learn whether the answer counted
  • Watch the scores and the leaderboard change after each question

Constraints to discuss

  • Every player gets the same time to answer, whatever their connection
  • A tap on an answer shows within 200 milliseconds
  • A player can drop for a few seconds and carry on in the same round
  • The client cannot learn the answer early or stretch its own time
Need a starting point?

Watch for these common gaps as you prepare:

  • Trusting the time each device reports for an answer
  • Sending the correct answer along with the question
  • Starting the countdown when the question arrives instead of from the server's time
  • Removing a player's place the moment the connection drops
  • Sending watchers every answer, as if they were players
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.