#12Kanban board
Overview
Create a Kanban board with columns for To Do, In Progress, and Done with drag-and-drop functionality to move tasks between columns.
Requirements
- Implement a Kanban board with three columns:
- To Do
- In Progress
- Done
- Each column should display a list of tasks.
- Implement an input to add new tasks to the To Do column.
- Enable drag-and-drop so tasks can be moved between columns.
- Provide a trash area or mechanism to delete tasks by dragging them there.
- Use the provided
useApphook to centralize all board logic
Notes
- A file with the task and column types (
TaskType,Status,Column) is provided. Use these types to structure your Kanban board state. - A base component
ColumnStatusis provided to show a sample layout for columns and tasks. You can extend or modify it to implement drag-and-drop and task deletion. - Ensure that each task has a unique
idto avoid issues with React keys and drag-and-drop. - You can optionally use helper functions like
bgColororborderColorfromColumnStatusto style tasks according to their status.
Tests
- renders main title, input and columns
- adds a new task when submitting input
- deletes task when dropped on trash
- moves task to another column on drag & drop