Real-time collaboration tool
VP Whiteboard
A shared markup board where a structural engineering firm and its clients draw over the same drawings at the same time, with live cursors, stamps and real-world measurements.
- Role
- Design, Development
- Duration
- 5 weeks to launch
- Client portal
- whiteboard.vp-associates.com
Overview
VP Whiteboard is an internal tool built for VP Associates, a Tampa structural engineering firm. Engineers upload a drawing set as the canvas background and annotate it together in real time: pen, shapes, arrows, callouts and engineering stamps (Approved, Revised, For Review), with each collaborator's cursor and in-progress strokes visible to everyone else. Scale can be set per sheet (1" = 10'), so distance and area measurements read in real-world units and are flagged as stale when the scale changes. Sync is conflict-free through Yjs CRDTs over a WebSocket relay, and the Konva canvas culls off-screen elements to stay smooth past 500 annotations. Clients review through a share link without an account, and finished boards export as PNG or print-ready PDF. The backend was later migrated from Supabase to Laravel and MySQL.
Built with
- Nuxt 3
- Vue 3
- TypeScript
- Konva
- Yjs
- Laravel
- MySQL
- WebSockets