Flowboard
Flowboard enables real-time team collaboration through synchronized boards, live user presence, inline discussions, and optimistic UI updates.
Problem Statement
Modern teams often struggle to maintain visibility over their workflows. Existing task management tools are notoriously rigid and bloated. This forces users to adapt their own habits to fit the software instead of the other way around.
Technical Challenge
The biggest engineering hurdle was building a highly reactive collaboration environment. It required managing complex client state across heavy interactive components without causing rendering bottlenecks or lagging the user interface.
Fluid Drag-and-Drop Kanban
Implemented smooth drag and drop mechanics paired with optimistic state mutations. This guarantees that moving a card feels instantaneous to the user, long before the database confirms the change.
Real-Time Collaboration Sync
Leveraged Supabase Realtime over WebSocket connections to broadcast data mutations and live presence instantly across active clients. This architecture maintains a globally synchronized workspace state so users never have to manually refresh the page to see the latest updates.
Interactive Analytics Dashboard
An embedded reporting engine designed to track task completion metrics. It renders the data into responsive, interactive charts where users can easily drill down into their personal productivity trends over time.
Global Task Aggregator
Managing multiple projects can become overwhelming, so I built a dedicated 'My Tasks' hub. This feature aggregates data from various independent boards into a single actionable view. It relies on optimized database queries to fetch and organize deadlines without impacting the overall application performance.
Flicker-Free Adaptive Theming
Built an instant theme transition engine powered by semantic CSS variables and pre-hydration scripts. The architecture eliminates flash of unstyled content while maintaining strict contrast compliance across boards, charts, and overlay dialogs.
Beyond the Dashboard
While the core application focuses on complex workflows, the landing experience ensures the product is approachable. I applied the same level of polish and interaction design to the public-facing pages.
Seamless on Mobile
The interface dynamically scales and adapts to mobile screens, ensuring a frictionless user experience across all devices.
The Result
Flowboard scales effortlessly to handle complex workspaces. It processes complex UI interactions in under 50ms to provide users with a truly seamless desktop class experience on the web.
Lessons Learned
A major takeaway from this project was the value of headless architecture. Using unstyled primitives like Radix UI allowed me to completely decouple application logic from styling. This proved critical for scaling the application safely without accumulating the technical debt often caused by strict component libraries.
More Projects
Venu
Venu handles high-traffic ticket drops across independent frontend applications, covering simulated waiting rooms, interactive seat selection, and digital ticket checkout.
Loka
Loka provides a shared UI foundation for Venu, establishing centralized design tokens, accessible components, and fluid micro-interactions across independent web apps.
Janji Sehat
Digitizing patient bookings through passwordless OTP authentication and real-time scheduling.
Kitchef
Kitchef unifies recipe discovery with on-demand grocery delivery, synchronizing ingredients, live order tracking, and in-app chat between customer and driver apps.
