A modern, high-performance Kanban board built for productivity and seamless task management. Designed with a focus on intuitive UI/UX and smooth interactions.
- Intuitive Drag & Drop: Move tasks between columns seamlessly
- Responsive Design: Works perfectly on mobile, tablets (iPad), and desktops.
- Dark Mode Support: Toggle between light and dark themes with persistent storage.
- Smart Task Management:
- Create, Edit, and Delete tasks.
- Quick Complete: One-click "Done" button to move tasks to the completed section.
- Priority levels (Urgent, High, Medium, Low) with color-coded indicators.
- Search & Filter: Find tasks instantly with real-time search and priority filtering.
- Progress Tracking: Visual progress bar showing the percentage of completed tasks.
- Local Persistence: Your tasks and theme preferences are saved automatically in your browser.
- Frontend: React 18 + TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Drag & Drop: @dnd-kit
- Animations: Framer Motion / CSS Transitions
- Build Tool: Vite
Explore theMyboard experience:
This is a production-ready frontend project demonstrating a clean and modern Kanban workflow.
The board loads with sample tasks by default so you can instantly see how the Kanban workflow operates.
Feel free to move, edit, or delete the demo tasks to experiment with the interface and understand the workflow.
Kanban Board Workflow Tasks are organized across three workflow stages:
Todo In Progress Done Users can move tasks between columns using drag and drop interactions.
Create new tasks Edit existing tasks Delete tasks Assign task priority levels Priority Labels
Urgent High Medium Low These help visually organize important work.
Users can:
Search tasks by title or description Filter tasks by priority This improves usability when managing larger task lists.
Persistent Storage
FlowBoard uses localStorage to save the board state.
This ensures that tasks remain available even after refreshing the page.
Progress Indicator
A dynamic progress bar displays the percentage of completed tasks, giving users quick visual feedback on workflow progress.
Responsive Design
FlowBoard adapts seamlessly across:
Desktop Tablets Mobile devices The layout automatically adjusts to maintain usability on smaller screens.
This project was built to:
Demonstrate strong frontend engineering skills Showcase React-based UI architecture Implement real-world product-style interactions Build a clean and responsive productivity interface FlowBoard represents a production-quality frontend project similar to task management tools used in real development workflows.
Altamash tariq
GitHub https://github.com/altamashtariq
LinkedIn https://www.linkedin.com/in/altamash-tariq/
License This project was developed for the GDG on Campus SRM Technical Domain Recruitment Task.