👨‍💻👩‍💻▶️ in-sync

Introduction

A scalable real-time web application that allows users to watch YouTube videos synchronously, instant message, and have voice conversations using WebSockets and WebRTC. It is built with the following technologies:

Purpose	Software Technology
Frontend Development	Reactjs, TypeScript, Antd
End-to-End Testing	Cypress
WebSocket Service	Socket.io
Render YouTube Videos	YouTube IFrame Player API
Voice Streaming	Mediasoup
Server	Express
In-memory Database	Redis
Containerization	Docker
Deployment	NGINX, S3, CloudFront, AWS EC2

Install dependencies and spin up development environment:

Session Server:

On one terminal

$ cd server
$ npm install
$ docker-compose up --build

On another terminal

$ cd server
$ npm run dev

Voice Server:

$ cd rtc-server
$ npm install
$ npm run dev

Frontend:

$ cd client
$ npm install
$ npm start

High Level System Design

Production Environment

Course/Contributors

• University: San Jose State University
• Course: CMPE 195E/F
• Contributors: William Nguyen, Gary Chang, Hamsika Pongubala, Emanuel Ypon

Project Information

• Project report: https://docs.google.com/document/d/1VVKKeB3Xbji1iMZ2RcDbfa5Zgpznv-a9gwboiDV9nZs/edit?usp=sharing
• Demo Video: https://drive.google.com/file/d/1yeM_IBc3LHBMLEr2FvjIHRtZjPUjICab/view?usp=sharing

References

• Using multiple nodes with Socket.io
• Mediasoup: Communication Between Client and Server
• Mediasoup: Scalability