← Business
🗂️
Drag-and-Drop Kanban Board
A real Trello-style board with drag-and-drop columns that actually persists between visits.
🟡 MediumDifficulty
3-4 hoursTime
JavaScript, TypeScriptLanguages
What you're building
You're building a genuine project-management tool: three columns (To Do, In Progress, Done), draggable cards, and everything saved to localStorage so it's still there when you close the tab and come back tomorrow. This is the exact interaction pattern behind Trello, Jira, and every 'board view' feature in modern project tools -- and you're building the real drag-and-drop mechanics yourself, not faking it with buttons.
What you'll unlock 🔓
You'll need
- Basic JavaScript
- CSS Flexbox
- A browser
🗺️ Build roadmap
01 Build the three-column board layout
→
02 Add a form to create new cards
→
03 Make cards draggable between columns
→
04 Wire up the native HTML5 drag-and-drop events
→
05 Persist the board state to localStorage
→
06 Load saved state back on page refresh
→
07 Add card deletion and a card counter per column
→
08 Polish with drag-over highlighting
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free