◆codeseed
Sign in
Explore Projects
JavaScriptintermediatewebAI Generated

Real-time Collaborative Whiteboard

Real-time collaborative drawing canvas — multiple users can draw simultaneously, with basic tools: pencil, shapes, text, colors.

5 steps
Sign in to claim this project
Project Roadmap
  1. 01

    Canvas drawing engine

    Implement basic tools on HTML Canvas: freehand, line, rectangle, circle.

  2. 02

    WebSocket server

    Node.js/Express server with ws: broadcast drawing events to all connected clients.

  3. 03

    Sync state

    On connection, send the current state (PNG snapshot) to the new user.

  4. 04

    User cursors

    Display other users' cursors with a unique avatar/color.

  5. 05

    Collaborative undo/redo

    Action stack per user with propagation to others.

Resources

Ready to build this?

Fork the repo on GitHub and start building. A mentor will review your code when you open a PR.

5 steps

Tech Stack

Canvas APIWebSocketNode.jsExpress