A full-stack real-time video conferencing web app built with React, Node.js, Socket.IO and WebRTC. Create instant meetings, invite anyone with a link, and collaborate with video, audio, chat, screen sharing and reactions — all in the browser.
- Video & Audio Calls — Multi-user real-time video calls using WebRTC peer-to-peer mesh networking (up to 6 participants)
- Perfect Negotiation — Collision-safe WebRTC signaling following the W3C Perfect Negotiation pattern
- Screen Sharing — Share your screen with a single click, switch back to camera seamlessly
- In-Meeting Chat — Public group chat with message history replay for late joiners
- Private DMs — Send direct messages to individual participants mid-call
- Emoji Reactions — Floating emoji reactions visible to all participants
- Raise Hand — Signal the host without interrupting
- Cam / Mic Controls — Toggle camera and microphone independently, with live status shown to peers
- Dark / Light Mode — Persistent theme toggle
- Authentication
- Email & password (bcrypt hashed)
- Google OAuth 2.0
- Fingerprint-based guest access (1 free meeting)
- Meeting History — Browse and rejoin past meetings (90-day TTL)
- Duplicate Join Prevention — Same account can't join the same meeting twice
- Host Controls — Host can end the meeting for all participants
- Responsive UI — Works on desktop and mobile browsers
| Technology | Purpose |
|---|---|
| React 18 | UI framework |
| React Router v6 | Client-side routing |
| Socket.IO Client | Real-time signaling |
| WebRTC (native) | Peer-to-peer video/audio |
| Material UI v5 | Component library |
| Axios | HTTP client |
| Technology | Purpose |
|---|---|
| Node.js (ESM) | Runtime |
| Express 5 | HTTP server |
| Socket.IO 4 | WebSocket signaling server |
| Mongoose 9 | MongoDB ODM |
| JWT | Authentication tokens |
| bcrypt | Password hashing |
| Helmet | Security headers |
| express-rate-limit | Brute force protection |
| Google Auth Library | OAuth token verification |
| Technology | Purpose |
|---|---|
| MongoDB Atlas | Users, rooms, meeting history |
┌─────────────────────────────────────────────────────┐
│ Frontend (React) │
│ Landing → Auth → Home → VideoMeet → History │
│ AuthContext · ThemeContext · environment.js │
└──────────────────┬──────────────────────────────────┘
│ REST (Axios) + WebSocket (Socket.IO)
┌──────────────────▼──────────────────────────────────┐
│ Backend (Express + Socket.IO) │
│ /api/v1/users · /api/v1/rooms │
│ user.controller · room.controller · socketManager │
│ JWT middleware · rate limiting · Helmet │
└──────────────────┬──────────────────────────────────┘
│ Mongoose
┌──────────────────▼──────────────────────────────────┐
│ MongoDB Atlas │
│ Users · Rooms (24h TTL) · Meetings (90d TTL) │
└─────────────────────────────────────────────────────┘
WebRTC: Direct P2P between browsers (STUN: Google public servers)
- Node.js 18+
- MongoDB Atlas account (or local MongoDB)
- Google Cloud project with OAuth 2.0 credentials (optional)
git clone https://github.com/your-username/MeetOn.git
cd MeetOncd backend
npm install
cp .env.example .env
# Fill in your values in .env
npm run devbackend/.env
MONGO_URI=your_mongodb_atlas_uri
JWT_SECRET=your_long_random_secret
JWT_EXPIRES_IN=7d
PORT=8000
ALLOWED_ORIGIN=http://localhost:3000
GOOGLE_CLIENT_ID=your_google_client_id # optionalcd frontend
npm install
cp .env.example .env
npm startfrontend/.env
REACT_APP_SERVER_URL=http://localhost:8000
REACT_APP_GOOGLE_CLIENT_ID=your_google_client_id # optionalVisit http://localhost:3000
- New Project → Deploy from GitHub → set root to
backend/ - Add all env vars from
backend/.env.example - Settings → Networking → Generate Domain
- New Project → Import repo → set root to
frontend/ - Framework: Create React App
- Add env vars:
REACT_APP_SERVER_URL=https://your-backend.railway.app REACT_APP_GOOGLE_CLIENT_ID=your_google_client_id
- Update
ALLOWED_ORIGINon Railway to your Vercel URL - Add your Vercel URL to Google OAuth authorized origins
- MongoDB Atlas → Network Access → allow
0.0.0.0/0
MeetOn/
├── backend/
│ ├── src/
│ │ ├── controllers/
│ │ │ ├── user.controller.js
│ │ │ ├── room.controller.js
│ │ │ └── socketManager.js
│ │ ├── middleware/
│ │ │ └── auth.js
│ │ ├── models/
│ │ │ ├── user.model.js
│ │ │ ├── room.model.js
│ │ │ └── meeting.model.js
│ │ ├── routes/
│ │ │ ├── users.routes.js
│ │ │ └── rooms.routes.js
│ │ └── app.js
│ ├── .env.example
│ └── package.json
│
└── frontend/
├── src/
│ ├── contexts/
│ │ ├── AuthContext.jsx
│ │ └── ThemeContext.jsx
│ ├── pages/
│ │ ├── VideoMeet.jsx
│ │ ├── home.jsx
│ │ ├── authentication.jsx
│ │ ├── history.jsx
│ │ └── landing.jsx
│ ├── utils/
│ │ └── environment.js
│ └── App.js
├── .env.example
└── package.json
- JWT verified at both HTTP and Socket.IO handshake layers
- Anti-enumeration: identical error for wrong username or wrong password
requireFullAccountmiddleware blocks guests from protected routes- Rate limiting on all auth, guest, and profile endpoints
- Helmet security headers (COEP disabled for WebRTC compatibility)
- bcrypt password hashing (10 rounds)
- NoSQL injection protection via mongo-sanitize
- Duplicate session prevention — same account can't join the same room twice
- No TURN server — calls may fail between users on strict symmetric NAT (corporate/mobile networks). Planned for a future release.
- In-memory socket state — room state resets on server restart. Redis pub/sub needed for horizontal scaling.
- Mesh WebRTC — capped at 6 participants. SFU architecture (e.g. mediasoup) needed for larger calls.
Rashi-AI7