Skip to content

README.md

Latest commit

 

History

History
338 lines (251 loc) · 8.88 KB

README.md

File metadata and controls

338 lines (251 loc) · 8.88 KB

Zync

Seamless Video Conferencing for effortless collaboration.

preview

Live Demo https://zync-sk7g.onrender.com/

Overview • Features • Architecture • Tech Stack

Overview

Zync is a modern full-stack video conferencing platform built using native WebRTC APIs, Socket.IO, and a custom real-time signaling architecture.

Unlike SDK-based meeting applications, Zync implements the WebRTC connection lifecycle manually using RTCPeerConnection, enabling deeper control over peer negotiation, signaling, and media stream management.

The platform supports:

  • 🔴 Real-time video/audio communication
  • 🖥️ Screen sharing
  • 💬 In-meeting chat
  • 👥 Dynamic participant grids
  • 🔐 Secure session-cookie authentication
  • 🖼️ Optimized avatar uploads with image compression
  • 🔗 Human-readable GitHub-style meeting links
  • ⚡ P2P communication using STUN/TURN infrastructure

Motivation

Most modern video conferencing platforms rely heavily on proprietary SDKs that abstract away the underlying real-time communication layer.

Zync was built to deeply understand and implement:

  • WebRTC peer negotiation
  • ICE candidate exchange
  • Real-time signaling architecture
  • Media stream lifecycle management
  • Scalable Socket.IO room systems

The goal was to engineer a production-style conferencing platform using native browser APIs instead of black-box abstractions.

Features

Real-Time Communication

  • Native WebRTC peer-to-peer media streaming
  • Self-managed signaling using Socket.IO
  • Dynamic participant grid rendering
  • Live participant join/leave handling
  • Camera toggle
  • Microphone toggle
  • Screen sharing support
  • Self-view video preview

In-Meeting Chat

  • Real-time Socket.IO powered messaging
  • Profile pictures inside chat
  • Usernames + timestamps
  • Persistent authenticated messaging layer

Authentication & Security

  • Session-token based authentication
  • HTTP-only secure cookies
  • Password hashing using bcrypt
  • Socket-level authentication middleware
  • Protected meeting routes

Media & Image Optimization

  • Frontend image compression before upload
  • Backend fallback compression using Sharp
  • Multer-based upload pipeline
  • Base64 optimized avatar delivery

Frontend Experience

  • Fully responsive UI
  • Dark themed modern aesthetic
  • shadcn/ui components
  • Redux persistent state management
  • Optimized React architecture
  • Smooth real-time updates

Engineering Challenges

  • Synchronizing peer connections across multiple participants
  • Managing dynamic room state using Socket.IO
  • Handling disconnect/reconnect scenarios
  • Implementing secure socket authentication using session cookies
  • Optimizing avatar uploads with frontend + backend compression
  • Managing real-time media stream updates efficiently
  • Building responsive participant grids for varying room sizes

Performance Optimizations

  • Frontend image compression before upload
  • Backend fallback compression using Sharp
  • P2P media streaming to reduce server load
  • Lazy loaded frontend routes
  • Optimized Redux persistence
  • Minimal signaling payloads
  • Efficient room broadcasting with Socket.IO

Security Features

  • HTTP-only secure session cookies
  • bcrypt password hashing
  • Socket-level authentication middleware
  • Protected API routes
  • Controlled CORS configuration
  • Secure credential handling

Scalability Considerations

Current architecture is optimized for small-to-medium sized conferencing rooms using peer-to-peer topology.

Future scalability improvements may include:

  • SFU architecture integration
  • Redis Socket.IO adapter
  • Horizontal signaling server scaling
  • Media server integration
  • Distributed TURN infrastructure

Architecture

preview

WebRTC Flow

1. User joins meeting
2. Socket.IO authenticates session cookie
3. Existing participants fetched
4. Signaling exchange begins
5. RTCPeerConnection established
6. ICE candidates exchanged
7. P2P media streams connected
8. Video/audio/chat synchronized live

Socket.IO Events

Event Description
join-meeting Join a meeting room
existing-users Fetch current participants
user-joined Notify new participant
signal Exchange WebRTC signaling data
chat-message Real-time meeting chat
user-left Participant disconnect event

Tech Stack

Logo Technology Usage
React Frontend UI library
TypeScript Type-safe frontend development
Vite Lightning fast frontend bundler
Express.js Backend API server
Socket.IO Real-time signaling layer
WebRTC Peer-to-peer media streaming
MongoDB Database
Redux Toolkit Persistent client state
shadcn/ui UI component system
TailwindCSS Utility-first styling

Authentication Flow

User Login/Register
        │
        ▼
Session Token Generated
        │
        ▼
HTTP-only Cookie Stored
        │
        ▼
Socket.IO Middleware Validation
        │
        ▼
Authenticated Real-Time Connection

Project Structure

Backend

backend/
├── src
│   ├── config
│   ├── controllers
│   ├── middlewares
│   ├── models
│   ├── routes
│   ├── utils
│   ├── io.js
│   ├── app.js
│   └── server.js

Frontend

frontend/
├── src
│   ├── components
│   ├── hooks
│   ├── Pages
│   ├── store
│   ├── types
│   ├── api.ts
│   ├── routes.tsx
│   └── main.tsx

Environment Variables

Frontend

VITE_API_BASE_URL=
VITE_SOCKET_URL=

Backend

PORT=
MONGODB_CONN_STR=
ENV=
FRONTEND_URL=

Backend Setup

cd backend
npm install

Create .env

PORT=
MONGODB_CONN_STR=
ENV=
FRONTEND_URL=

Run development server

npm run dev

Frontend Setup

cd frontend
npm install

Create .env

VITE_API_BASE_URL=
VITE_SOCKET_URL=

Run frontend

npm run dev

Future Improvements

  • Meeting recording
  • AI-generated summaries
  • Live captions
  • Virtual backgrounds
  • Meeting analytics

Contributing

Pull requests, feature suggestions, and improvements are welcome.

fork → clone → branch → commit → push → PR