The Capstone Project

As a user, I want to organize my tasks into columns so I can track progress.

• Columns: Three fixed columns: "To Do", "In Progress", "Done".
• CRUD: Create, Read, Update, and Delete tasks.
• State: Use Zustand for global state management.
• Persistence: Save data to localStorage automatically.

export type Status = 'TODO' | 'IN_PROGRESS' | 'DONE';

export interface Task {
  id: string;
  title: string;
  description: string;
  status: Status;
  createdAt: number;
}

export interface BoardState {
  tasks: Task[];
  addTask: (title: string, status: Status) => void;
  moveTask: (id: string, newStatus: Status) => void;
  deleteTask: (id: string) => void;
}

As a user, I want to drag tasks between columns for a natural interaction.

• Implement dnd-kit (recommended) or react-beautiful-dnd.
• Tasks must visually snap into place.
• Accessibility: Must support keyboard navigation (Space to lift, Arrows to move, Space to drop).

As a user, I want to share a link to a specific task with my colleague.

• Clicking a task opens a modal.
• The URL must update to /board/task/123.
• Refreshing the page at that URL must open the board and the modal immediately.
• Closing the modal returns the URL to /board.

As a developer, I want to ensure the app is robust and bug-free.

• Testing: Write unit tests for the `TaskCard` and integration tests for the "Add Task" flow.
• Performance: Use React.memo on `TaskCard`. Ensure dragging one card doesn't re-render the whole board.
• Linting: No ESLint warnings or TypeScript errors.