Katkat
Back

Design Comments for a Collaborative Whiteboard

FigmaSoftware Engineer · Technical Screen
MediumSoftware EngineerTechnical ScreenSystem Design

Last updated

Design a real-time, durable commenting system for an infinite collaborative whiteboard where comments attach to dynamic canvas objects or fixed coordinates.

Scenario

In a collaborative design tool like Figma or FigJam, users collaborate on an infinite 2D canvas. Users can leave comments pinned either to absolute spatial coordinates or anchored directly to mutable canvas objects (such as shapes, frames, or text blocks). As objects move, scale, or get deleted, comments must maintain semantic correctness.

Design the backend and real-time infrastructure to support threaded comments on a collaborative board.

Requirements

Functional

  • Anchor Semantics: Users can attach comment threads to an absolute canvas coordinate (x, y) or relative to a specific object ID (with local offsets). If an object moves, the comment moves with it. If an object is deleted, the comment should handle the orphan state gracefully.
  • Thread Lifecycle: Create, reply, edit, delete, and resolve comment threads.
  • Real-Time Sync: Deliver new comments, edits, and typing/resolution indicators to active board viewers with sub-100ms latency.
  • Mentions & Notifications: Support @mentions that trigger asynchronous notifications (email, push, in-app).
  • Offline/Reconnect: Ensure idempotent writes and proper deduplication if a client reconnects after network dropouts.

Non-Functional

  • Scale: 10 million Daily Active Users (DAU), 50 million comment operations per day. Peak read fan-out for "hot boards" with up to 20,000 concurrent viewers.
  • Consistency & Ordering: Strict chronological ordering within a thread; eventual consistency across spatial updates.
  • Availability & Durability: Comments must never be lost once acknowledged by the server.

Deliverables

  1. Data Model & Anchor Strategy: Define schemas for threads, comments, and spatial anchors. Explain how to resolve positions when shapes undergo concurrent transformations.
  2. API & Real-Time Protocol: Specify endpoints/payloads for posting comments and the transport mechanism (WebSockets, SSE) for fan-out.
  3. System Architecture: Diagram/explain the flow from client write to durable storage, cache, pub/sub, and fan-out layer.
  4. Hot-Board Mitigation: Address the "celebrity board" problem where thousands of clients view a single canvas simultaneously.

Hints

Hint 1

Consider decoupling coordinate storage: store object-relative coordinates as a normalized offset `(dx, dy)` from the object's origin rather than recalculating absolute points on every frame.

Hint 2

Separate the durable commit path (relational DB with client-generated idempotency keys) from the real-time fan-out tier (Redis Pub/Sub or message bus).

Hint 3

For high-concurrency boards, avoid 1:1 fan-out per event on single broker nodes by utilizing hierarchical channel clusters or client-side batching/debouncing.

Follow-up questions

  • How does your anchoring model handle nested grouping, rotation, or an object being cut and pasted to another page?
  • If an object is temporarily deleted and then restored via 'Undo' 5 minutes later, how do associated comments recover?
  • How would you implement End-to-End Encryption (E2EE) for comment bodies while still supporting server-side @mention notifications and keyword search?