Multiplayer Scribbl

Overview

Multiplayer Scribbl is a real-time collaborative whiteboard: open it on two devices (or two tabs), draw on one, and the strokes appear on the other instantly.

What it does

• Real-time whiteboard synchronization across every connected client.
• Bi-directional communication with Socket.io — the server relays each drawing event to all other clients as it happens.
• Works across devices: open two tabs on the same machine or different devices and every change reflects everywhere.

How it's built

The frontend is Next.js with Tailwind CSS; drawing events stream over Socket.io to an Express server hosted on Azure, tuned for low latency.

Key decisions:

• Strokes are sent as incremental point events rather than full canvas snapshots, keeping payloads tiny and latency low.
• The socket server simply fans events out to the room — clients own the rendering, which keeps the server cheap and fast.

Note: the Azure free-tier backend pauses after inactivity. If the live demo seems dead, refresh 2–3 times to wake it up.

What I learned

Real-time sync is a study in latency budgets: batching events, avoiding echo back to the sender, and reconciling what happens when a client joins mid-drawing.