A Next-Generation, Enterprise-Grade Real-Time Video Conferencing Application built on the PERN Stack (PostgreSQL, Express, React, Node.js) with Peer-to-Peer WebRTC, Socket.io, OpenRouter AI, and Cloudinary Media Management.
Live Frontend (Vercel) • Live Backend (Render) • Report Bug • Request Feature
- ✨ Key Features
- 🏗️ System Architecture
- 🛠️ Tech Stack
- 🚀 Quick Start & Installation
- 🔐 Environment Variables Configuration
- 🌐 Deployment Guide
- 📁 Project Folder Structure
- 🤝 Contributing
- 📄 License
- HD WebRTC Peer-to-Peer Video: Crystal clear video and spatial audio streams using Google STUN & TURN signaling.
- Screen Sharing: High-framerate desktop, window, and tab sharing with audio forwarding.
- Virtual Backgrounds: Real-time canvas segmentation offering Blur, Minimalist Studio, Modern Office, and Custom Image Background uploads.
- In-Meeting Local Recording: Capture full meeting audio & video directly in-browser with
.webmexport. - Live Closed Captions (CC): Real-time speech-to-text live subtitles displayed dynamically during calls.
- 🧠 Live In-Meeting AI Co-Pilot: An interactive context-aware assistant answering queries, brainstorming ideas, and looking up data during live discussions.
- 🌐 Real-Time Chat Multi-Language Translation: Instant one-click message translation across Sinhala, English, Tamil, Japanese, Spanish, Hindi, and German.
- 📝 Automated Meeting Summaries & Action Items: Generate comprehensive executive summaries, key takeaways, decisions, and assigned action item lists from transcripts and chat logs.
- Real-Time Collaborative Whiteboard: Multi-user interactive drawing canvas with brush size presets, multi-color palette, highlighter, eraser, and PNG export.
- Live Shared Meeting Notes: Real-time synced markdown notepad with collaborative auto-save and
.txtfile export. - Floating Emoji Reactions: Live flying emoji bursts (❤️, 👍, 👏, 🎉, 🚀, 🔥) with participant attribution.
- Raise Hand Queue: Non-disruptive speaking request indicator for organized seminars and lectures.
- Permanent Cloud File Sharing: Drag-and-drop file sharing in chat backed by Cloudinary cloud storage.
- Waiting Lobby (Doorbell System): Guests wait in a secure lobby until the host explicitly admits or denies entry.
- One-Click Room Lock: Prevent any new participants from entering confidential sessions.
- Mute All / Mute Individual: Host authority to mute noisy microphones instantly.
- Kick Participant: Remove disruptive users from the active session.
- Instant Email Invitations: Send styled meeting invitation emails with meeting links via Nodemailer SMTP.
- Profile Photo Uploads: Custom profile avatars stored securely on Cloudinary.
- Chat Attachments: Permanent image and document attachments accessible across devices.
- Custom Virtual Backgrounds: Upload and apply personalized backdrop imagery.
- Crafted for mobile devices (iPhone SE, Pro Max, iPads, Android) with sliding touch drawers, swipeable horizontal meeting toolbars, and dynamic touch-friendly canvases.
┌───────────────────────────────────┐
│ Client Applications │
│ (Desktop, Tablet, Mobile Web) │
└─────────────────┬─────────────────┘
│
┌────────────────────────┼────────────────────────┐
│ HTTPS (REST API) │ WSS (WebSockets) │ WebRTC P2P
▼ ▼ ▼
┌──────────────────────────┐ ┌───────────────────┐ ┌──────────────────────┐
│ Express.js API │ │ Socket.io Server │ │ Remote Peer Clients │
│ Authentication, CRUD │ │ Signaling & Chat │ │ Direct Audio / Video │
└──────────────┬───────────┘ └─────────┬─────────┘ └──────────────────────┘
│ │
┌─────────────────┼───────────────────────┼─────────────────┐
▼ ▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌───────────────────┐ ┌──────────────┐
│ PostgreSQL │ │ Cloudinary │ │ OpenRouter AI │ │ Nodemailer │
│ Neon (Cloud) │ │ Media Storage│ │ (LLM & Summaries) │ │ (Email SMTP) │
└──────────────┘ └──────────────┘ └───────────────────┘ └──────────────┘
| Domain | Technology | Description |
|---|---|---|
| Frontend | React 19, Vite 8, Tailwind CSS v4 | Ultra-fast SPA with modern glassmorphism aesthetics |
| Icons & UI | Lucide React, React Hot Toast, Canvas API | Smooth micro-animations and intuitive responsive UX |
| Real-Time | WebRTC, Socket.io-client | Low-latency P2P mesh video calling and signaling |
| Backend | Node.js, Express.js | High-performance RESTful API and WebSocket gateway |
| Database | PostgreSQL (Neon Serverless) | Relational database with connection pooling |
| AI Engine | OpenRouter API (google/gemini-2.0-flash) |
Fast intelligent meeting assistants and translation |
| Media Cloud | Cloudinary SDK v2, Multer | Cloud storage for user avatars, files, and backgrounds |
| Nodemailer (Gmail SMTP) | Instant styled meeting invitation delivery | |
| Hosting | Vercel (Frontend), Render (Backend) | 24/7 Global serverless & persistent cloud infrastructure |
- Node.js v18.0.0 or higher
- npm or yarn
- PostgreSQL database instance (or a free Neon connection string)
- Free Cloudinary Account
- OpenRouter API Key
git clone https://github.com/melan-Akash/Meetup_FullStackVideoMeetingApp_PERN-Stack.git
cd Meetup_FullStackVideoMeetingApp_PERN-Stack# Navigate to backend directory
cd server
# Install dependencies
npm install
# Create environment configuration file
cp .env.example .envFill in the .env configuration (see Environment Variables).
# Start backend server in development mode
npm run devBackend will start on http://localhost:5000.
# Open a new terminal and navigate to client
cd ../client
# Install dependencies
npm install
# Create frontend environment configuration
cp .env.example .envEnsure VITE_API_URL and VITE_SOCKET_URL point to http://localhost:5000 for local development.
# Start frontend development server
npm run devFrontend will be accessible at http://localhost:5173.
PORT=5000
DATABASE_URL=postgresql://<user>:<password>@<host>/<database>?sslmode=require
JWT_SECRET=your_super_secret_jwt_key_here
CLIENT_URL=http://localhost:5173
# Email SMTP Setup
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_gmail_app_password
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
# AI Assistant & Summaries
OPENROUTER_KEY=sk-or-v1-your-openrouter-api-key
# Cloudinary Storage
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret# For Local Development:
VITE_API_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000
# For Production Deployment:
# VITE_API_URL=https://meetup-backend-gbhg.onrender.com/api
# VITE_SOCKET_URL=https://meetup-backend-gbhg.onrender.comDeploy Backend on Render
- Create a new Web Service on Render and connect this repository.
- Configure settings:
- Root Directory:
server - Build Command:
npm install - Start Command:
npm start - Instance Type:
Free
- Root Directory:
- Add the environment variables from
server/.envunder Environment. - Set
CLIENT_URLto your Vercel frontend URL (e.g.https://meetup-ten-lemon.vercel.app). - Click Deploy Web Service.
Deploy Frontend on Vercel
- Import this repository into Vercel.
- Configure settings:
- Root Directory:
client - Framework Preset:
Vite
- Root Directory:
- Under Environment Variables, add:
VITE_API_URL=https://your-backend.onrender.com/apiVITE_SOCKET_URL=https://your-backend.onrender.com
- Click Deploy.
meetup/
├── client/ # Frontend Application (React 19 + Vite)
│ ├── public/ # Static Assets (Logos, Icons, Audio)
│ ├── src/
│ │ ├── components/
│ │ │ ├── meeting/ # VideoGrid, ControlBar, ChatPanel, Whiteboard, etc.
│ │ │ ├── profile/ # User Profile Modal, Avatar Uploader
│ │ │ └── navbar.jsx # Navigation Bar with Mobile Drawer
│ │ ├── config/ # Axios API & Socket.io Instances
│ │ ├── context/ # Authentication & State Context
│ │ ├── hooks/ # useWebRTC, useChat, useRecording, useAudioLevel
│ │ ├── pages/ # Dashboard, MeetingRoom, Login, Sessions, Pricing
│ │ ├── App.jsx # Main Router & Providers
│ │ └── main.jsx # React DOM Entrypoint
│ ├── vercel.json # Vercel SPA Client Rewrites
│ └── package.json
│
├── server/ # Backend Application (Node.js + Express + Socket.io)
│ ├── config/ # PostgreSQL (Neon) & Cloudinary SDK Setup
│ ├── controllers/ # Auth, Meeting, AI, Email, Upload Controllers
│ ├── routes/ # Express API Endpoint Routes
│ ├── services/ # AI Service (OpenRouter) & Email Service (Nodemailer)
│ ├── socket/ # WebRTC Signaling & Room Socket Handlers
│ ├── db/schema.sql # PostgreSQL Table Schemas & Indices
│ ├── server.js # Main HTTP & Socket.io Server Entrypoint
│ └── package.json
│
└── README.md # Project Documentation
Contributions, issues, and feature requests are welcome!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Developed with ❤️ by Melan Akash
⭐ Star this repository if you find it helpful!