All projects · SaaS Product Tools
Kanban Board — Drag-and-Drop Task Flow
An interactive, state-driven drag-and-drop Kanban board featuring 4 distinct columns (Backlog, To Do, In Progress, Done), customizable task cards…
An interactive, state-driven drag-and-drop Kanban board featuring 4 distinct columns (Backlog, To Do, In Progress, Done), customizable task cards with priority badges (High, Medium, Low) and assignee avatars, full CRUD task management via an accessible modal, and seamless localStorage persistence.
- Treats each column as a status and each card as an item with state, updating data models on drop rather than DOM coordinates
- Pixel-accurate replication of the 4-column layout with tinted column headers, task counter badges, and footer telemetry
- Full CRUD operations allowing users to add, edit, and delete task cards with priority highlighting and assignee selection
- Automatic background persistence to browser localStorage with reset and JSON export capabilities
- Real-time search and multi-criteria filtering by priority level and assignee
Built with: HTML5 Drag and Drop API, Vanilla JavaScript, localStorage, CSS Grid / Flexbox, State Management, UI/UX Design, Google Fonts (Sora, Outfit, Chivo Mono)