Drawzy
CompletedDrawzy is a real-time collaborative whiteboard application built for teams to brainstorm, sketch, and create together. It supports multiple drawing tools, shape recognition, sticky notes, and live cursors so every participant can see changes as they happen. The backend uses WebSockets for sub-50ms latency updates and a CRDT-inspired conflict resolution system to handle simultaneous edits gracefully.
Why I Built This
During team brainstorming sessions, I noticed how clunky existing whiteboard tools were — laggy, cluttered, and hard to collaborate on in real time. I wanted to build something lightweight, fast, and truly collaborative from the ground up.
Role
Frontend Lead
Duration
2 months
Status
Completed
Tech Stack
ReactTailwind CSSJavaScriptNode.jsSocket.io
Key Features
- Real-time multi-user collaboration with live cursors
- Drawing tools: pen, shapes, eraser, and color picker
- Shape recognition that snaps hand-drawn shapes to perfect geometry
- Sticky notes and text annotations with rich formatting
- Infinite canvas with pan and zoom controls
- Export boards to PNG, SVG, or shareable link
Challenges & Solutions
- Managed real-time state synchronization across multiple users without conflicts using an event-sourcing approach
- Optimized canvas rendering performance for smooth 60fps drawing even with hundreds of elements
- Built a custom shape recognition algorithm using point simplification and geometric matching
What I Learned
- WebSocket connection management and reconnection strategies
- Canvas API performance optimization techniques
- Event sourcing patterns for collaborative applications