SyncSpace

SyncSpace is a full-stack video meeting app built with React, Vite, Express, MongoDB, and Socket.IO.

What It Supports

• User signup and login
• Creating and joining meeting rooms
• Live chat inside meetings
• Participant presence updates
• Recent room history
• Camera, microphone, and screen share controls
• Responsive meeting and dashboard UI

Project Structure

SyncSpace/
  backend/
  frontend/

• backend contains the Express API, MongoDB models, and Socket.IO server
• frontend contains the React + Vite client

Features

• Authentication with username and password
• Token-based session handling with a generated login token stored in the database and client storage
• Meeting room join flow with display name
• Live chat between participants
• Recent room history on the home page
• Meeting history page
• Camera-off avatar fallback tiles
• Screen sharing support

Tech Stack

Frontend

• React 19
• Vite
• React Router
• Axios
• Socket.IO Client

Backend

• Express
• MongoDB with Mongoose
• Socket.IO
• bcrypt

Requirements

• Node.js 18+
• npm
• MongoDB connection string

Environment Variables

Backend

Create a .env file inside backend/:

MONGO_URI=your_mongodb_connection_string
PORT=8000

Frontend

Optional .env file inside frontend/:

VITE_API_BASE_URL=http://localhost:8000

If VITE_API_BASE_URL is not set, the frontend uses http://localhost:8000.

Installation

Backend

cd backend
npm install

Frontend

cd frontend
npm install

Running Locally

Open two terminals.

Terminal 1: Backend

cd backend
npm run dev

Terminal 2: Frontend

cd frontend
npm run dev

Frontend runs on Vite's local dev server. Backend runs on http://localhost:8000.

Available Scripts

Backend

npm run dev
npm start

Frontend

npm run dev
npm run build
npm run preview
npm run lint

API Routes

Base route:

/api/v1/users

Endpoints:

• POST /register
• POST /login
• POST /add_to_activity
• GET /get_all_activity

Socket Events

Used for live meeting communication:

• join-call
• signal
• chat-message
• media-state
• user-joined
• user-left

Notes For Local Testing

• If you test two users on the same machine, one physical webcam may be locked by one browser at a time.
• In that case, the second participant can still join, chat, and appear with an avatar fallback tile.
• If socket behavior changes after backend edits, restart the backend server.

Build

Frontend production build:

cd frontend
npm run build

Current Status

This project is set up as a mid-level Zoom-style meeting app with the following working flows:

• Auth
• Meeting join and create flow
• Live chat
• Room history
• Responsive UI

Future Improvements

• Persistent meeting participants in database
• Better call quality and reconnection handling
• Invite sharing improvements
• Production deployment config