Loading content…
Loading content…
Design a collaborative task management application featuring drag-and-drop kanban boards, task lists, prioritization controls, and filtered sorting columns.
Design a collaborative task management application featuring drag-and-drop kanban boards, task lists, prioritization controls, and filtered sorting columns.
Intermediate React developers looking to master local state handling, coordinate dragging operations, and write fluid list UI updates.
Business Objective
Project managers require boards to track priorities. The app must enable drag-and-drop transitions between status columns, filter tasks by label, and persist updates automatically.
Core Features List
task-manager/ ├── src/ │ ├── components/ │ │ ├── KanbanBoard.tsx # Board container │ │ ├── KanbanColumn.tsx # Column wrappers │ │ ├── TaskCard.tsx # Card elements │ │ └── TaskModal.tsx # Edit dialog │ ├── hooks/ │ │ └── useTasks.ts # State provider │ ├── types/ │ │ └── index.ts # Task interface │ └── App.tsx └── tsconfig.json
`Kanban Board` Component
Main page grid housing task columns, coordinating dragging states.
`Task Card` Component
Displays title, priority tag, due date, and registers drag events.
`Task Modal` Component
Form editor containing input fields, dropdown priorities, and validation checks.
GET /api/tasks
Response (200 OK):
{
"tasks": [
{
"id": "task_1",
"title": "Database Schema Setup",
"priority": "high",
"status": "todo"
}
]
}Construct static column grids displaying lists of mock tasks.
Build task modal forms and state modifiers to append, edit, and delete entries.
Integrate drag-and-drop logic using native HTML5 drag APIs or lightweight libraries.
Apply filter triggers and write state synchronizers to persist changes.
💡 Enforce unique UUID keys on created cards.
💡 Debounce local storage updates to optimize write performance.
Click on any question to view the recommended architectural response for technical interviews.