🎥 JoinIn

Open-Source Video Conferencing Platform Built with MERN + WebRTC

🚀 Live Demo • 📖 Documentation • 🐛 Report Bug • ✨ Request Feature

🌟 Introduction

JoinIn is a powerful, open-source video conferencing platform that brings enterprise-grade meeting capabilities to everyone. Built with modern web technologies, it offers seamless real-time communication without the complexity or cost of traditional solutions.

🎯 The Problem

Most video conferencing solutions are either expensive proprietary software or complex to self-host. Teams need an accessible, privacy-focused platform that they can deploy and customize according to their needs.

💡 Our Solution

JoinIn combines the power of WebRTC for peer-to-peer communication with the reliability of the MERN stack, creating a fast, secure, and scalable video conferencing solution that you can deploy anywhere.

🚀 What Makes JoinIn Unique

100% Open Source: Complete transparency and community-driven development
Self-Hostable: Deploy on your infrastructure for complete data control
No Installation Required: Works directly in modern web browsers
Customizable: Modify and extend to fit your specific needs
Privacy-First: Your data stays on your servers

✨ Features

🎬 Core Features

📹 HD Video Conferencing - Crystal-clear video calls
🎤 Audio Communication - High-quality voice chat
💬 Real-time Chat - In-meeting text messaging
🔐 User Authentication - Secure login system
📝 Meeting History - Track past meetings
👥 Multiple Participants - Support for group calls

🛡️ Benefits

⚡ Lightning Fast - WebRTC peer-to-peer connection
🔒 Private & Secure - End-to-end encryption
📱 Responsive Design - Works on all devices
🌍 Scalable - Handles multiple concurrent meetings
🎨 Customizable UI - Adapt to your brand
💰 Cost-Effective - No licensing fees

🏗️ System Architecture

graph TB
    subgraph "Client Layer"
        A[React.js Frontend] --> B[Context API]
        B --> C[WebRTC Client]
    end
    
    subgraph "Server Layer"
        D[Express.js Server] --> E[REST APIs]
        E --> F[Socket.IO Server]
    end
    
    subgraph "Signaling"
        G[WebRTC Signaling] --> H[Peer Connection]
        H --> I[Media Streams]
    end
    
    subgraph "Data Layer"
        J[MongoDB Atlas] --> K[User Data]
        K --> L[Meeting History]
    end
    
    A -->|HTTP/WebSocket| D
    C -->|Signaling| F
    F -->|Events| G
    D -->|CRUD Operations| J
    
    style A fill:#61dafb,stroke:#000,stroke-width:2px
    style D fill:#68a063,stroke:#000,stroke-width:2px
    style G fill:#ff6b6b,stroke:#000,stroke-width:2px
    style J fill:#4db33d,stroke:#000,stroke-width:2px

🛠️ Tech Stack

Category	Technology	Description
Frontend		Component-based UI library
State Management		Built-in React state management
Backend		JavaScript runtime
Framework		Web application framework
Database		Cloud NoSQL database
Real-time		Real-time bidirectional communication
Video/Audio		Peer-to-peer media streaming
Deployment		Cloud hosting platform

📦 Installation & Setup

Prerequisites

Node.js 16.x or higher
npm or yarn package manager
MongoDB Atlas account (free tier available)
Git installed on your system

1️⃣ Clone the Repository

git clone https://github.com/VAMSHIYADAV46/JoinIn.git
cd JoinIn

2️⃣ Backend Setup

# Navigate to backend directory
cd backend

# Install dependencies
npm install

# Create environment variables file
touch .env

Configure Backend Environment Variables (.env):

# Server Configuration
PORT=5000
NODE_ENV=development

# MongoDB Configuration
MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/joinin
DB_NAME=joinin

# Session Configuration
SESSION_SECRET=your_super_secret_session_key_here
JWT_SECRET=your_jwt_secret_key_here

# CORS Configuration
CLIENT_URL=http://localhost:3000

# Socket.IO Configuration
SOCKET_PORT=5001

Start the Backend Server:

# Development mode
npm run dev

# Production mode
npm start

3️⃣ Frontend Setup

# Open new terminal and navigate to frontend
cd ../frontend

# Install dependencies
npm install

# Create environment variables file
touch .env

Configure Frontend Environment Variables (.env):

REACT_APP_API_URL=http://localhost:5000
REACT_APP_SOCKET_URL=http://localhost:5001

Start the Frontend Application:

# Start development server
npm start

# Build for production
npm run build

4️⃣ Access the Application

Open your browser and navigate to:

Frontend: http://localhost:3000
Backend API: http://localhost:5000/api

💻 Usage

Demo Credentials

Username	Password	Description
`demo01`	`12345`	Demo User 1
`demo02`	`12345`	Demo User 2

Getting Started

Sign Up/Login: Create an account or use demo credentials
Create Meeting: Click "New Meeting" to start a video call
Share Link: Send the meeting link to participants
Join Meeting: Participants can join using the link
Collaborate: Use video, audio, and chat features

🚀 Deployment Guide

Deploy to Render

Backend Deployment

Create Backend Service on Render:
- Service Type: Web Service
- Build Command: npm install
- Start Command: npm start
- Root Directory: backend/

Environment Variables:

PORT=5000
MONGO_URI=your_mongodb_atlas_connection_string
SESSION_SECRET=your_session_secret
JWT_SECRET=your_jwt_secret
CLIENT_URL=https://your-frontend.onrender.com

Deploy:
- Connect GitHub repository
- Select branch: main
- Auto-deploy: Enabled

Frontend Deployment

Create Static Site on Render:
- Build Command: npm run build
- Publish Directory: build
- Root Directory: frontend/

Environment Variables:

REACT_APP_API_URL=https://your-backend.onrender.com
REACT_APP_SOCKET_URL=https://your-backend.onrender.com

Deploy:
- Connect to same repository
- Auto-deploy on commits

MongoDB Atlas Setup

Create free cluster at MongoDB Atlas
Whitelist IP addresses (0.0.0.0/0 for all)
Create database user
Get connection string
Add to backend environment variables

🗺️ Roadmap

Phase 1: Core Features ✅

Video/Audio calling
Real-time chat
User authentication
Basic UI/UX

Phase 2: Enhanced Features 🚧

Phase 3: Advanced Features 📋

Phase 4: Scaling & Performance 🎯

Phase 5: Enterprise Features 🏢

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

How to Contribute

Fork the Repository

git clone https://github.com/VAMSHIYADAV46/JoinIn.git
cd JoinIn

Create Feature Branch
```
git checkout -b feature/AmazingFeature
```
Make Your Changes
- Follow the existing code style
- Write meaningful commit messages
- Add tests for new features
- Update documentation

Commit Your Changes

git add .
git commit -m "✨ Add AmazingFeature"

Push to Your Fork
```
git push origin feature/AmazingFeature
```
Open Pull Request
- Provide clear description
- Link related issues
- Include screenshots/demos

Development Guidelines

Code Style: Follow ESLint configuration
Testing: Write unit tests for new features
Documentation: Update README for new features
Performance: Optimize for real-time performance

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 Mekala Vamshi Yadav

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...

🙏 Acknowledgements

Special Thanks To:

🌐 WebRTC - For peer-to-peer communication technology
🔌 Socket.IO - For real-time bidirectional event-based communication
🚀 Render - For seamless deployment platform
🍃 MongoDB Atlas - For cloud database hosting
⚛️ React Team - For the amazing frontend framework
🟢 Node.js Community - For the robust backend runtime
👥 All contributors and the open-source community

Inspired By:

Zoom - For setting the standard in video conferencing
Jitsi Meet - For pioneering open-source video calls
Google Meet - For simplicity and accessibility

👨‍💻 Author

Mekala Vamshi Yadav

Full-Stack Developer & Open Source Enthusiast

🔗 Project Links

🌐 Repository: https://github.com/VAMSHIYADAV46/JoinIn
📖 Documentation: https://github.com/VAMSHIYADAV46/JoinIn/wiki
🐛 Issue Tracker: https://github.com/VAMSHIYADAV46/JoinIn/issues
💬 Discussions: https://github.com/VAMSHIYADAV46/JoinIn/discussions
🚀 Live Demo: joinIn

⭐ Star this repo if you find it helpful!

Built with ❤️ by the Open Source Community

Name		Name	Last commit message	Last commit date
Latest commit History 16 Commits
backend		backend
frontend		frontend
.gitignore		.gitignore
.node-version		.node-version
README.md		README.md

VAMSHIYADAV46/JoinIn

Folders and files

Latest commit

History

Repository files navigation