Connectify - Video Conferencing Application

Connectify is a Zoom-like video conferencing application that allows users to create accounts, join video calls, and maintain a history of their meetings. The application uses WebRTC for peer-to-peer video communication and Socket.IO for real-time signaling.

Table of Contents

• Architecture
• Technology Stack
• Folder Structure
• Features
• Installation
• Usage
• API Endpoints
• Database Schema
• Code Documentation
• Diagrams

Architecture

Connectify follows a client-server architecture with real-time communication capabilities:

┌─────────────────┐         ┌──────────────────┐         ┌─────────────────┐
│   Frontend      │◄────────┤   Socket.IO      │◄────────┤   Backend       │
│  (React)        │         │   Signaling      │         │  (Node.js)      │
└─────────────────┘         └──────────────────┘         └─────────────────┘
        │                           │                            │
        ▼                           ▼                            ▼
┌─────────────────┐         ┌──────────────────┐         ┌─────────────────┐
│   WebRTC        │◄────────┤   WebRTC         │◄────────┤   WebRTC        │
│  (Peer 1)       │         │   Signaling      │         │  (Peer 2)       │
└─────────────────┘         └──────────────────┘         └─────────────────┘

Components

1. Frontend (React): User interface for authentication, video calling, and meeting history
2. Backend (Node.js/Express): REST API for user management and Socket.IO server for WebRTC signaling
3. Database (MongoDB): Storage for user accounts and meeting history
4. WebRTC: Peer-to-peer video/audio communication between clients
5. Socket.IO: Real-time signaling for WebRTC connection establishment

Technology Stack

Frontend

• React.js (v18+)
• React Router v6+
• Material-UI (MUI) for UI components
• Socket.IO Client for real-time communication
• Axios for HTTP requests
• WebRTC for video/audio streaming

Backend

• Node.js (v18+)
• Express.js (v5+)
• Socket.IO for real-time communication
• MongoDB with Mongoose for database
• Bcrypt for password hashing
• Crypto for token generation

Database

• MongoDB Atlas (Cloud)

Folder Structure

.
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   │   ├── socketManager.js      # WebRTC signaling logic
│   │   │   └── user.controller.js    # User authentication and history
│   │   ├── models/
│   │   │   ├── meeting.model.js      # Meeting schema
│   │   │   └── user.model.js         # User schema
│   │   ├── routes/
│   │   │   └── users.routes.js       # User API routes
│   │   └── app.js                    # Express app configuration
│   ├── .env                          # Environment variables
│   ├── package.json                  # Backend dependencies
│   └── package-lock.json
└── frontend/
    ├── public/                       # Static assets
    ├── src/
    │   ├── contexts/                 # React context for authentication
    │   │   └── AuthContext.jsx
    │   ├── pages/                    # Application pages
    │   │   ├── VideoMeet.jsx         # Video call interface
    │   │   ├── authentication.jsx    # Login/registration
    │   │   ├── history.jsx           # Meeting history
    │   │   ├── home.jsx              # Home/dashboard
    │   │   └── landing.jsx           # Landing page
    │   ├── styles/                   # CSS modules and styles
    │   ├── utils/                    # Utility functions
    │   │   └── withAuth.jsx          # Authentication HOC
    │   ├── App.js                    # Main application component
    │   ├── enviroment.js             # Environment configuration
    │   └── index.js                  # Application entry point
    ├── package.json                  # Frontend dependencies
    └── package-lock.json

Features

1. User Authentication

   • User registration with name, username, and password
   • User login with token-based authentication
   • Logout functionality

2. Video Conferencing

   • Real-time video and audio communication using WebRTC
   • Multi-party video calls
   • Toggle video on/off
   • Toggle audio on/off
   • Screen sharing capability
   • In-call chat functionality

3. Meeting Management

   • Unique meeting codes for each session
   • Meeting history tracking
   • Join meetings via meeting code

4. User Interface

   • Responsive design
   • Intuitive navigation
   • Dark theme interface
   • Material-UI components

Installation

Prerequisites

• Node.js (v18 or higher)
• MongoDB Atlas account
• npm or yarn package manager

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Update the MongoDB connection string in app.js:

   const connectionDb = await mongoose.connect("YOUR_MONGODB_CONNECTION_STRING");

4. Start the backend server:

   npm run dev

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Update the environment configuration in enviroment.js if needed:

   let IS_PROD=false;
   const servers=IS_PROD ? 
   "https://your-production-url.com" :
       "http://localhost:8000";

4. Start the frontend development server:

   npm start

Usage

1. Access the Application

   • Open your browser and navigate to http://localhost:3000

2. Registration

   • Click on "Register" on the landing page
   • Fill in your name, username, and password
   • Submit the registration form

3. Login

   • Click on "Login" on the landing page
   • Enter your username and password
   • Submit the login form

4. Join or Create a Meeting

   • On the home page, enter a meeting code to join an existing meeting
   • Or navigate to any URL (e.g., /abcd1234) to create a new meeting

5. Video Call Controls

   • Toggle video on/off with the camera icon
   • Toggle audio on/off with the microphone icon
   • Share screen with the screen share icon
   • End call with the red phone icon
   • Open chat with the chat icon

6. View Meeting History

   • Click on the history icon in the navigation bar
   • View all previous meetings with dates

API Endpoints

User Authentication

Register a New User

POST /api/v1/users/register

Request Body:

{
  "name": "string",
  "username": "string",
  "password": "string"
}

Response:

{
  "message": "User registered successfully"
}

Login

POST /api/v1/users/login

Request Body:

{
  "username": "string",
  "password": "string"
}

Response:

{
  "token": "string"
}

Meeting History

Add Meeting to History

POST /api/v1/users/add_to_activity

Request Body:

{
  "token": "string",
  "meeting_code": "string"
}

Response:

{
  "message": "Added code to history"
}

Get User Meeting History

GET /api/v1/users/get_all_activity?token=string

Response:

[
  {
    "user_id": "string",
    "meetingCode": "string",
    "date": "date"
  }
]

Database Schema

User Schema

{
  name: { type: String, required: true },
  username: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  token: { type: String }
}

Meeting Schema

{
  user_id: { type: String },
  meetingCode: { type: String, required: true },
  date: { type: Date, default: Date.now }
}

Code Documentation

Backend

app.js

The main Express application file that sets up the server, connects to MongoDB, and configures middleware.

socketManager.js

Handles WebRTC signaling using Socket.IO. Manages user connections, message passing, and call coordination.

Key functions:

• join-call: Handles users joining a call
• signal: Manages WebRTC signaling messages
• chat-message: Handles in-call chat messages
• disconnect: Manages user disconnection

user.controller.js

Handles user authentication and meeting history.

Functions:

• login: Authenticates users and generates tokens
• register: Creates new user accounts
• getUserHistory: Retrieves user's meeting history
• addToHistory: Adds meetings to user's history

user.routes.js

Defines the API routes for user-related operations.

Frontend

App.js

Main application component that sets up routing for all pages.

VideoMeet.jsx

Core video conferencing component that handles WebRTC connections, media streams, and call controls.

Key features:

• Media stream management
• WebRTC peer connection handling
• Call controls (video, audio, screen share)
• In-call chat functionality

AuthContext.jsx

React context for managing user authentication state and API calls.

authentication.jsx

User authentication interface with login and registration forms.

home.jsx

User dashboard for joining meetings and accessing history.

history.jsx

Displays user's meeting history with dates.

landing.jsx

Landing page with application introduction and navigation to authentication.

Diagrams

System Architecture Diagram

graph TD
    A[Frontend - React] --> B[Backend - Node.js/Express]
    B --> C[MongoDB]
    A --> D[WebRTC Peer Connections]
    B --> E[Socket.IO Signaling]
    D --> A
    E --> A
    E --> B

Loading

User Flow Diagram

graph TD
    A[Landing Page] --> B{Authenticated?}
    B -->|No| C[Authentication Page]
    C --> D[Login/Register]
    D --> E[Home Page]
    B -->|Yes| E
    E --> F{Join or Create Meeting}
    F --> G[Video Call Page]
    G --> H[WebRTC Connection]
    E --> I[History Page]
    I --> J[View Past Meetings]

Loading

WebRTC Signaling Flow

sequenceDiagram
    participant User1
    participant Server
    participant User2

    User1->>Server: Join Call
    Server->>User1: User Joined (with client list)
    User2->>Server: Join Call
    Server->>User1: New User Joined
    Server->>User2: User Joined (with client list)

    User1->>Server: Signal (Offer)
    Server->>User2: Signal (Offer)
    User2->>Server: Signal (Answer)
    Server->>User1: Signal (Answer)

    loop ICE Candidates
        User1->>Server: Signal (ICE Candidate)
        Server->>User2: Signal (ICE Candidate)
        User2->>Server: Signal (ICE Candidate)
        Server->>User1: Signal (ICE Candidate)
    end

Loading

Development

Running in Development Mode

1. Start the backend server:

   cd backend
   npm run dev

2. Start the frontend development server:

   cd frontend
   npm start

Building for Production

1. Build the frontend:

   cd frontend
   npm run build

2. The built files will be in the build directory, ready for deployment.

Deployment

The application can be deployed to any platform that supports Node.js and React applications:

• Render
• Heroku
• AWS
• Google Cloud Platform
• DigitalOcean

Remember to update the environment variables and connection strings for production deployment.

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a pull request