{"id":31730374,"url":"https://github.com/megatron-xcoder/simple-collaborative-whiteboard","last_synced_at":"2025-10-09T07:28:01.182Z","repository":{"id":315436166,"uuid":"1059476773","full_name":"Megatron-XCoder/simple-collaborative-whiteboard","owner":"Megatron-XCoder","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-18T14:38:00.000Z","size":179,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-18T17:01:42.239Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://simple-collaborative-whiteboard.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Megatron-XCoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-18T13:51:32.000Z","updated_at":"2025-09-18T14:38:04.000Z","dependencies_parsed_at":"2025-09-18T21:46:48.195Z","dependency_job_id":null,"html_url":"https://github.com/Megatron-XCoder/simple-collaborative-whiteboard","commit_stats":null,"previous_names":["megatron-xcoder/simple-collaborative-whiteboard"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Megatron-XCoder/simple-collaborative-whiteboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Megatron-XCoder%2Fsimple-collaborative-whiteboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Megatron-XCoder%2Fsimple-collaborative-whiteboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Megatron-XCoder%2Fsimple-collaborative-whiteboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Megatron-XCoder%2Fsimple-collaborative-whiteboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Megatron-XCoder","download_url":"https://codeload.github.com/Megatron-XCoder/simple-collaborative-whiteboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Megatron-XCoder%2Fsimple-collaborative-whiteboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000960,"owners_count":26082973,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-09T07:27:55.625Z","updated_at":"2025-10-09T07:28:01.175Z","avatar_url":"https://github.com/Megatron-XCoder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Collaborative Whiteboard Application\n\nA real-time collaborative whiteboard application built with the MERN stack (MongoDB, Express.js, React.js, Node.js) and Socket.io for live collaboration.\n\n## Features\n\n- **Real-time Collaboration**: Up to 4 users can draw simultaneously with live synchronization\n- **Room-based System**: Join rooms using simple 6-8 character codes\n- **Drawing Tools**: Pencil tool with adjustable stroke width and 4 color options\n- **Live Cursor Tracking**: See other users' cursor positions with unique colors for each user\n- **User Presence**: Display number of active users in each room (max 4)\n- **Drawing Persistence**: All drawings are saved to MongoDB and restored when joining rooms\n- **Professional UI**: Modern glassmorphism design with responsive layout\n- **Cross-platform**: Works seamlessly on desktop, tablet, and mobile devices\n\n## Technology Stack\n\n- **Frontend**: React.js with modern CSS styling\n- **Backend**: Node.js with Express.js\n- **Database**: MongoDB with Mongoose\n- **Real-time Communication**: Socket.io\n- **Styling**: CSS with glassmorphism effects and responsive design\n\n## Project Structure\n\n\\`\\`\\`\ncollaborative-whiteboard/\n├── client/                 # React frontend\n│   ├── src/\n│   │   ├── components/\n│   │   │   ├── RoomJoin.js\n│   │   │   ├── Whiteboard.js\n│   │   │   ├── DrawingCanvas.js\n│   │   │   ├── Toolbar.js\n│   │   └── UserCursors.js\n│   │   ├── App.js\n│   │   ├── index.js\n│   │   └── index.css\n│   ├── public/\n│   └── package.json\n├── server/                 # Node.js backend\n│   ├── models/\n│   │   └── Room.js\n│   ├── routes/\n│   │   └── rooms.js\n│   ├── socket/\n│   │   └── socketHandler.js\n│   ├── .env\n│   ├── server.js\n│   └── package.json\n├── README.md\n└── package.json\n\\`\\`\\`\n\n## Setup Instructions\n\n### Prerequisites\n\n- Node.js (v14 or higher)\n- MongoDB (local installation or MongoDB Atlas)\n- npm or yarn\n\n### Installation\n\n1. **Clone the repository**\n   \\`\\`\\`bash\n   git clone \u003crepository-url\u003e\n   cd collaborative-whiteboard\n   \\`\\`\\`\n\n2. **Install dependencies for both client and server**\n   \\`\\`\\`bash\n   # Install server dependencies\n   cd server \u0026\u0026 npm install\n   \n   # Install client dependencies\n   cd ../client \u0026\u0026 npm install\n   \\`\\`\\`\n\n3. **Set up environment variables**\n   \n   Create a `.env` file in the `server` directory:\n   \\`\\`\\`env\n   MONGODB_URI=mongodb://localhost:27017/whiteboard\n   PORT=5000\n   \\`\\`\\`\n\n4. **Start MongoDB**\n   \n   Make sure MongoDB is running on your system:\n   \\`\\`\\`bash\n   # For local MongoDB installation\n   mongod\n   \n   # Or use MongoDB Atlas connection string in .env\n   \\`\\`\\`\n\n5. **Run the application**\n   \\`\\`\\`bash\n   # Start the backend server (from server directory)\n   cd server \u0026\u0026 npm run dev\n   \n   # Start the frontend (from client directory, in a new terminal)\n   cd client \u0026\u0026 npm start\n   \\`\\`\\`\n\n6. **Access the application**\n   \n   Open your browser and navigate to `http://localhost:3000`\n\n## Recent Updates \u0026 Fixes\n\n### Version 2.0 Improvements\n\n- **4-User Room Limit**: Rooms now support exactly 4 concurrent users with proper validation\n- **Unique Cursor Colors**: Each user gets a distinct colored cursor (red, teal, blue, green)\n- **Fixed Clear Functionality**: Clear button now clears all screens in the room for everyone\n- **Improved Leave Room**: Proper cleanup when users leave rooms\n- **Professional UI Redesign**: Modern glassmorphism design with gradients and smooth animations\n- **Enhanced Responsiveness**: Optimized for all screen sizes from mobile to desktop\n- **Better User Experience**: Improved visual feedback and connection status indicators\n\n## API Documentation\n\n### REST Endpoints\n\n#### POST /api/rooms/join\nJoin or create a room (max 4 users).\n\n**Request Body:**\n\\`\\`\\`json\n{\n  \"roomId\": \"ABC123\"\n}\n\\`\\`\\`\n\n**Response:**\n\\`\\`\\`json\n{\n  \"success\": true,\n  \"room\": {\n    \"roomId\": \"ABC123\",\n    \"createdAt\": \"2024-01-01T00:00:00.000Z\",\n    \"drawingData\": []\n  }\n}\n\\`\\`\\`\n\n**Error Response (Room Full):**\n\\`\\`\\`json\n{\n  \"error\": \"Room is full. Maximum 4 users allowed.\"\n}\n\\`\\`\\`\n\n#### GET /api/rooms/:roomId\nGet room information and drawing data.\n\n**Response:**\n\\`\\`\\`json\n{\n  \"roomId\": \"ABC123\",\n  \"createdAt\": \"2024-01-01T00:00:00.000Z\",\n  \"drawingData\": [...]\n}\n\\`\\`\\`\n\n### Socket Events\n\n#### Client to Server Events\n\n- `join-room` - Join a specific room (validates 4-user limit)\n- `leave-room` - Explicitly leave a room\n- `cursor-move` - Send cursor position updates\n- `draw-start` - Start a new drawing stroke\n- `draw-move` - Send drawing path data\n- `draw-end` - Complete a drawing stroke\n- `clear-canvas` - Clear the entire canvas for all users\n\n#### Server to Client Events\n\n- `room-data` - Receive room's drawing data on join\n- `user-count` - Receive updated user count for room\n- `cursor-update` - Receive other users' cursor positions with colors\n- `draw-start` - Other user started drawing\n- `draw-move` - Receive drawing path from other users\n- `draw-end` - Other user completed a stroke\n- `clear-canvas` - Canvas was cleared by another user\n- `error` - Error messages (e.g., room full)\n\n## Architecture Overview\n\n### Frontend Architecture\n\nThe React frontend features a modern, responsive design:\n\n- **App.js**: Main application with socket management and room state\n- **RoomJoin.js**: Elegant room entry interface with glassmorphism design\n- **Whiteboard.js**: Professional whiteboard interface with gradient header\n- **DrawingCanvas.js**: HTML5 Canvas with smooth drawing and real-time sync\n- **Toolbar.js**: Modern toolbar with color selection and stroke controls\n- **UserCursors.js**: Multi-colored cursor display for user awareness\n\n### Backend Architecture\n\nThe Node.js backend provides robust real-time features:\n\n- **Express Server**: RESTful API with room validation\n- **Socket.io Integration**: Real-time communication with room limits\n- **MongoDB Integration**: Persistent storage with drawing command history\n- **User Management**: 4-user limit enforcement and cursor color assignment\n- **Room Cleanup**: Automatic cleanup of inactive rooms\n\n### Data Flow\n\n1. **Room Joining**: User enters code → API validates (max 4 users) → Socket joins with assigned cursor color\n2. **Drawing**: Canvas events → Socket.io → Broadcast to room → MongoDB persistence\n3. **Real-time Sync**: All actions synchronized across connected users instantly\n4. **User Management**: Proper cleanup on disconnect/leave with user count updates\n\n## Deployment Guide\n\n### Production Environment Setup\n\n1. **Environment Variables**\n   \\`\\`\\`env\n   MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/whiteboard\n   PORT=5000\n   NODE_ENV=production\n   \\`\\`\\`\n\n2. **Build the React app**\n   \\`\\`\\`bash\n   cd client\n   npm run build\n   \\`\\`\\`\n\n3. **Deploy to Heroku**\n   \\`\\`\\`bash\n   # Install Heroku CLI and login\n   heroku create your-whiteboard-app\n   heroku config:set MONGODB_URI=your_mongodb_connection_string\n   git push heroku main\n   \\`\\`\\`\n\n4. **Deploy to Vercel/Netlify**\n   - Build the React app and deploy the `client/build` folder\n   - Deploy the server separately to a service like Heroku or Railway\n   - Update the Socket.io connection URL in the React app\n\n### Performance Considerations\n\n- **Room Limits**: Maximum 4 users per room for optimal performance\n- **Cursor Updates**: Throttled to ~60fps to prevent server overload\n- **Drawing Data**: Efficient incremental updates with path compression\n- **Room Cleanup**: Automatic cleanup of inactive rooms after 24 hours\n- **Connection Management**: Proper cleanup with cursor color recycling\n\n## Usage\n\n1. **Creating/Joining Rooms**\n   - Enter a 6-8 character room code or generate one\n   - Rooms support maximum 4 concurrent users\n   - Each user gets a unique colored cursor\n\n2. **Drawing**\n   - Select from 4 professional colors (dark blue, red, blue, green)\n   - Adjust stroke width from 1-20px with live preview\n   - Smooth drawing with touch and mouse support\n\n3. **Collaboration**\n   - See up to 3 other users' cursors in real-time with unique colors\n   - All drawing actions synchronized instantly across users\n   - User count displays active participants (1-4)\n\n4. **Canvas Management**\n   - Clear canvas button removes all drawings for everyone\n   - Drawings persist when users leave and rejoin rooms\n   - Proper leave room functionality with cleanup\n\n## Browser Support\n\n- Chrome/Chromium (recommended)\n- Firefox\n- Safari (desktop and mobile)\n- Edge\n- Mobile browsers with full touch support\n\n## Responsive Design\n\n- **Desktop**: Full toolbar sidebar with optimal drawing space\n- **Tablet**: Horizontal toolbar with touch-optimized controls\n- **Mobile**: Compact horizontal toolbar with swipe navigation\n- **All Sizes**: Fluid layouts with proper scaling and touch targets\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Test on multiple screen sizes and browsers\n4. Ensure 4-user limit and cursor colors work correctly\n5. Submit a pull request\n\n## License\n\nMIT License - see LICENSE file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegatron-xcoder%2Fsimple-collaborative-whiteboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmegatron-xcoder%2Fsimple-collaborative-whiteboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegatron-xcoder%2Fsimple-collaborative-whiteboard/lists"}