Overview
The client's teams designed building floor plans in a slow, single-user desktop program. Plans were passed around as files, edits collided, and every handoff risked overwriting someone's work. We built a web-based editor — think Figma for architectural layouts — where multiple drafters edit one plan live, with an admin suite to manage users and shared master data.
The problem
Three things were breaking the old workflow:
- No real collaboration. Only one person could safely edit a plan at a time; everyone else waited or worked on stale copies.
- Performance ceilings. Plans with thousands of shapes stuttered — panning and zooming felt heavy.
- A rigid file format. Everything had to round-trip through the client's existing XML schema without losing data.
Constraints
- Pixel-accurate drawing at ~60fps on mid-range laptops.
- Real-time sync with sane conflict handling across 10+ concurrent editors.
- Lossless import/export of the client's XML plan format.
- Role-based admin for users, permissions, and master data.
Architecture
The editor is a React shell around a dedicated canvas engine. React never re-renders on every brush stroke — the canvas owns its own render loop, so drawing stays smooth no matter how busy the UI is. Only sync-critical state (shapes, selections) flows through Redux Toolkit and a thin WebSocket layer to a NestJS gateway that broadcasts to everyone in the room. XML import/export lives in an isolated module so the format can evolve on its own.
client
├── React + Redux Toolkit UI shell · sync-critical state
└── Canvas engine own render loop · hit-testing
↕ WebSocket · real-time room sync
server
├── NestJS gateway rooms · auth · broadcast
└── XML import / export isolated, lossless module
↕ persistence
data
└── PostgreSQL plans · users · master data
Key decisions & trade-offs
- Canvas over SVG/DOM. Chose
<canvas>to hold 60fps with thousands of shapes. Trade-off: we had to build hit-testing and accessibility affordances ourselves. - Redux for sync-critical state only. Ephemeral UI state stays local, so we don't flood the store — or the socket — on every mouse move.
- Optimistic updates + server reconciliation. Edits apply instantly for a snappy feel; the server is the source of truth when two people touch the same shape.
Results
- ~60 fps — Smooth drawing with 2,000+ shapes
- 10+ live — Concurrent editors per plan
- 12 — Engineers led as Technical Leader
- 100% XML — Lossless round-trip with legacy format
Numbers are illustrative; the real build renders this from MDX (bilingual EN/VI).