Design a Kanban board frontend with drag and drop
PremiumFrontend systemEasy
- Drag and drop
- Fractional indexing
- Optimistic UI
Quick answer
This frontend system interview question asks you to design a Kanban board frontend with drag and drop. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design the frontend of a kanban board with drag and drop, like Trello or Jira, where cards move within and across columns. The hard part is a drag that feels instant with mouse, touch and keyboard, an order model that survives concurrent moves, and showing teammates' moves live.
A board has columns (To Do, In Progress, Done, and custom ones) and each column holds ordered cards. Users drag cards within a column, across columns, and drag whole columns to reorder them. Cards can be added inline, opened in a detail panel, and filtered by assignee or label. Several teammates work on the same board at once and see each other’s moves within a couple of seconds.
What must a Kanban board frontend with drag and drop do?
- Drag cards: Pick up a card with mouse or touch, see a placeholder where it will land, drop within or across columns; auto-scroll when dragging near an edge.
- Keyboard moves: Focus a card, press Space to pick up, arrows to move within and across columns, Space to drop, Escape to cancel, with spoken announcements.
How well must it do it?
- Feel: The dragged card follows the pointer at 60 fps; drop reorders instantly, before the server replies.
- Correctness: Two users moving different cards in the same column at the same time never end with the same position or a lost card.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Drag and drop
- Fractional indexing
- Optimistic UI
- Pointer events
- Keyboard drag and drop
- Normalized store
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a Kanban board frontend with drag and drop and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Easy, so it suits engineers who are new to frontend system interviews. It is also a good warm-up before harder questions.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team