Problem Statement
Kanban boards are critical task management tools used in agile environments. The core user interaction is moving item cards between workflow columns (such as "To Do", "In Progress", "Done") via drag-and-drop.
Building a Kanban board requires a solid grasp of:
- React state updates for nested arrays/objects.
- Drag-and-drop events (
dragstart,dragover,drop). - Providing visual drop indicators and managing performance during drags.
We need to build a fully functional Kanban board in React using the native HTML5 Drag and Drop API.
Requirements
Functional
- Task Card Rendering: Display columns side-by-side, each rendering a list of task cards belonging to that column.
- Drag-and-Drop Operations:
- Users can drag any task card and drop it onto any column.
- When a card is dropped, the task's column state must update instantly, moving the card to the new column list.
- Prevent invalid drop actions and clean up styling states when drops complete or abort.
- Add and Delete Tasks:
- Allow users to add a new task card to a column.
- Allow users to delete a task card.
- Visual States:
- Show a highlight or border state on columns when a card is being dragged over them.
Non-Functional
- Avoid unnecessary component re-renders during dragging.
- Ensure code is clean, typed with TypeScript interfaces, and uses efficient state lookups.
Concepts Tested
- HTML5 Drag and Drop API events (
onDragStart,onDragOver,onDragLeave,onDrop,draggable). - Complex React state updates (updating array objects).
- Performance optimizations.