Design Digital Whiteboard

Hard45 min
1 / 30
understanding8 min read

Problem framing and infinite-canvas collaboration

How Problem framing and infinite-canvas collaboration (understanding) informs Digital Whiteboard architecture and interviewer depth.

Problem framing and infinite-canvas collaboration

A digital whiteboard is an infinite 2D canvas where facilitators place sticky notes, connectors, freehand ink, and template frames while dozens of remote participants edit concurrently. Unlike slide decks, there is no fixed page order—state is a mutable object graph keyed by board_id with z-order, grouping, and lock flags.

Interviewers expect you to split durable board mutations (create shape, move sticky, route connector) from ephemeral presence (cursor, laser pointer, viewport, who's following whom). Freehand strokes are high-frequency, small payloads batched at 60 Hz; structural objects are lower frequency but must stay totally ordered per board on the server to avoid forked trees after reconnect.

Assume 35M MAU, 180M boards, median board 2.8 MB serialized graph, 12 concurrent editors on workshop boards, and 250 object ops/s aggregate on flagship retros. Peak freehand ingest can add 1.2k point batches/s per hot board without blocking structural commits.

Java

javaOne Dark Pro
1public final class BoardShardKey {
2 public String route(String orgId, String boardId) {
3 if (orgId == null || boardId == null) throw new IllegalArgumentException("required");
4 return orgId + ":" + boardId;
5 }
6}

Python

pythonOne Dark Pro
1def board_shard_key(org_id: str, board_id: str) -> str:
2 if not org_id or not board_id:
3 raise ValueError("required")
4 return f"{org_id}:{board_id}"

TypeScript

typescriptOne Dark Pro
1export function boardShardKey(orgId: string, boardId: string): string {
2 if (!orgId || !boardId) throw new Error("required");
3 return `${orgId}:${boardId}`;
4}

Key Highlights

  • Infinite canvas uses object graph, not pages
  • Ink batches are separate from structural ops
  • Hot boards exceed 250 structural ops/s
What interviewers want to hear
Lead Problem framing and infinite-canvas collaboration with numeric SLOs and board-scoped sync sharding.
Pro tip
Separate ink batches from structural commits before discussing CRDT nuances.
Common mistake
Storing every sticky as a SQL row—use op log + snapshots instead.

Section Rescue Kit

Buzzwords to use:

Board Op LogTile Manifest

Safe statements:

  • "For Problem framing and infinite-canvas collaboration, I keep attachment bytes off Kafka and enforce per-board ordering on a sticky sync shard."
  • "If challenged on consistency, I serve the last snapshot read-only rather than risk divergent graphs."
Design Digital Whiteboard - System Design | WinJob | WinJob