Skip to content

Design a Jira board (frontend)

Design the web client for a task board: columns of cards a team drags between states, with each card opening to its details.

System designFrontend and full stackCollaborationMid-levelSenior

What to work through

Work through a Jira board 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 board of columns, each a list of cards in order
  • Drag a card within its column or to another column, and undo a move
  • Open a card to read and edit its details
  • Move a card without dragging, by a click, a tap or the keyboard

Constraints to discuss

  • A drag or a click answers within 200 milliseconds
  • The first cards show within 2.5 seconds
  • A column of 1,000 cards still scrolls and drags smoothly
  • Every drag has a single-pointer alternative with no dragging (WCAG 2.2, 2.5.7, level AA), and works by keyboard
Need a starting point?

Watch for these common gaps as you prepare:

  • Nesting full cards inside columns, so one edit must be found and copied in several places
  • Whole-number positions that renumber a whole column on each move
  • Showing a move at once with no plan for the server refusing it
  • Treating keyboard dragging as the whole accessibility answer
  • Drawing every card of a long column in the page
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.