CompletedViteTypeScriptReact+3 more
Drag N Flow
A modern, interactive Kanban board built with React, TypeScript, and DND Kit. This project allows users to manage tasks through a drag-and-drop interface with customizable columns and tasks.
Timeline
7 Days
Role
Full Stack
Team
Solo
Status
CompletedTechnology Stack
Vite
TypeScript
React
Tailwind CSS
Vercel
DND Kit
Key Challenges
- Drag Handling
- State Syncing
- Column Reordering
- Task Movemen
Key Learnings
- DND Toolkit
- State Management
- UX Interaction
- Optimistic Updates
Drag N Flow
A modern, interactive Kanban board built with React, TypeScript, and DND Kit. This project allows users to manage tasks through a drag-and-drop interface with customizable columns and tasks.
Features
-
Drag and Drop Functionality
- Reorder tasks within columns
- Move tasks between columns
- Reorder columns
- Smooth drag animations
-
Column Management
- Create new columns
- Edit column titles
- Delete columns with all associated tasks
- Dynamic column reordering
-
Task Management
- Create tasks in any column
- Edit task content
- Delete tasks
- Move tasks between columns
- Inline task editing
Tech Stack
- React 18.3
- TypeScript
- Vite
- Tailwind CSS
- DND Kit for drag-and-drop functionality
- SWC for fast refresh