2024
MindSketch — Real-time Collaborative Diagramming
A real-time collaborative diagramming tool enabling multiple users to draw simultaneously with low-latency WebSocket sync, intuitive canvas UI, and seamless multi-user state accuracy (99%). Deployed on Azure with CI/CD pipelines.
Technology Stack
Next.jsNode.jsWebSocketRedisCanvas APITurborepoTailwind CSSAzureCI/CD Pipelines
Overview
Key Challenges
- •Ensuring canvas states remained
- •99% consistent across clients even with rapid or overlapping strokes.
- •Reducing WebSocket round-trip latency to maintain a smooth real-time drawing experience.
- •Designing a scalable architecture capable of handling spikes in concurrent users.
- •Managing transient cursor movements and stroke data without flooding the network.
Key Learnings
- •Leveraging
- •Redis Pub/Sub dramatically improved event distribution accuracy for real-time WebSocket rooms.
- •State batching + stroke compression reduced bandwidth usage by over 40%.
- •Canvas reconciliation strategies (especially debounced syncing) ensured zero perceived jitter.
- •CI/CD automation with Azure pipelines significantly reduced deployment friction.
Uniqueness
- •Ultra-low-latency collaborative drawing with no flicker or ghost strokes.
- •A fully custom Canvas API-based engine — not whiteboard libraries.
- •Real-time presence indicators with highly optimized WebSocket rooms.
Impact
- •Delivered an experience with <50ms latency for 90% of operations.
- •Achieved 99% multi-user canvas accuracy, measured across 100+ sync events.
- •Improved team collaboration speed by an estimated 20 - 30% in brainstorming sessions.