Workflow Dashboard

Project Overview

FlowTrack is a responsive task management dashboard built using React and Tailwind CSS. It helps users organize, track, and visualize their tasks across different workflow stages -To–Do, In Progress, Review, and Done. The app features drag-and-drop functionality, task creation, deletion, and smooth animations for a modern project management experience.

Screenshots

Key Features

Add new tasks with title, description, tag, and due date
Drag and drop tasks between stages (To-Do → In Progress → Review → Done)
Delete tasks anytime
Auto-updating progress counters (Total and Completed tasks)
Fully responsive and mobile-friendly UI
Clean gradient-based visual design
(Optional) Extendable for LocalStorage or backend persistence

Functionality

Add Task:
- Fill in details like title, description, tag, and due date
- Instantly appears in the To-Do column
Move Task:
- Drag and drop tasks between columns (To-Do → In Progress → Review → Done)
Delete Task:
- Instantly remove any task from any column
Track Progress:
- Dashboard updates total and completed task counts dynamically
Responsive UI:
- Works perfectly on desktop, tablet, and mobile

Technology Used

React.js (Vite) – Component-based UI
Tailwind CSS – Utility-first styling
Framer Motion – For smooth drag animations (optional enhancement)
Lucide React Icons – For elegant task visuals
PostCSS + Autoprefixer – For optimized CSS builds

Why This Project Is Useful

FlowTrack provides a visual and interactive way to manage tasks and workflows efficiently.
Instead of using static lists or retyping tasks, users can easily drag, drop, and update task progress — similar to tools like Trello or Asana but lightweight and customizable.