Overview
A Kanban board built for the Web Programming course at Sharif: create boards and tasks, edit and delete them, and move tasks between columns by dragging. Small enough to build well rather than merely finish.
Drag and drop that works without a mouse
Drag and drop is where most task boards quietly become unusable for anyone not using a pointer. HTML5's native drag events are inconsistent across browsers and effectively inaccessible from the keyboard.
DnDKit was the right choice specifically because it treats keyboard interaction as a first-class input rather than an afterthought: a task can be picked up, moved between columns, and dropped entirely from the keyboard, with the same state transitions as a pointer drag. It also leaves sensor configuration and collision detection open, which matters when columns scroll independently.
State and validation
Zustand holds board state. Reordering applies optimistically — the card moves the moment you release it, because waiting on anything before showing the result makes a direct-manipulation interface feel broken.
Task forms use React Hook Form with Zod resolvers, so the shape of a task is declared once as a schema and drives both the form validation and the types the store operates on. When the schema changes, everything downstream stops compiling, which is exactly the behaviour worth having.
Delivery
Built with Vite and deployed through Vercel's CI/CD. React Hot Toast handles notifications for the actions that need confirmation.