youtube_sync

Real-Time Web Application with WebSockets This project showcases a real-time web application utilizing WebSocket technology for seamless live data synchronization. It allows you to share a YouTube link with a friend and watch the video together in perfect sync, ensuring no lag between your friend's device and yours.

Features

• Real-Time Updates: Live two-way communication using WebSocket.
• Two-Way Handshake: WebSocket establishes a persistent connection through an initial HTTP handshake, allowing real-time data transfer between the client and server.
• Frontend: A dynamic UI built with React and styled using modern CSS techniques.
• Backend: A Node.js and Express.js server ensuring fast and scalable real-time communication.
• Cross-Device Support: Sync data seamlessly across devices.

Tech Stack

Frontend:

HTML, CSS, JavaScript, ReactJS

Backend:

Node.js, Express.js, Socket.io, UUID

Prerequisites

Make sure you have the following installed:

• Node.js
• npm (Node Package Manager)
• A modern web browser

Installation and Setup

1. Clone the repository:

git clone https://github.com/Priyansurout/youtube_syn.git

cd <repository-directory>

Note: change the to where you cloned the repo.

2. Install dependencies for both the frontend and backend and run them:

For backend

cd youtube_syn

npm install

npm start

For frontend

cd ../youtube-sync-player

npm install

npm start

3. Open your browser and navigate to:

http://localhost:3000

Note: Ensure that you have a separate frontend running on http://localhost:3000. The frontend should connect to the WebSocket server at http://localhost:4000.

Usage

1. Start the backend server and frontend client as mentioned in the setup instructions.
2. Open the web application in your browser.
3. copy paste the video link then copy the room id
4. Join the room from the room id.
5. voila you have succesfully create a websocketing app which let's you share and watch the same youtube video with your friend.

Output

Output.mp4

Contributing

Contributions are welcome! Fork the repository, create a new branch, and submit a pull request with your changes. For major changes, please open an issue to discuss before proceeding.