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
- Sponsor
- 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)
If you find QuickMeet helpful and would like to support its continued development, consider sponsoring!
Your support helps cover hosting costs, development time, and enables new features. Every contribution is greatly appreciated! ☕✨
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
