🎨 Collaborative Whiteboard Application

A real-time collaborative whiteboard application built with Node.js, Express, Socket.io, and vanilla JavaScript. Multiple users can draw simultaneously on a shared canvas with live cursors, user management, and persistent drawing state.

✨ Features

🎯 Core Drawing Features

• Multiple Drawing Tools: Pen, eraser, rectangle, circle, line
• Color Picker: Full color picker with preset colors
• Adjustable Brush Sizes: Small, medium, large, and extra-large sizes
• Clear Canvas: One-click canvas clearing
• Undo/Redo: Last 50 actions with keyboard shortcuts (Ctrl+Z, Ctrl+Y)
• Export: Download canvas as PNG image

🤝 Real-time Collaboration

• Live Drawing: See other users' drawings in real-time
• Live Cursors: See other users' cursors with their names and colors
• User Management: Automatic user assignment with unique colors
• Join/Leave Notifications: Real-time user activity notifications
• User Counter: Live count of connected users

🏗️ Technical Features

• WebSocket Communication: Real-time bidirectional communication
• Drawing State Persistence: Automatic saving and restoration of drawing state
• Mobile Support: Touch events for tablets and mobile devices
• Responsive Design: Works on desktop, tablet, and mobile
• Keyboard Shortcuts: Power user features
• Performance Optimized: Efficient canvas rendering and data transmission

🚀 Quick Start

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

Installation

1. Clone or download the project

   # If you have git
   git clone <repository-url>
   cd collaborative-whiteboard
   
   # Or extract the downloaded files to a folder

2. Install server dependencies

   cd server
   npm install

3. Start the server

   npm start
   # Or for development with auto-restart:
   npm run dev

4. Access the application

   • Open your browser and navigate to: http://localhost:3000
   • Enter your name to join the collaborative whiteboard
   • Start drawing with other users!

📁 Project Structure

collaborative-whiteboard/
├── client/                 # Frontend files
│   ├── index.html         # Main HTML file
│   ├── styles.css         # CSS styling
│   ├── app.js            # Main JavaScript application
│   └── types.ts          # TypeScript type definitions
├── server/                # Backend files
│   ├── server.js         # Express server with Socket.io
│   ├── package.json      # Server dependencies
│   └── drawingState.json # Persistent drawing data (auto-generated)
└── README.md             # This file

🛠️ Development

Server Development

cd server
npm run dev  # Starts server with nodemon for auto-restart

Adding New Features

1. Frontend: Edit client/app.js for new drawing tools or UI features
2. Backend: Edit server/server.js for new WebSocket events or API endpoints
3. Styling: Edit client/styles.css for visual changes

Environment Variables

The server uses the following default configuration:

• Port: 3000 (can be changed with PORT environment variable)
• CORS: Enabled for all origins (configure in server/server.js for production)

🎮 How to Use

Getting Started

1. Join: Enter your name when prompted
2. Choose Tool: Select pen, eraser, rectangle, circle, or line from the toolbar
3. Pick Color: Use the color picker or preset colors
4. Adjust Size: Choose brush size or use the slider
5. Start Drawing: Click and drag on the canvas

Keyboard Shortcuts

• Ctrl+Z: Undo last action
• Ctrl+Y or Ctrl+Shift+Z: Redo
• Ctrl+S: Export canvas as PNG

Drawing Tools

• Pen: Free-hand drawing
• Eraser: Remove parts of drawings
• Rectangle: Draw rectangles (click and drag)
• Circle: Draw circles (click and drag from center)
• Line: Draw straight lines (click and drag)
• Clear: Clear entire canvas

Collaboration Features

• Live Cursors: See other users' mouse positions
• User Colors: Each user gets a unique color for their cursor
• Real-time Sync: All drawings appear instantly for all users
• User List: See all connected users in the right panel

🔧 Configuration

Server Configuration

Edit server/server.js to modify:

• Port number
• CORS settings
• Maximum drawing actions stored
• User color palette
• Auto-save frequency

Client Configuration

Edit client/app.js to modify:

• Canvas size
• Maximum undo/redo history
• Drawing tool settings
• UI behavior

📊 Performance & Scalability

Current Limits

• Concurrent Users: Tested with 20+ users
• Drawing Actions: Stores last 1000 actions
• History: Last 50 undo/redo actions
• Canvas Size: 1200x800 pixels

Optimization Features

• Efficient Data Transmission: Only essential drawing data is sent
• Action Limiting: Automatic cleanup of old drawing actions
• Canvas Optimization: Optimized rendering for smooth drawing
• Memory Management: Proper cleanup of disconnected users

🚀 Deployment

Local Deployment

1. Install dependencies: npm install
2. Start server: npm start
3. Access at http://localhost:3000

Production Deployment

1. Environment Setup:

   export NODE_ENV=production
   export PORT=3000

2. Security Configuration:

   • Update CORS settings in server/server.js
   • Add authentication if needed
   • Configure proper error handling

3. Process Management:

   # Using PM2
   npm install -g pm2
   pm2 start server/server.js --name "whiteboard"
   
   # Using systemd (Linux)
   # Create service file for automatic startup

4. Reverse Proxy (Recommended):

   • Use Nginx or Apache to serve static files
   • Proxy WebSocket connections to the Node.js server

Docker Deployment

FROM node:18-alpine
WORKDIR /app
COPY server/package*.json ./
RUN npm install --production
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

🐛 Troubleshooting

Common Issues

1. "Cannot connect to server"

   • Ensure the server is running on port 3000
   • Check firewall settings
   • Verify no other application is using port 3000

2. "Drawing not appearing for other users"

   • Check browser console for WebSocket errors
   • Ensure server is running and accessible
   • Try refreshing the page

3. "Canvas not responding to touch on mobile"

   • Ensure you're using a modern browser
   • Try using a different browser
   • Check if touch events are being blocked

4. "High memory usage with many users"

   • The server automatically limits stored actions
   • Restart the server periodically for large groups
   • Consider implementing user limits

Debug Mode

Enable debug logging by setting:

export DEBUG=socket.io:*
npm start

🔮 Future Enhancements

Planned Features

• Text Tool: Add text labels to drawings
• Zoom/Pan: Navigate large canvases
• Layers: Organize drawings in layers
• Room System: Multiple separate whiteboards
• User Authentication: Secure user management
• Export Options: PDF, SVG, and other formats
• Drawing Templates: Pre-made shapes and templates

Nice-to-Have Features

• Voice Chat: Integrated audio communication
• Screen Sharing: Share screen while drawing
• Drawing Recognition: Convert handwriting to text
• Version History: Track changes over time
• Collaborative Tools: Voting, commenting, etc.

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes
4. Test thoroughly
5. Commit your changes: git commit -m 'Add feature'
6. Push to the branch: git push origin feature-name
7. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Socket.io for real-time communication
• Express.js for the web server
• HTML5 Canvas API for drawing functionality
• Modern CSS for responsive design

📞 Support

If you encounter any issues or have questions:

1. Check the troubleshooting section above
2. Search existing issues in the repository
3. Create a new issue with detailed information
4. Include browser version, operating system, and error messages

---

Happy Collaborating! 🎨✨

Built with ❤️ for seamless real-time collaboration