Web Apps · 2023 · Live
TaskFlow
Next-generation agile workspace unifying sprints, boards, and real-time collaboration.
- Role
- Full-Stack Engineer
- Duration
- 5 months
- Team size
- 3 people
Project overview
What this product is
TaskFlow is team task management that stays out of the way — kanban boards, sprint planning and realtime collaboration in one calm workspace, built for small teams that find enterprise tools louder than their problems.
I joined at the start of the build and owned the product architecture end-to-end: the realtime board engine, the API layer, and the component system the two other engineers built against.
The problem
Why it existed
Small teams don't need ERP-grade project management, but the lightweight tools they default to break exactly where teamwork starts: conflicting edits, no history, and mobile experiences that assume you'll never actually work from them.
Who experienced it
Agencies, product teams of 3–15 people, and remote teams coordinating across time zones.
Why current solutions weren't enough
Heavy tools price and punish small teams; light tools go silent when two people move the same card. Nobody served realtime collaboration with a small-team price tag and respect for attention.
The idea
Vision and constraints
Original vision
A board that behaves like a shared document: every drag, comment and assignment lands for everyone in real time, with a history you can actually read afterwards.
And a strong opinion about attention — no red badges everywhere, no gamification. TaskFlow is quiet on purpose.
Development process
01
Discover
Mapped the jobs small teams actually hire a board for — and the moments existing tools made them swear.
02
Plan
Specified the realtime event contract before any UI existed; the board was an API client first.
03
Design
Prototyped the quiet visual language and tested drag interactions with real cards, real hands.
04
Build
Realtime core, then boards, then sprints and views. Each milestone shipped to a friendly pilot team.
05
Refine
Six weeks of pilot feedback reshaped notifications into the digest system teams now rely on.
My role
Exactly what I worked on
As the senior engineer on a team of three, I owned architecture and the hardest parts of the build.
Realtime Engine
Designed the Socket.IO event model and server-authoritative board state with optimistic client updates.
API & Data Layer
Express REST API over MongoDB with audit trails, permissions and board-level rate limiting.
Board UX
Drag-and-drop with keyboard parity, multi-select, and a command palette for keyboard-first users.
Design System
Built the shared component library the team shipped against — tokens, primitives, patterns.
Infra
Dockerised deployment behind Nginx, with Redis for presence and pub/sub fan-out.
Tech stack
The tools that shipped it
Key features
What makes it useful
Realtime Boards
Server-authoritative state with optimistic updates — drags land instantly and resolve cleanly under conflict.
- Presence cursors and live card locks
- Undo that works across sessions
- Full audit history per card
Sprint Planning
Plan from the backlog, drag into sprints, and see capacity before you overcommit.
- Velocity based on your real history
- Work-in-progress limits with gentle warnings
- Carryover handled without ceremony
Notification Digests
One calm digest instead of forty pings — mention-level alerts stay instant, everything else batches.
- Instant only for mentions and assignments
- Configurable digest rhythm
- Mute per board, not per life
Design & UX
How it feels to use
The interface was designed to disappear during solo work and become a shared surface during team work.
Keyboard parity
Every drag action has a keyboard equivalent — power users never touch the mouse, and it shows in retention.
Colour as meaning
Colour encodes state and nothing else; identity comes from avatars and names, never decoration.
Density dial
Comfortable and compact modes share the same components — density is a token, not a fork.
Technical challenges
And how they were solved
Conflict resolution under simultaneous edits
Two people reordering the same column was the classic corruption scenario. Server-authoritative ordering with fractional-index positions made concurrent drags safe without locking entire columns.
Optimistic UI without lies
Optimistic updates feel great until the server disagrees. Every mutation carries a compensating rollback, so a failed drag slides the card back instead of leaving the board in fiction.
Scaling presence
Presence fan-out degraded as boards grew. Redis pub/sub with room sharding kept presence cheap and made multi-server deployment boring.
What I learned
Honest takeaways
TaskFlow was my education in realtime product engineering — and in how much UX lives inside infrastructure decisions.
- The event contract is the real architecture; design it before any screen exists.
- Optimistic UI is a promise — budget the rollback path for every mutation.
- Notification design is respect design. The digest became the most-praised feature.
- A shared component system pays for itself within weeks on a small team.
Results
Outcomes where available
TaskFlow runs as a commercial product for a set of long-term client teams. Public user figures aren't disclosed; the metrics below are the ones I can stand behind.
<100ms
Board sync latency
Drag-to-peer on production infrastructure
0
Data-loss incidents
Since the realtime engine rewrite
5
Teams in production
Daily-driver teams across agencies and startups
30+
Shipped features
Boards, sprints, digests, integrations
Final takeaway
Building TaskFlow taught me…
TaskFlow taught me that realtime is a UX promise backed by an infrastructure contract — and that the calmest products are usually the hardest to build.
Gallery
Board — realtime kanban with presence
Card detail — history and comments
Sprint planning — capacity at a glance
Mobile — board from the train
Keep exploring
