React Kanban Board with TypeScript

This challenge asks you to build a basic Kanban board application using React and TypeScript. Kanban boards are a popular project management tool that visually organizes tasks into different stages, allowing for efficient workflow tracking. This exercise will test your understanding of React components, state management, and TypeScript typing.

Problem Description

You are tasked with creating a Kanban board with three columns: "To Do," "In Progress," and "Done." Each column should display a list of tasks. Tasks should be represented as draggable cards. Users should be able to drag and drop tasks between columns, effectively moving them through the workflow.

Key Requirements:

• Columns: The board must have three columns: "To Do," "In Progress," and "Done."
• Tasks: Each column should initially contain a few sample tasks. You can hardcode these initially.
• Drag and Drop: Users should be able to drag tasks from one column to another.
• State Management: The Kanban board's state (the tasks and their column assignments) should be managed using React's state.
• TypeScript: The entire application must be written in TypeScript, with appropriate type annotations for components, props, and state.
• Visual Representation: The board should be visually clear and easy to understand. Basic styling is sufficient; focus on functionality.

Expected Behavior:

• When a task is dragged and dropped onto a different column, the task should visually move to that column.
• The underlying state of the Kanban board should be updated to reflect the new position of the task.
• The UI should re-render to display the updated task assignments.
• The application should handle drag and drop events gracefully, preventing errors or unexpected behavior.

Edge Cases to Consider:

• Dragging a task onto the same column it already resides in. (Should not cause an error, and ideally, provide visual feedback to the user).
• Empty columns. The board should handle empty columns without errors.
• A large number of tasks. While not a primary focus, consider how the drag-and-drop functionality might perform with a significant number of tasks.

Examples

Example 1:

Input: Initial state: To Do: ["Task 1", "Task 2"], In Progress: ["Task 3"], Done: ["Task 4"]
Output: Kanban board displaying three columns with the listed tasks.
Explanation: The initial state is rendered, showing the tasks in their respective columns.

Example 2:

Input: User drags "Task 2" from "To Do" to "In Progress".
Output: Kanban board with "To Do" column containing ["Task 1"], "In Progress" column containing ["Task 2", "Task 3"], and "Done" column containing ["Task 4"].
Explanation: The state is updated to reflect the movement of "Task 2", and the UI re-renders accordingly.

Example 3:

Input: User drags "Task 3" from "In Progress" to "Done".
Output: Kanban board with "To Do" column containing ["Task 1"], "In Progress" column containing ["Task 2"], and "Done" column containing ["Task 3", "Task 4"].
Explanation: The state is updated, and the UI reflects the task's new location.

Constraints

• Technology: React, TypeScript, and a drag-and-drop library (e.g., react-beautiful-dnd or react-dnd). You are free to choose the library.
• Styling: Basic CSS styling is acceptable. No need for complex styling or UI frameworks.
• Performance: The application should be responsive and performant, even with a moderate number of tasks (e.g., up to 20 tasks total).
• Dependencies: Limit the number of external dependencies to keep the project manageable.

Notes

• Consider breaking down the problem into smaller, manageable components (e.g., Column, Task).
• Think about how to represent the Kanban board's state effectively. An array of objects, where each object represents a task and includes its column assignment, is a common approach.
• The drag-and-drop library you choose will dictate how you handle drag and drop events. Refer to the library's documentation for specific instructions.
• Focus on the core functionality of dragging and dropping tasks between columns. Additional features (e.g., adding new tasks, editing tasks, deleting tasks) are beyond the scope of this challenge.
• Prioritize clear and well-typed code over complex optimizations.