MeetSpace

A modern, browser-first video meeting platform built with React, Node.js, Express, MongoDB, Socket.IO and WebRTC.

MeetSpace is a portfolio project inspired by familiar video-conferencing products such as Zoom and Google Meet, but designed with its own visual identity and a cleaner, focused meeting experience.

✨ Features

🎥 Real-Time Meetings

Create and join meeting rooms using a room code / meeting ID

Guest joining without requiring an account

Browser-based video and audio using WebRTC

Real-time participant communication

Camera and microphone controls

Screen sharing

Responsive meeting experience

💬 Collaboration

Real-time room chat using Socket.IO

Emoji support

Participant list

Multiple meeting layouts:

Gallery

Speaker

Sidebar

Spotlight

Participant focus/selection

Clean meeting controls

Leave meeting functionality

🔐 Authentication & Backend

User registration and login

Token-based authentication

MongoDB database integration

REST API with Express

Health-check endpoint

Socket.IO signaling for WebRTC communication

🛠️ Tech Stack

Frontend

React.js

React Router

CSS Modules

Socket.IO Client

WebRTC APIs

Backend

Node.js

Express.js

Socket.IO

MongoDB

Mongoose

CORS

JWT authentication

Development Tools

Git

GitHub

VS Code

Nodemon

🏗️ Project Structure

MeetSpace/ │ ├── backend/ │ ├── src/ │ │ ├── controllers/ │ │ ├── models/ │ │ ├── routes/ │ │ └── app.js │ ├── .env │ └── package.json │ ├── frontend/ │ ├── public/ │ ├── src/ │ │ ├── components/ │ │ ├── contexts/ │ │ ├── pages/ │ │ ├── styles/ │ │ └── App.js │ └── package.json │ └── README.md

🚀 Getting Started

1. Clone the repository

git clone https://github.com/YOUR-USERNAME/MeetSpace.git cd MeetSpace

2. Backend setup

cd backend npm install

Create a .env file inside backend/:

PORT=8000 MONGO_URI=your_mongodb_connection_string CLIENT_URL=http://localhost:3000

Start the backend:

npm run dev

The API will run on:

http://localhost:8000

Health check:

http://localhost:8000/health

3. Frontend setup

Open another terminal:

cd frontend npm install npm start

The frontend will run on:

http://localhost:3000

🔧 Environment Variables

Backend

Variable

Description

PORT

Backend server port

MONGO_URI

MongoDB connection string

CLIENT_URL

Frontend URL

Do not commit your real .env file.

🧑‍💻 How to Use

Create a meeting

Open MeetSpace.

Sign in or create an account.

Start a room.

Copy the generated meeting/room code.

Share the code with participants.

Join as a guest

Click Join as guest.

Enter the Meeting ID / Room Code.

Enter your display name.

Click Join meeting.

Allow camera/microphone permissions when prompted.

Enter the meeting.

🎬 Meeting Controls

Inside a meeting, users can:

🎥 Turn camera on/off

🎤 Mute/unmute microphone

🖥️ Share screen

💬 Open room chat

👥 View participants

▦ Change meeting layout

☎ Leave the meeting

🌐 WebRTC Architecture

MeetSpace uses WebRTC for browser-to-browser real-time media communication.

The application uses Socket.IO as the signaling layer to exchange:

Session descriptions (SDP)

ICE candidates

Participant events

Chat messages

The actual audio/video communication is handled by WebRTC peer connections.

📱 Responsive Experience

The interface is designed to adapt to different screen sizes, including desktop and smaller displays.

🔒 Security Notes

This project is intended as a portfolio/learning application.

For production deployment, additional security and infrastructure would be recommended, including:

HTTPS/WSS

Stronger authentication/session management

Production-grade TURN servers

Rate limiting

Input validation and sanitization

Secure HTTP headers

Production environment configuration

Proper secret management

🐛 Known Development Notes

The frontend currently uses Create React App / react-scripts.

Start the frontend with:

npm start

not:

npm run dev

🔮 Future Improvements

Possible future enhancements:

Persistent meeting history

Meeting scheduling

Screen-sharing indicators

Active-speaker detection

Hand raise

Reactions

Better mobile meeting experience

Recording support

TURN server configuration

Production deployment

Meeting access controls

Host moderation controls

👨‍💻 Developer

Kunal Sonawane

Software Developer

MeetSpace was developed as a portfolio project focused on:

Real-time communication

WebRTC

Socket.IO

React

Node.js

Express

MongoDB

Full-stack product development

📄 License

This project is intended for educational and portfolio purpose