Kanban Board

A Trello-style Kanban board is a visual project management tool that uses a board divided into columns (lists) to represent different stages of a workflow. Build a simple Trello-style Kanban board with three columns:

• To Do
• In Progress
• Completed

Each task should:

• Be created from an input.
• Be moved between columns using left/right buttons.
• Support editing the title from any column .
• Support deletion from any column.

Requirements

1. A text input and a button to add new tasks.

2. Render 3 columns:

   • To Do → In Progress → Completed

3. Each task must have:

   • Task title.
   • Edit and Delete buttons.
   • ← button (except in To Do) to move left.
   • → button (except in Completed) to move right.

4. Clicking Edit shows an input to change the title.

   • Saving happens on Enter key or onBlur.

5. Delete removes the task from any column.

Testing requirements

• The input should have data-testid="task-input".
• The button to add a task should have data-testid="add-task-button".
• The To Do column should have data-testid="column-todo".
• The In Progress column should have data-testid="column-in-progress".
• The Completed column should have data-testid="column-completed".
• Each task should have data-testid="task-<task.id>".
• The title of the task should have data-testid="task-title-<task.id>".
• The input shown while editing should have data-testid="task-title-edit-<task.id>".
• The left arrow button should have data-testid="move-left-<task.id>".
• The right arrow button should have data-testid="move-right-<task.id>".
• The edit button should have data-testid="edit-button-<task.id>".
• The delete button should have data-testid="delete-button-<task.id>".

Reference UI