Real-time Collaborative Whiteboard

Project roadmap

1. 01

   Set up the server and page

   ~1h

   Create a Node.js project with Express and Socket.IO. Serve a public/ folder with index.html containing a full-window canvas element and a small toolbar. Start the server on port 3000. Done when: opening http://localhost:3000 shows the page with an empty canvas.

2. 02

   Draw on the canvas locally

   ~2h

   Listen for pointerdown, pointermove and pointerup on the canvas so it works with a mouse, a pen and touch. While the pointer is down, draw line segments between consecutive points with the 2D context (beginPath, moveTo, lineTo, stroke), with round line caps. Resize the canvas when the window changes size, taking devicePixelRatio into account so lines stay sharp. Done when: you can draw smooth lines in the browser.

3. 03

   Share strokes through Socket.IO

   ~2h

   Instead of sending every point on its own, collect points and send a stroke segment event every 30 to 50 ms with the new points, color, width and a stroke id. Use coordinates from 0 to 1, relative to the canvas size, so they work on any screen size. The server broadcasts each event to the other clients. Done when: drawing in one browser tab appears in another tab almost instantly.

4. 04

   Add color, size and clear

   ~1.5h

   Add a color picker and a brush size slider to the toolbar, sent with each stroke. Add a Clear button that sends a clear event; the server broadcasts it and every client clears its canvas. Done when: colors and sizes appear correctly in other tabs, and Clear empties every open board.

5. 05

   Catch up late joiners

   ~2h

   Keep the board's history on the server: the list of stroke segments since the last clear. When a client connects, send it the whole history and draw it before live updates. Cap the history (for example 50,000 segments) to protect memory. Done when: opening a new tab shows everything drawn so far.

6. 06

   Support separate rooms

   ~1.5h

   Take the room name from the URL (for example /?room=team-a, defaulting to lobby) and join it with socket.join. Broadcast strokes and clears only within the room, and keep a separate history per room. Show the room name and the number of people connected in the toolbar. Done when: two different rooms never see each other's drawings.

7. 07

   Validate messages and test

   ~2h

   On the server, reject malformed events: coordinates outside 0 to 1, invalid colors, brush sizes outside 1 to 50, or too many points in one event. Write tests with a test runner (Vitest or Node's built-in node:test) using socket.io-client that connect two clients to the same room and check that strokes and clears arrive, and that another room receives nothing. Done when: the tests pass.

Resources

• DocsSocket.IO documentation
• DocsCanvas API tutorial (MDN)
• DocsPointer events (MDN)
• DocsExpress documentation
• DocsSocket.IO rooms