Zync

Seamless Video Conferencing for effortless collaboration.

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

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