A fully-featured, responsive video conferencing platform similar to Zoom/Google Meet, built from scratch using modern web technologies with WebRTC peer-to-peer connections.
- Features
- Tech Stack
- System Architecture
- Project Structure
- Getting Started
- Environment Variables
- API Reference
- Application Flow
- License
| Feature | Description |
|---|---|
| Real-time Video Calls | High-quality peer-to-peer video using WebRTC with multiple STUN servers |
| Screen Sharing | Share entire screen or specific windows with other participants |
| Audio/Video Controls | Toggle camera and microphone on/off during calls with instant sync |
| Speaker Toggle | Mute/unmute all incoming audio from remote participants |
| Pre-Call Setup | Preview video, configure display name and AV settings before joining |
| Auto Aspect Ratio | Video preview automatically adjusts to match webcam's native aspect ratio |
| Feature | Description |
|---|---|
| Settings Panel | Floating settings panel accessible via gear icon in the control bar |
| Camera Selection | Switch between available cameras during a call |
| Microphone Selection | Switch between available microphones during a call |
| Echo Cancellation | Toggle browser-level echo cancellation for cleaner audio |
| Auto Gain Control | Automatically adjusts microphone input volume |
| Noise Suppression | Filter out background noise from audio input |
| Responsive Settings UI | Settings panel adapts seamlessly to mobile and desktop screens |
| Feature | Description |
|---|---|
| Fully Responsive Design | Adaptive layouts for desktop, tablet, and mobile devices |
| Dark/Light Theme | Toggle themes with persistent localStorage preferences |
| User Authentication | Secure token-based login and registration with bcrypt hashing |
| Guest Access | Join meetings without creating an account |
| Custom Display Names | Set your name for each meeting session |
| Meeting Code Copy | One-click copy meeting code with toast notification |
| Feature | Description |
|---|---|
| Host Identification | Visual indicators for meeting host |
| Participant Panel | View all attendees with their audio/video status |
| Real-time Chat | In-meeting text messaging with floating panel design |
| Adaptive Grid Layout | Smart grid that adjusts based on participant count (1-8+) |
| Screen Share Priority | Screen shares get prominent display positioning |
| Overflow Indicator | Shows "+N more" when participants exceed grid capacity |
| Feature | Description |
|---|---|
| Meeting History Page | View all past meetings with date, time, and status |
| Active Room Detection | Real-time status showing if a room is "Active" or "Room Closed" |
| Rejoin Meetings | Quick rejoin button for active meetings |
| Delete from History | Remove individual meetings from history |
| Auto-Cleanup | Server automatically deletes meetings older than 30 days |
| Duplicate Prevention | Rejoining same room updates timestamp instead of creating duplicates |
| Guest Restriction | Meeting history only available for registered users |
| Feature | Description |
|---|---|
| Peer-to-Peer Encryption | Secure WebRTC connections via STUN servers |
| Token Authentication | Crypto-generated session tokens |
| Password Hashing | bcrypt with salt rounds for secure storage |
| Back Navigation Block | Prevents accidental meeting exits via browser back button |
| Connection Recovery | Handles peer disconnections gracefully |
| Technology | Version | Purpose |
|---|---|---|
| React | 19.2.3 | UI Framework with Hooks |
| React Router DOM | 7.11.0 | Client-side Routing & Navigation |
| Tailwind CSS | 3.3.6 | Utility-first CSS Styling |
| Lucide React | 0.562.0 | Modern SVG Icon Library |
| Socket.io Client | 4.8.1 | Real-time WebSocket Communication |
| Axios | 1.13.2 | HTTP Client for API Calls |
| Vite | 7.3.0 | Next-gen Build Tool & Dev Server |
| TypeScript | 5.9.3 | Type Checking (Config only) |
| Technology | Version | Purpose |
|---|---|---|
| Node.js | 24.x | JavaScript Runtime |
| Express.js | 5.2.1 | Web Application Framework |
| Socket.io | 4.8.1 | WebSocket Server for Signaling |
| MongoDB | Cloud | NoSQL Database |
| Mongoose | 9.0.2 | MongoDB ODM |
| bcrypt | 6.0.0 | Password Hashing |
| crypto | Built-in | Token Generation |
| CORS | 2.8.5 | Cross-Origin Resource Sharing |
| Component | Purpose |
|---|---|
| RTCPeerConnection | Peer-to-peer media connections |
| MediaStream API | Camera, microphone, and screen capture |
| STUN Servers | NAT traversal for peer discovery |
| ICE Candidates | Connection establishment |
┌─────────────────────────────────────────────────────────────────────────────────────────────────┐
│ CLIENT (React 19 + Vite 7) │
├─────────────────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌───────────┐ │
│ │ Landing │ │ Login │ │ Signup │ │ Meeting │ │ Meeting │ │ PreCall │ │
│ │ Page │ │ Page │ │ Page │ │ Entry │ │ History │ │ Page │ │
│ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ └─────┬─────┘ │
│ │ │ │ │ │ │ │
│ └───────────────┴───────────────┴───────┬───────┴───────────────┴──────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────────────────────────┐ │
│ │ VIDEO CALL PAGE (Main Interface) │ │
│ │ ┌────────────────────┐ ┌────────────────────┐ ┌────────────────────┐ ┌───────────────┐ │ │
│ │ │ Video Grid │ │ Control Bar │ │ Settings Panel │ │ Chat Panel │ │ │
│ │ │ - Local video │ │ - Mic toggle │ │ - Camera select │ │ - Messages │ │ │
│ │ │ - Remote videos │ │ - Video toggle │ │ - Mic select │ │ - Real-time │ │ │
│ │ │ - Screen shares │ │ - Speaker toggle │ │ - Echo cancel │ │ - Floating │ │ │
│ │ │ - Adaptive grid │ │ - Screen share │ │ - Auto gain │ └───────────────┘ │ │
│ │ │ - Overflow (+N) │ │ - Chat button │ │ - Noise suppress │ ┌───────────────┐ │ │
│ │ └────────────────────┘ │ - Settings button │ └────────────────────┘ │ Participants │ │ │
│ │ │ - End call │ │ Panel │ │ │
│ │ └────────────────────┘ └───────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────────────────────┐ │
│ │ CONTEXT PROVIDERS (Global State) │ │
│ │ ┌─────────────────────────────────────┐ ┌────────────────────────────────────────────┐ │ │
│ │ │ AuthContext │ │ ThemeContext │ │ │
│ │ │ • userData (name, email, token) │ │ • isDarkMode state │ │ │
│ │ │ • login() / signup() / logout() │ │ • toggleTheme() │ │ │
│ │ │ • loginAsGuest() │ │ • localStorage persistence │ │ │
│ │ │ • Token validation │ │ • System preference detection │ │ │
│ │ └─────────────────────────────────────┘ └────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────────────────────┐ │
│ │ REUSABLE COMPONENTS │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────────┐ ┌───────────────┐ ┌───────────────────────┐ │ │
│ │ │ Button │ │ Input │ │ ChatPanel │ │ LoadingSpinner│ │ DarkModeToggle │ │ │
│ │ └──────────┘ └──────────┘ └──────────────┘ └───────────────┘ └───────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────┬────────────────────────────────┬───────────────────────────┘
│ │
┌────────────────┴────────────────┐ ┌────────────┴────────────────┐
│ Socket.io Client │ │ Axios HTTP Client │
│ (Real-time Events) │ │ (REST API Calls) │
└────────────────┬────────────────┘ └────────────┬────────────────┘
│ │
═══════════════════════════════════════════════════════════════════════════════════════════════════
│ NETWORK │
═══════════════════════════════════════════════════════════════════════════════════════════════════
│ │
┌────────────────┴────────────────┐ ┌────────────┴────────────────┐
│ Socket.io Server │ │ Express Router │
│ (WebSocket Handler) │ │ (HTTP Endpoints) │
└────────────────┬────────────────┘ └────────────┬────────────────┘
│ │
┌────────────────────────────────────┴────────────────────────────────┴───────────────────────────┐
│ SERVER (Node.js 24 + Express 5) │
├─────────────────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────────────────────────────────┐ │
│ │ SOCKET MANAGER (socketManager.js) │ │
│ │ │ │
│ │ EVENTS RECEIVED EVENTS EMITTED │ │
│ │ ┌─────────────────────────┐ ┌─────────────────────────────────────────┐ │ │
│ │ │ • join-call │ │ • user-joined (broadcast to room) │ │ │
│ │ │ • signal (WebRTC SDP) │ │ • user-left (broadcast to room) │ │ │
│ │ │ • chat-message │ │ • signal (forward to peer) │ │ │
│ │ │ • update-media-state │ │ • chat-message (broadcast) │ │ │
│ │ │ • screen-share-toggle │ │ • user-media-state-changed │ │ │
│ │ │ • disconnect │ │ • user-started-screen-share │ │ │
│ │ └─────────────────────────┘ │ • user-stopped-screen-share │ │ │
│ │ └─────────────────────────────────────────┘ │ │
│ │ ROOM MANAGEMENT │ │
│ │ ┌─────────────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ • socketToRoom{} - Maps socket ID to room URL │ │ │
│ │ │ • rooms{} - Tracks clients in each room (socketId, userName, userRole, A/V) │ │ │
│ │ │ • getActiveRooms() - Returns list of rooms with active participants │ │ │
│ │ │ • Room cleanup after 1 hour of inactivity │ │ │
│ │ └─────────────────────────────────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────────────────────┐ │
│ │ USER CONTROLLER (userController.js) │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ POST /v1/users/signup │ Register user (bcrypt hash, crypto token) │ │ │
│ │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │
│ │ │ POST /v1/users/login │ Authenticate user, return token + user data │ │ │
│ │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │
│ │ │ GET /v1/users/history │ Get meetings with active room status │ │ │
│ │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │
│ │ │ POST /v1/users/history │ Add/Update meeting (upsert - no duplicates) │ │ │
│ │ ├─────────────────────────────────────────────────────────────────────────────────┤ │ │
│ │ │ DELETE /v1/users/history │ Remove meeting from user's history │ │ │
│ │ └─────────────────────────────────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────────────────────┐ │
│ │ BACKGROUND JOBS (app.js) │ │
│ │ ┌───────────────────────────────────┐ ┌─────────────────────────────────────────────┐ │ │
│ │ │ Meeting Cleanup (Every 6 hours) │ │ Room Cleanup (On disconnect) │ │ │
│ │ │ Delete meetings > 30 days old │ │ Remove empty rooms after timeout │ │ │
│ │ └───────────────────────────────────┘ └─────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────┬────────────────────────────────────────────┘
│
│ Mongoose ODM
▼
┌─────────────────────────────────────────────┐
│ MongoDB Atlas │
│ ┌─────────────────────────────────────┐ │
│ │ Users Collection │ │
│ │ • _id: ObjectId │ │
│ │ • name: String │ │
│ │ • email: String (unique) │ │
│ │ • password: String (bcrypt) │ │
│ │ • token: String (crypto) │ │
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ Meetings Collection │ │
│ │ • _id: ObjectId │ │
│ │ • user_id: String (email) │ │
│ │ • meetingCode: String │ │
│ │ • date: Date (auto-updated) │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
quickmeet/
├── frontend/ # React Frontend Application
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── components/ # Reusable UI Components
│ │ │ ├── Button.jsx # Custom button with variants
│ │ │ ├── ChatPanel.jsx # Floating chat interface
│ │ │ ├── DarkModeToggle.jsx # Theme switch component
│ │ │ ├── Input.jsx # Styled input fields
│ │ │ └── LoadingSpinner.jsx # Loading indicator
│ │ │
│ │ ├── context/ # React Context Providers
│ │ │ ├── AuthContext.jsx # Authentication state & methods
│ │ │ └── ThemeContext.jsx # Dark/Light theme management
│ │ │
│ │ ├── pages/ # Application Pages
│ │ │ ├── LandingPage.jsx # Home page with guest join
│ │ │ ├── LoginPage.jsx # User login form
│ │ │ ├── SignupPage.jsx # User registration form
│ │ │ ├── MeetingEntryPage.jsx # Create/Join meeting interface
│ │ │ ├── MeetingHistoryPage.jsx # Past meetings with rejoin/delete
│ │ │ ├── PreCallPage.jsx # Pre-call setup & preview
│ │ │ └── VideoCallPage.jsx # Main video call interface (1000+ lines)
│ │ │
│ │ ├── App.jsx # Root component with routing
│ │ ├── main.jsx # Application entry point
│ │ └── index.css # Global styles & Tailwind imports
│ │
│ ├── .env # Environment variables
│ ├── index.html # HTML template
│ ├── package.json # Frontend dependencies
│ ├── tailwind.config.js # Tailwind CSS configuration
│ ├── vite.config.ts # Vite build configuration
│ └── vercel.json # Vercel deployment config (SPA rewrites)
│
├── backend/ # Node.js Backend Server
│ ├── src/
│ │ ├── controllers/
│ │ │ ├── socketManager.js # Socket.io event handlers
│ │ │ └── userController.js # Auth & user API handlers
│ │ │
│ │ ├── models/
│ │ │ ├── userModel.js # User mongoose schema
│ │ │ └── meetingModel.js # Meeting mongoose schema
│ │ │
│ │ ├── routes/
│ │ │ └── users.routes.js # User API routes
│ │ │
│ │ └── app.js # Express server entry point
│ │
│ ├── .env # Environment variables
│ └── package.json # Backend dependencies
│
├── .gitignore # Git ignore rules
├── LICENSE # MIT License
└── README.md # Project documentation
- Node.js 18+ (recommended: 24.x)
- MongoDB Atlas account or local MongoDB instance
- npm package manager
-
Clone the repository
git clone https://github.com/arkaghosh2005/QuickMeet.git cd quickmeet -
Install Backend Dependencies
cd backend npm install -
Install Frontend Dependencies
cd ../frontend npm install -
Configure Environment Variables (see Environment Variables)
-
Start the Backend Server on Terminal 1
cd backend node '.\src\app.js'
-
Start the Frontend Development Website on Terminal 2
cd frontend npm run dev -
Open your browser and navigate to
http://localhost:5173
# Server Configuration
PORT=8000
NODE_ENV=development
# MongoDB Connection
MONGO_URL=mongodb+srv://<username>:<password>@cluster.mongodb.net/quickmeet
# CORS - Allowed Origins
CLIENT_URL=http://localhost:5173# Backend Server URL
VITE_SERVER_URL=http://localhost:8000
# STUN Servers for WebRTC (NAT Traversal)
VITE_STUN_URL_1=stun:stun.l.google.com:19302
VITE_STUN_URL_2=stun:stun1.l.google.com:19302
VITE_STUN_URL_3=stun:stun2.l.google.com:19302
VITE_STUN_URL_4=stun:stun3.l.google.com:19302
VITE_STUN_URL_5=stun:stun4.l.google.com:19302Register a new user account.
Request Body:
{
"name": "John Doe",
"email": "john@example.com",
"password": "securepassword"
}Response: 201 Created
{
"message": "User has been Registered. Please Login."
}Authenticate an existing user.
Request Body:
{
"email": "john@example.com",
"password": "securepassword"
}Response: 200 OK
{
"token": "abc123xyz...",
"user": {
"name": "John Doe",
"email": "john@example.com"
}
}Get user's meeting history with active room status.
Response: 200 OK
[
{
"_id": "64abc123...",
"user_id": "john@example.com",
"meetingCode": "ABC-1234-XYZ",
"date": "2025-12-30T10:00:00.000Z"
}
]Add a meeting to user's history (updates timestamp if meeting already exists).
Request Body:
{
"token": "abc123xyz...",
"meeting_code": "ABC-1234-XYZ"
}Response: 201 Created
{
"message": "Meeting added to history"
}Delete a specific meeting from user's history.
Request Body:
{
"token": "abc123xyz...",
"meeting_id": "64abc123..."
}Response: 200 OK
{
"message": "Meeting deleted from history"
}Landing Page (Guest Join / Login / Signup)
│
▼
Login / Signup
│
▼
Meeting Entry Page ◄────────────┐
(Create or Join Meeting) │
│ │
├────────────────────────┤
│ │
▼ │
Pre-Call Page Meeting History Page
(Preview & Settings) (View/Rejoin/Delete)
│
▼
Video Call Page
(Full Meeting Experience)
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ using React, Node.js and WebRTC by Arka Ghosh