Skip to content

Design a to-do app (frontend)

Design the web client for a to-do app: lists of tasks people add, edit, tick off and reorder, kept in step across their devices.

System designFrontend and full stackCollaborationMid-levelSenior

What to work through

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

  • Add, edit and delete tasks in a list
  • Tick a task off, and back on
  • Reorder tasks by dragging, or with the keyboard
  • See the same lists on every device, with changes made elsewhere

Constraints to discuss

  • A tick or a drag answers within 200 milliseconds
  • The first tasks show within 2.5 seconds
  • A list holds up to 300 active tasks
  • No change is lost or applied twice when a request is retried
  • A change on one device shows on another without a manual reload
Need a starting point?

Watch for these common gaps as you prepare:

  • Waiting for the server before showing a tick
  • Showing a change at once with no rollback when the server refuses
  • Renumbering the whole list on every move
  • Retrying a change with no id, so it applies twice
  • Reloading every list in full to stay in step
  • No way to reorder without dragging
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.