SaaS Workflow Tool/May 2024 - Aug 2024/Completed
FlowSync
Role: Fullstack Developer
TimelineMay 2024 - Aug 2024
StatusCompleted
RoleFullstack Developer
Stack
ReactTypeScriptTailwind CSSVite
01 / The Problem
Teams struggle to align calendar schedules with task lists, resulting in fragmented workflows, missed deadlines, and poor tracking of tasks across project management tools.
02 / The Solution
Developed FlowSync, an integrated workspace merging a drag-and-drop Kanban board with an interactive calendar. The application links tasks to specific dates and visualizes overall team progress with analysis charts, keeping work synchronized.
03 / Key Features
Interactive Drag-and-Drop Kanban Board
Dynamic Task Analytics and Progress Bars
Custom Dashboard with Workspace Metrics
Clean Glassmorphic Theme with Dark Mode Support
Collaborative Workspace Mockups
04 / Architecture
React & Vite Frontend
↓
Drag-and-Drop Handler (HTML5 DnD API)
↓
Tailwind CSS (Glassmorphism design tokens)
↓
Workspace Analytics Engine05 / Challenges
Handling smooth transitions and drag-and-drop state syncing between the Kanban Board and the Calendar database without layout shifts or slow response times. Solved by decoupling render updates from database writes.
06 / Outcomes & Impact
- Interactive Kanban Board with drag-and-drop functionality
- Linked Calendar showing real-time task allocations
- Fully Responsive UI across Tablet, Desktop, and Mobile sizes
- Lightweight Bundle Size under 150KB for fast loads