Building a Multiplayer Design Tool from Scratch

The Vision

CollabSpace, a Series A EdTech startup (€4.5M raised), wanted to build the "Figma for Education" — a real-time collaborative whiteboard where teachers and students could brainstorm, diagram, and co-create together. Existing tools (Miro, FigJam) lacked the educational scaffolding features they envisioned: templated lesson frameworks, AI-powered summarization of brainstorm sessions, and offline-first mobile support for schools with poor connectivity.

The Engineering Challenge: Real-Time at Scale

The core technical problem: how do you keep 50 simultaneous cursors and drawing operations in sync with < 50ms perceived latency, even on spotty school Wi-Fi networks?

1. CRDT-Based Sync Engine

Implemented a custom Conflict-free Replicated Data Type (CRDT) engine based on Yjs.
Every canvas element (sticky note, shape, drawing stroke, text block) is a CRDT node.
Operations merge deterministically — no server-side conflict resolution needed.
Offline edits queue locally and sync seamlessly when connectivity resumes.

2. WebSocket Infrastructure

Custom WebSocket server built on Cloudflare Durable Objects — each "room" is a persistent, single-threaded actor.
Awareness protocol broadcasts cursor positions, selection states, and user presence at 30fps.
Binary protocol (CBOR encoding) reduces message payload by 60% vs JSON.

3. Infinite Canvas Renderer

Custom rendering engine built on HTML Canvas 2D (not WebGL) for maximum compatibility with school Chromebooks.
Virtualized rendering: only elements within the viewport + 200px buffer are drawn.
Hit-testing via spatial index (R-tree) for instant element selection even with 10k+ objects.
Smooth 60fps pan/zoom with momentum physics.

4. AI Features

Session Summarizer: At the end of a brainstorm, an LLM (Claude 3.5 Sonnet) clusters sticky notes by theme and generates a structured summary document.
Smart Templates: AI-generated lesson plan frameworks based on curriculum standards (Italian MIUR guidelines).
Handwriting Recognition: On-device ML model converts freehand drawings to clean shapes and handwritten text to typed text.

5. Mobile & Offline

Progressive Web App with full offline support via Service Workers.
Touch-optimized gestures: pinch-to-zoom, two-finger pan, long-press for context menus.
Adaptive quality: reduces animation complexity on low-powered devices.

Technology Stack

Frontend: React, Zustand, HTML Canvas 2D, Yjs
Backend: Cloudflare Workers, Durable Objects, R2 (storage)
Real-Time: WebSockets, CRDT (Yjs), CBOR encoding
AI: Claude 3.5 Sonnet, TensorFlow.js (on-device)
Mobile: PWA, Service Workers, IndexedDB

Traction (3 months post-launch)

15,000 MAU across 200+ Italian schools.
99.97% uptime with zero data loss incidents.
Average session duration: 47 minutes (vs. 12 min industry average for EdTech tools).
App Store rating: 4.8/5 (iOS) and 4.7/5 (Android via TWA).

The Vision

The Engineering Challenge: Real-Time at Scale

The core technical problem: how do you keep 50 simultaneous cursors and drawing operations in sync with < 50ms perceived latency, even on spotty school Wi-Fi networks?

1. CRDT-Based Sync Engine

Implemented a custom Conflict-free Replicated Data Type (CRDT) engine based on Yjs.

Every canvas element (sticky note, shape, drawing stroke, text block) is a CRDT node.

Operations merge deterministically — no server-side conflict resolution needed.

Offline edits queue locally and sync seamlessly when connectivity resumes.

2. WebSocket Infrastructure

Custom WebSocket server built on Cloudflare Durable Objects — each "room" is a persistent, single-threaded actor.

Awareness protocol broadcasts cursor positions, selection states, and user presence at 30fps.

Binary protocol (CBOR encoding) reduces message payload by 60% vs JSON.

3. Infinite Canvas Renderer

Custom rendering engine built on HTML Canvas 2D (not WebGL) for maximum compatibility with school Chromebooks.

Virtualized rendering: only elements within the viewport + 200px buffer are drawn.

Hit-testing via spatial index (R-tree) for instant element selection even with 10k+ objects.

Smooth 60fps pan/zoom with momentum physics.

4. AI Features

Session Summarizer: At the end of a brainstorm, an LLM (Claude 3.5 Sonnet) clusters sticky notes by theme and generates a structured summary document.

Smart Templates: AI-generated lesson plan frameworks based on curriculum standards (Italian MIUR guidelines).

Handwriting Recognition: On-device ML model converts freehand drawings to clean shapes and handwritten text to typed text.

5. Mobile & Offline

Progressive Web App with full offline support via Service Workers.

Touch-optimized gestures: pinch-to-zoom, two-finger pan, long-press for context menus.

Adaptive quality: reduces animation complexity on low-powered devices.

Real-Time Collaborative Whiteboard Platform

Building a Multiplayer Design Tool from Scratch

The Vision

The Engineering Challenge: Real-Time at Scale

1. CRDT-Based Sync Engine

2. WebSocket Infrastructure

3. Infinite Canvas Renderer

4. AI Features

5. Mobile & Offline

Technology Stack

Traction (3 months post-launch)

Real-Time Collaborative Whiteboard Platform

Building a Multiplayer Design Tool from Scratch

The Vision

The Engineering Challenge: Real-Time at Scale

1. CRDT-Based Sync Engine

2. WebSocket Infrastructure

3. Infinite Canvas Renderer

4. AI Features

5. Mobile & Offline

Technology Stack

Traction (3 months post-launch)