https://github.com/jivan052/angsnyc
https://github.com/jivan052/angsnyc
express html tailwind webapp websocket
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jivan052/angsnyc
- Owner: Jivan052
- License: apache-2.0
- Created: 2025-02-16T13:50:42.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-11-29T15:53:56.000Z (7 months ago)
- Last Synced: 2025-12-01T00:25:46.691Z (7 months ago)
- Topics: express, html, tailwind, webapp, websocket
- Language: HTML
- Homepage:
- Size: 916 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎬 AngSync Room
A real-time YouTube video synchronization app that allows multiple users to watch the same video together and enjoy the real sync.
## 🚀 Features
✅ Create or join a sync room with a unique **Room ID**.
✅ Watch YouTube videos **in sync** with others.
✅ **Play, pause, and seek** functionality is synchronized across all users in the room.
✅ Change the **video URL dynamically**.
## 🛠️ Technologies Used
- **Frontend**: HTML, JavaScript, TailwindCSS 🎨
- **Backend**: Node.js, Express.js 🖥️
- **WebSockets**: For real-time video synchronization 🔄
- **YouTube IFrame API**: For embedding and controlling YouTube videos 🎥
## ⚙️ Installation & Setup
### 📌 Prerequisites
- Install [Node.js](https://nodejs.org/)
### 📝 Steps
1. Clone the repository:
```sh
git clone https://github.com/your-repo/angsync-room.git
```
2. Install dependencies:
```sh
npm install
```
3. Start the server:
```sh
node server.js
```
4. Open `http://localhost:8080/` in your browser. 🌐
## 🛠️ How It Works
### **Server-side (server.js) 🖥️**
- Uses **Express.js** to serve the `index.html` file.
- Uses **WebSockets** to establish real-time communication between users.
- Manages rooms and keeps track of video state (**play, pause, seek, and URL changes**).
### **Client-side (index.html & JavaScript) 🎭**
- Connects to the **WebSocket** server.
- Loads and controls the **YouTube video** using the **YouTube IFrame API**.
- Sends and receives **synchronization messages** (play, pause, seek, change URL) through **WebSockets**.
## 🔄 WebSocket Events
| 🎯 Event Type | 🔁 Sent By | 📌 Purpose |
|-------------|---------|---------|
| `join` | Client | User joins a room 👥 |
| `sync` | Server | Sends current video state to new users 🔄 |
| `play` | Client | Notifies all users to **play** video ▶️ |
| `pause` | Client | Notifies all users to **pause** video ⏸️ |
| `seek` | Client | Synchronizes video position ⏩ |
| `changeUrl` | Client | Updates video URL for all users 🔗 |
## 🔧 Issues & Improvements
🚨 **Sometimes pause/play actions don’t sync correctly.** Possible improvement: Implement a **timestamp-based synchronization mechanism**.
⚡ **Enhance error handling** for WebSocket disconnections.
🎨 **UI/UX improvements** for a better user experience.
## 📜 License
📝 MIT License
## 👤 Author
📌 **Jivan Jamdar** 🚀