CASE STUDY · PRODUCTIVITY
Task Management App
A kanban workspace where teams see each other's changes the moment they happen: no refresh, no merge conflicts.
- ROLE
- Frontend lead
- TIMELINE
- 8 weeks
- TEAM
- 3 people
- PLATFORM
- Web app
PRODUCT IDENTITY
Flowboard
Move work forward, together.
01 · OVERVIEW
Project overview
DEVELOPMENT TIME
8 weeks
Prototype to team rollout
TEAM SIZE
3 people
Frontend lead, backend, designer
KEY ACHIEVEMENT
< 100 ms sync
Changes appear for everyone instantly
THE PROBLEM
The team ran sprints across a whiteboard, a spreadsheet and chat threads. Cards moved in one place and not the others, so nobody trusted the board.
THE APPROACH
Flowboard keeps one source of truth in Supabase and broadcasts every change over realtime channels, with optimistic updates so drag and drop feels instant.
< 100 ms
to sync a move to every teammate
5 hrs
saved per sprint on status meetings
0
conflicting edits on shared boards
02 · FEATURES
What it does
Realtime boards
Every card move, edit and comment syncs live across the team.
Drag and drop
Optimistic updates keep moves instant, with rollback on failure.
Live presence
See who is viewing and editing each card right now.
File sharing
Attach files with inline previews in the task drawer.
Sprint reports
Velocity and burndown, exportable as CSV.
Magic-link invites
Invite teammates by email with no passwords to manage.
03 · PROCESS
How it was built
WEEK 1
Discover
Mapped how the team actually ran sprints and where status got lost.
- Workflow map
- MVP scope
WEEK 2
Design
Board, list and timeline views plus the task drawer.
- Figma prototype
- Component library
WEEK 3–7
Build
Next.js app, Supabase schema with row-level security and realtime channels.
- Web app
- Realtime layer
WEEK 8
Ship
Rolled out mid-sprint to the team, then to two partner teams.
- Team rollout
- 3 teams live
04 · TECH STACK
Built with
FRONTEND
- Next.js
- TypeScript
- Tailwind CSS
REALTIME
- Supabase Realtime
- Presence
- Broadcast
DATA
- PostgreSQL
- Row-level security
- Storage
TOOLING
- dnd-kit
- Zod
- Playwright
ARCHITECTURE
Flowboard app
Next.js + dnd-kit
Supabase
Auth, RLS, realtime
PostgreSQL
Boards, tasks
Realtime channels
Broadcast, presence
Storage
File attachments
05 · LEARNINGS
Challenges & learnings
Conflicting drags
CHALLENGE
Two people dragging the same card left boards out of order.
OUTCOME
Fractional ordering keys with server-confirmed positions resolved conflicts cleanly.
Securing shared boards
CHALLENGE
People could still load tasks from boards they had been removed from.
OUTCOME
Postgres row-level security scoped every query to board membership.
Interested in this project?
Happy to walk through the code, the decisions behind it, or how something similar could work for your team.