MeetFlow

A full-stack real-time video conferencing platform inspired by Google Meet and Zoom, built using the MERN Stack, Socket.IO, and WebRTC.

MeetFlow enables users to create, join, and schedule meetings, communicate through real-time chat, share screens, and collaborate seamlessly through peer-to-peer video conferencing.

---

🌐 Live Demo

🔗 Live Application: https://meetflow-49z7.onrender.com

---

Folder Structure

MeetFlow/
├── .gitignore
├── README.md
├── backend/
│   ├── package-lock.json
│   ├── package.json
│   └── src/
│       ├── config/
│       │   ├── cloudinary.js
│       │   ├── db.js
│       │   └── firebase-admin.js
│       ├── controllers/
│       │   ├── auth.controller.js
│       │   └── meeting.controller.js
│       ├── lib/
│       │   ├── arcjet.js
│       │   ├── env.js
│       │   ├── generateMeetingCode.js
│       │   ├── mailer.js
│       │   └── utils.js
│       ├── middleware/
│       │   ├── arcjet.middleware.js
│       │   └── auth.middleware.js
│       ├── models/
│       │   ├── Meeting.js
│       │   └── User.js
│       ├── routes/
│       │   ├── auth.routes.js
│       │   └── meeting.routes.js
│       ├── server.js
│       └── socket/
│           ├── roomManager.js
│           └── socket.js
└── frontend/
    ├── .gitignore
    ├── README.md
    ├── eslint.config.js
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── src/
    │   ├── App.jsx
    │   ├── assets/
    │   │   ├── MeetFlow Logo.png
    │   │   └── upcomming1.png
    │   ├── components/
    │   │   ├── Navbar.jsx
    │   │   ├── ProtectedRoute.jsx
    │   │   ├── Sidebar.jsx
    │   │   └── dashboard/
    │   │       ├── JoinMeetingModal.jsx
    │   │       ├── ScheduleMeetingModal.jsx
    │   │       └── ShareMeetingModal.jsx
    │   ├── index.css
    │   ├── lib/
    │   │   ├── axios.js
    │   │   ├── firebase.js
    │   │   └── socket.js
    │   ├── main.jsx
    │   ├── pages/
    │   │   ├── DashboardPage.jsx
    │   │   ├── HistoryPage.jsx
    │   │   ├── LoginPage.jsx
    │   │   ├── MeetingRoomPage.jsx
    │   │   ├── PersonalRoomPage.jsx
    │   │   ├── ProfilePage.jsx
    │   │   ├── SignupPage.jsx
    │   │   ├── UpcomingPage.jsx
    │   │   └── VerifyEmailPage.jsx
    │   └── store/
    │       ├── useAuthStore.js
    │       └── useMeetingStore.js
    ├── tailwind.config.js
    └── vite.config.js

✨ Features

🔐 Authentication & Security

• JWT Authentication
• Google Sign-In via Firebase Authentication
• Secure HTTP-only Cookies
• Email Verification
• Protected Routes
• Arcjet Bot Protection & Rate Limiting
• Password Hashing using bcrypt

📅 Meeting Management

• Create Instant Meetings
• Join Meetings via Meeting Code
• Schedule Future Meetings
• Upcoming Meetings Dashboard
• Meeting History Tracking
• Personal Meeting Rooms

⚡ Real-Time Collaboration

• Live Participant Updates
• Real-Time Chat
• Join/Leave Notifications
• Socket.IO Room Management

🎥 Video Conferencing

• Peer-to-Peer Video Calling
• Audio Calling
• Multi-Participant Support
• Camera Toggle
• Microphone Toggle
• Leave Meeting Controls

🖥️ Screen Sharing

• Share Entire Screen
• Share Application Window
• Real-Time Screen Streaming

---

🛠️ Tech Stack

Frontend

• React.js
• Vite
• Tailwind CSS
• Zustand
• Axios
• React Router DOM
• Socket.IO Client
• Firebase Authentication (Google Sign-In)

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• Firebase Admin SDK
• Arcjet
• Socket.IO

Realtime & Communication

• WebRTC
• Socket.IO
• STUN Servers

Deployment

• Render
• MongoDB Atlas
• GitHub

---

High-Level Architecture Overview :

---

Request / Data Flow :

---

Backend Architecture :

---

Frontend Architecture :

---

WebRTC Signaling Flow (via Socket.IO) :

---

Deployment Architecture :

---

Authentication Routes

All endpoints in this section are prefixed with /api/auth.

Method	Endpoint	Middleware	Controller	Description
POST	/login	Arcjet	login	Authenticates a user and sets a JWT cookie.
POST	/signup	Arcjet	signup	Registers a new user and sets a JWT cookie.
POST	/logout	Arcjet	logout	Clears the user's JWT cookie.
POST	/google	Arcjet	google	Verifies a Firebase ID token and sets a JWT cookie.
GET	/me	Arcjet → protectRoute	userProfile	Retrieves the authenticated user's profile details.
PUT	/update-profile	Arcjet → protectRoute	updateProfile	Updates the authenticated user's profile.
GET	/verify-email/:token	Arcjet	verifyEmail	Verifies the user's email address via a token link.
POST	/resend-verification	Arcjet → protectRoute	resendVerificationEmail	Resends the email verification link.

Meeting Routes

All endpoints in this section are prefixed with /api/meetings.

Method	Endpoint	Middleware	Controller	Description
POST	/create	protectRoute	createInstantMeeting	Starts an instant meeting.
POST	/join	protectRoute	joinMeeting	Joins a meeting using a unique meeting code.
POST	/schedule	protectRoute	scheduleMeeting	Schedules a meeting for a future date and time.
GET	/upcoming	protectRoute	getUpcomingMeetings	Lists all scheduled upcoming meetings.
GET	/history	protectRoute	getHistoryMeetings	Lists all past and ended meetings.
PATCH	/:meetingId/end	protectRoute	endMeeting	Ends an active meeting (restricted to the host only).
GET	/personal-room	protectRoute	getPersonalRoom	Retrieves details about the user's personal meeting room.
POST	/personal-room/join	protectRoute	joinPersonalRoom	Joins a personal meeting room.

Socket.IO Event Reference

The real-time events used for managing meeting rooms, chat messages, and WebRTC peer-to-step connections.

Event	Direction	Payload	Purpose
join-room	Client → Server	{ meetingCode, userId, fullName }	Joins a meeting room.
leave-room	Client → Server	{ meetingCode, userId }	Leaves a meeting room.
send-message	Client → Server	{ meetingCode, userId, fullName, message }	Sends a chat message to the room.
user-joined-alert	Server → Client	{ fullName }	Notifies the room that a new user has entered.
user-left-alert	Server → Client	{ fullName }	Notifies the room that a user has departed.
new-peer-joined	Server → Client	{ socketId, userId, fullName }	Triggers a WebRTC offer to the newly joined peer.
peer-left	Server → Client	{ socketId }	Closes the WebRTC connection to a disconnected peer.
participants-updated	Server → Client	[{ userId, fullName, socketId }]	Sends a full roster update of active participants.
receive-message	Server → Client	{ userId, fullName, message, timestamp }	Broadcasts an incoming chat message to all room members.
webrtc-offer	Bidirectional	{ targetSocketId/senderSocketId, offer }	Relays the Session Description Protocol (SDP) offer.
webrtc-answer	Bidirectional	{ targetSocketId/senderSocketId, answer }	Relays the Session Description Protocol (SDP) answer.
webrtc-ice-candidate	Bidirectional	{ targetSocketId/senderSocketId, candidate }	Relays Interactive Connectivity Establishment (ICE) candidates.

---

⚙️ Environment Variables

Backend (.env)

PORT=5000
NODE_ENV=development

MONGO_URI=your_mongodb_uri

JWT_SECRET=your_jwt_secret

CLIENT_URL=http://localhost:5173

ARCJET_KEY=your_arcjet_key
ARCJET_ENV=development

CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

# Gmail SMTP
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password

# Firebase
FIREBASE_PROJECT_ID=your_firebase_project_id

---

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• MongoDB Atlas account
• Firebase project with Google Sign-In enabled
• Cloudinary account

Clone Repository

git clone https://github.com/yourusername/MeetFlow.git

cd MeetFlow

Backend Setup

cd backend

npm install

# Create a .env file and fill in the environment variables listed above

npm run dev

Frontend Setup

cd frontend

npm install

npm run dev

---

⭐ Support

If you found this project helpful, please consider giving it a star ⭐ on GitHub.