A real-time collaborative whiteboard application built with React, Node.js, and Socket.io — draw, sketch, and collaborate with others live in the browser.
- 🖊️ Freehand Drawing — Smooth pencil/brush tool for freehand sketching
- 🔷 Shapes & Tools — Draw lines, rectangles, circles, and more
- ↩️ Undo / Erase — Undo actions or use the eraser to clean up your canvas
- 💾 Save / Export — Export your whiteboard as an image
- 🌐 Real-time Collaboration — Multiple users can draw together simultaneously via WebSockets
| Layer | Technology |
|---|---|
| Frontend | React, HTML, CSS, JavaScript |
| Canvas | HTML5 Canvas API |
| Backend | Node.js, Express |
| Real-time | Socket.io (WebSockets) |
- Node.js (v14 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/kunal-yelgate/White_Board.git cd White_Board -
Install dependencies
For the backend:
cd server npm installFor the frontend:
cd client npm install -
Start the development servers
Backend:
cd server npm startFrontend:
cd client npm start -
Open your browser and navigate to
http://localhost:3000
White_Board/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/
│ │ │ ├── Canvas/ # Canvas drawing component
│ │ │ ├── Toolbar/ # Tool selection & colors
│ │ │ ├── Collaboration/# User list & conflict resolver
│ │ │ └── UI/ # UI components (Header, etc.)
│ │ ├── hooks/ # Custom React hooks
│ │ ├── store/ # Zustand state management
│ │ └── App.js
│ └── package.json
├── server/ # Node.js + Express backend
│ ├── index.js # Entry point
│ ├── config/
│ │ ├── socket.js # Socket.io configuration
│ │ └── .env.example # Environment variables template
│ ├── middleware/
│ │ └── auth.js # JWT authentication
│ ├── events/
│ │ └── drawingEvents.js # Real-time drawing events
│ ├── rooms/
│ │ ├── RoomManager.js # Room management
│ │ └── RoomState.js # Room state management
│ └── package.json
└── README.md
- Open the app in your browser
- Use the toolbar to select a drawing tool (pen, shapes, eraser)
- Draw freely on the canvas
- Share the room URL with others to collaborate in real time
- Use the Save / Export button to download your drawing
Contributions, issues, and feature requests are welcome!
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature/your-feature - Open a Pull Request
This project is open source and available under the MIT License.
Kunal Yelgate
- GitHub: @kunal-yelgate