How would you build a collaborative whiteboard in React?

🧩 Scenario

You're building a Google Jamboard/Miro-style collaborative whiteboard that supports:

• Freehand drawing
• Shapes (rectangles, arrows, text)
• Real-time remote collaboration
• Cursor presence for all users
• Undo/redo stacks
• Zooming and panning
• Conflict-free syncing

🧠 Answer (Design Overview)

Core Components

1. Canvas Rendering Layer

   • Use <canvas> for freehand strokes
   • For shapes, either draw via canvas or overlay SVG for interactive nodes

2. Drawing Model

   • Every stroke = list of points { x, y, pressure }
   • Shapes = objects with type + geometry
   • Keep operations immutable

3. Collaboration Layer

   • Use WebSockets for real-time updates
   • Use CRDT (e.g., Yjs, Automerge) for multi-user conflict-free syncing
   • Broadcast:

     {
       type: 'stroke.append', strokeId, point;
     }
     

4. Cursor Presence

   • Every client broadcasts cursor movements ~10–20 fps
   • Render remote cursors at interpolated positions

5. Undo/Redo

   • Store operations, not canvas bitmaps
   • Undo = revert last operation

6. Performance

   • Use requestAnimationFrame to batch draws
   • Avoid re-rendering entire React tree — canvas is imperative

Tradeoffs:

• CRDTs handle conflict merging elegantly but add bundle size.
• Simple WebSocket broadcasting may lead to desync if not carefully managed.

🎯 Live Demo

🔍 Real-World Tips

• Use Yjs + WebRTC provider for peer-to-peer syncing.
• Implement brush smoothing (Chaikin algorithm).
• Use spatial indexing (R-tree) for selecting shapes.
• Use layers for organizing drawing elements.
• Batch updates with requestAnimationFrame.

Quick Practice

1. Add shape creation (rectangles, circles).
2. Add a selection box with drag handles.
3. Add collaboration cursors.
4. Add undo/redo based on operation stack.

Summary

• Use Canvas for rendering and WebSockets/CRDTs for syncing.
• Treat interactions as operations, not pixels.
• Handle multi-user presence and cursor sharing.
• Keep rendering imperative for performance.