← Apps
🗂️
Kanban Board with Drag & Drop
A Trello-style board with real drag-and-drop cards between To Do, In Progress, and Done.
🔴 HardDifficulty
4-5 hoursTime
JavaScript, TypeScriptLanguages
What you're building
A three-column kanban board where you create task cards and physically drag them between To Do, In Progress, and Done columns using the native HTML5 Drag and Drop API - no library needed. Every card's position is saved to localStorage, so your board looks exactly the same when you come back.
What you'll unlock 🔓
You'll need
- Basic JavaScript
- Comfortable with DOM events
🗺️ Build roadmap
01 Set up the board data model
→
02 Build the three-column layout
→
03 Render cards into columns
→
04 Add new-card creation per column
→
05 Make cards draggable
→
06 Handle drop events between columns
→
07 Persist board state
→
08 Polish with visual drag feedback
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free