A professional, full-stack MERN platform for real-time collaboration. Features include multi-user video conferencing (WebRTC), screen sharing, a synchronized whiteboard, instantaneous chat, and secure file sharing.
🚀 Live Frontend: https://collab-tool-self.vercel.app
backend: https://collab-tool-backend-9psv.onrender.com/
| Layer | Technology |
|---|---|
| Frontend | React 19 + Vite + TailwindCSS |
| Backend | Node.js + Express.js |
| Database | MongoDB Atlas |
| Real-Time | Socket.io (Data Sync & Notifications) |
| Video/Audio | WebRTC (Signaling via Socket.io) |
| Auth | JWT (Stateless Authentication) |
| Deployment | Vercel (Frontend) & Render (Backend) |
- 🌐 Multi-user Video Calling: High-quality P2P video/audio conferencing using WebRTC.
- 🖥️ Screen Sharing: Integrated one-click screen sharing for presentations.
- 🎨 Collaborative Whiteboard: Real-time synchronized drawing board with persistent state.
- 💬 Instant Chat: Global and room-based chat with typing indicators.
- 📂 File Management: Securely upload, download, and manage files within meeting rooms.
- 🔔 Smart Notifications: Real-time toast notifications for user actions.
- 🔐 Secure Auth: Robust JWT-based registration and login system.
npm run install:allCreate a .env file in the backend directory following the architecture:
PORT=5000
MONGO_URI=your_mongodb_uri
JWT_SECRET=your_secret
CLIENT_URL=http://localhost:5173# Start Backend & Frontend
npm run dev:backend
npm run dev:frontend├── backend/ # Express server, Socket.io, & MongoDB Models
├── frontend/ # React SPA with Vite & Tailwind
│ └── src/
│ ├── api/ # Axios configuration for production endpoints
│ ├── context/ # Global State (Auth & Sockets)
│ └── components/ # Reusable UI Modules
└── vercel.json # SPA routing configuration
Developed with ❤️ by owsam22.
Repository: https://github.com/owsam22/collab-tool
This project was built as part of a mission to create seamless, high-performance collaboration tools for modern teams.