Deep Dive · 2024
Calendar Planner
A timeline-first planning surface for distributed teams
ROLEFrontend Engineer
DURATION5 months
TEAM1 designer · 2 frontend · 2 backend
TIMELINE2024
ReactTypeScriptWebSocketsZustandTailwind
Challenge & Limitations
The operational hurdles, data boundaries, and strict service Level agreements of the system.
The Problem Statement
Teams were planning across three different tools — a calendar, a task tracker, and a chat thread. Decisions made in one place were invisible in the others. We were asked to build a single planning surface where roles, timelines, and tasks lived together and stayed in sync across the team in real time.
Rigid Constraints
- ·Real-time sync across users without flicker or jitter
- ·A timeline that worked equally well at hour, day, and week scales
- ·Drag-to-reschedule with conflict detection
- ·Five distinct user roles, each with their own affordances
Design & Engineering Decisions
The tactical solutions mapping backend systems, developer experience, and interface layout.
Architecture
- →Picked Zustand for local UI state and TanStack Query for server state — clear ownership, no overlap
- →Implemented an optimistic update layer with server reconciliation, so dragging a task feels instant even on a slow connection
- →Built the timeline as a virtualized canvas component to keep frame rates steady at hundreds of items per view
UX & Interface
- →Used color sparingly — only to mark conflicts, blockers, and your own work
- →Made drag handles invisible until hover, then unmistakable — quiet by default, obvious when needed
- →Added a low-key activity rail so team members could see who else was editing without context-switching
Performance
- →Virtualized timeline rendering keeps DOM nodes under 200 even on the densest view
- →Server messages batched and coalesced on a 60ms window to prevent re-render storms during heavy team activity
- →Skeleton states sized to match real content so the timeline never reflows after data arrives
Deliverables
The Outcome & Business Impact
The team consolidated three tools into one and reported a meaningful drop in planning meetings. Drag-to-reschedule alone removed an entire class of back-and-forth messages from their week.
3 → 1Tools consolidated
−30%Planning meeting time
60 fpsFrame rate at peak
Navigation