A real-time collaborative whiteboard application built with React, Fabric.js, and WebSockets. Draw, sketch, and brainstorm together with your team — seamlessly and instantly.
Features • Architecture • Getting Started • Structure • WebSocket Events • Roadmap • Contributing
Replace the placeholder above with an actual screenshot or GIF of the board in action — a short recording of two cursors drawing together sells the "real-time" pitch better than any description.
- 🖊️ Freehand Drawing — Smooth pen tool with pressure support
- 🟦 Shapes & Objects — Rectangles, circles, lines, arrows, and text
- 🧽 Eraser Tool — Precision erasing with adjustable size
- 🎨 Color Palette — Custom colors, opacity control, and stroke width
- 👥 Real-Time Collaboration — See cursors and edits live with WebSockets
- ↩️ Undo / Redo — Full history stack with keyboard shortcuts (
Ctrl+Z/Ctrl+Y) - 🖼️ Image Upload — Drag & drop images onto the canvas
- 🔍 Zoom & Pan — Navigate large boards with ease
- 💾 Auto-Save — Persistent storage with MongoDB
- 🔗 Shareable Rooms — Unique room IDs for instant collaboration
- 📱 Responsive Design — Works on desktop and tablet
┌────────────────────────────────────────────────────────────┐
│ CLIENT LAYER │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ React App │◄─►│ Fabric.js │◄─►│ Socket.io │ │
│ │ (UI / State)│ │ (Canvas API)│ │ Client │ │
│ └─────────────┘ └─────────────┘ └──────┬──────┘ │
└──────────────────────────────────────────────┼──────────────┘
│ WebSocket
▼
┌────────────────────────────────────────────────────────────┐
│ SERVER LAYER │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Node.js │◄─►│ Socket.io │◄─►│ Redis │ │
│ │ (Express) │ │ (WS Hub) │ │ (Pub/Sub) │ │
│ └─────────────┘ └─────────────┘ └──────┬──────┘ │
│ │ │
│ ┌─────────────┐ ┌─────────────┐ │ │
│ │ MongoDB │◄─►│ AWS S3 / │◄──────────┘ │
│ │ (Metadata) │ │ Cloudinary │ (Session State) │
│ └─────────────┘ └─────────────┘ │
└────────────────────────────────────────────────────────────┘
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | React 18 | UI framework |
| State | Zustand | Lightweight global state |
| Canvas | Fabric.js | 2D drawing & object manipulation |
| Styling | CSS Modules / Tailwind | Component styling |
| Real-Time (client) | Socket.io Client | WebSocket communication |
| Backend | Node.js + Express | API & WebSocket server |
| Real-Time (server) | Socket.io | Bidirectional event handling |
| Database | MongoDB | Whiteboard data persistence |
| Cache | Redis | Session state & pub/sub |
| Storage | AWS S3 / Cloudinary | Image asset storage |
- Node.js
>= 18.0.0 - npm
>= 9.0.0or yarn - MongoDB
>= 6.0(local or Atlas) - Redis
>= 7.0(local or cloud)
git clone https://github.com/kunal-yelgate/visual-whiteboard.git
cd visual-whiteboard# Install server dependencies
npm install
# Install client dependencies
cd client
npm install
cd ..Create .env files for both client and server. A .env.example is provided in each folder — copy it and fill in your own values.
Server (server/.env):
PORT=5000
MONGODB_URI=mongodb://localhost:27017/visual-whiteboard
REDIS_URL=redis://localhost:6379
JWT_SECRET=your-super-secret-jwt-key
CORS_ORIGIN=http://localhost:3000
AWS_S3_BUCKET=your-s3-bucket
AWS_ACCESS_KEY_ID=your-access-key
AWS_SECRET_ACCESS_KEY=your-secret-keyClient (client/.env):
REACT_APP_API_URL=http://localhost:5000
REACT_APP_SOCKET_URL=http://localhost:5000
⚠️ Never commit.envfiles. Both are already covered by.gitignore.
# Start MongoDB & Redis (if running locally)
# macOS (Homebrew)
brew services start mongodb-community
brew services start redis
# Linux
sudo systemctl start mongod
sudo systemctl start redis
# Start the backend server
npm run dev
# In a new terminal, start the React client
cd client
npm startThe app will be available at http://localhost:3000.
visual-whiteboard/
├── client/ # React frontend
│ ├── public/
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── Canvas/ # Fabric.js canvas wrapper
│ │ │ ├── Toolbar/ # Drawing tools & controls
│ │ │ ├── Collaboration/ # User cursors & presence
│ │ │ └── UI/ # Layout components
│ │ ├── hooks/ # Custom React hooks
│ │ │ ├── useFabric.js # Fabric.js initialization
│ │ │ ├── useWebSocket.js # Socket connection
│ │ │ ├── useWhiteboardState.js # Global state
│ │ │ └── useHistory.js # Undo/redo logic
│ │ ├── store/ # Zustand stores
│ │ ├── utils/ # Helpers & serializers
│ │ └── App.jsx
│ └── package.json
│
├── server/ # Node.js backend
│ ├── config/ # DB & socket config
│ ├── handlers/ # Socket event handlers
│ │ ├── drawHandler.js
│ │ ├── objectHandler.js
│ │ ├── cursorHandler.js
│ │ └── historyHandler.js
│ ├── middleware/ # Auth & rate limiting
│ ├── models/ # Mongoose schemas
│ ├── rooms/ # Room management
│ ├── routes/ # REST API routes
│ └── index.js # Entry point
│
├── shared/ # Shared types & constants
├── docker-compose.yml # Docker setup
└── README.md
| Event | Direction | Description |
|---|---|---|
room:join |
Client → Server | Join a whiteboard room |
room:leave |
Client → Server | Leave current room |
draw:start |
Client → Server | Begin drawing stroke |
draw:move |
Client → Server | Drawing in progress (throttled) |
draw:end |
Client → Server | Complete drawing stroke |
object:modify |
Client → Server | Move, resize, or rotate object |
object:delete |
Client → Server | Delete selected objects |
cursor:move |
Client → Server | Mouse position update |
user:draw:start |
Server → Client | Another user started drawing |
user:draw:move |
Server → Client | Another user is drawing |
object:created |
Server → Client | New object added to canvas |
object:modified |
Server → Client | Object was modified |
objects:deleted |
Server → Client | Objects were removed |
user:joined |
Server → Client | New user entered room |
user:left |
Server → Client | User disconnected |
user:cursor |
Server → Client | Remote cursor position |
# Client tests
cd client
npm test
# Server tests
cd server
npm test# Build React app
cd client
npm run build
# Start production server
cd ../server
npm start# Start all services with Docker Compose
docker-compose up -d| Service | URL |
|---|---|
| App | http://localhost:3000 |
| API | http://localhost:5000 |
| MongoDB | localhost:27017 |
| Redis | localhost:6379 |
- Basic drawing tools (pen, shapes, text)
- Real-time collaboration with WebSockets
- Undo / Redo functionality
- Image upload & drag-drop
- Zoom & pan navigation
- Sticky Notes — Add and edit sticky notes
- Templates — Pre-made board templates
- Comments — Add comments to specific areas
- Version History — Time-travel through board states
- Export — PDF, PNG, SVG export
- Auth & Teams — OAuth login and team workspaces
- Mobile App — React Native companion app
- Offline Support — Service worker & local sync
Contributions are welcome!
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
Please read the Contributing Guide for details on code style, testing, and commit conventions.
This project is licensed under the MIT License — see the LICENSE file for details.
- Fabric.js — Powerful canvas library
- Socket.io — Real-time bidirectional communication
- React — UI library
- Zustand — State management
Made with ❤️ by Kunal Yelgate · Email · LinkedIn · Portfolio