VideoSync 🎥

Watch videos together, in sync, from anywhere.

---

Table of Contents

• About
• Problem Solved
• Features
• Technologies Used
• Demo
• Installation

---

About

VideoSync is a real-time video synchronization platform that lets you watch videos with others, with all interactions—like play, pause, and skip—perfectly synced across everyone in the room. It also includes a chat feature so you can discuss what’s on screen as it happens. Whether you’re hosting a movie night, sharing a family video, or studying with classmates, VideoSync makes it feel like you’re all together, no matter the distance.

---

Problem Solved

Have you ever wanted to watch a pre-recorded video—like a movie, a family memory, or a study session—with friends or family far away, as if it were live? Normally, you’d struggle to keep everyone in sync, with awkward pauses or mismatched timing ruining the experience. VideoSync fixes this by syncing every second of the video for all users in real-time, complete with a chat feature to talk about it as you watch—whether it’s a private group or a public event anyone can join.

---

Features

• Upload & Schedule: Upload a video, set a date and time, and choose if it’s public or private.
• Public or Private Access:
  • Public: Anyone can request to join, pending host approval.
  • Private: Only invited users can participate.
• Invite Users: Search for people by name or email and send them invites to your video room.
• Synchronized Watching: Everyone sees the same moment of the video—play, pause, or skip, and it updates for all in real-time.
• Real-Time Chat: Chat with everyone in the room, keeping discussions tied to what’s on screen.

---

Technologies Used

• Frontend: React, Tailwind CSS
• Backend: Spring Boot, Spring WebSocket, Spring JPA, Spring Security
• Database: MySQL

---

Demo

Here’s VideoSync in action!

Uploading & Scheduling a Video

Upload.-.Made.with.Clipchamp.mp4

User Invite by Name or email

Invite.-.Made.with.Clipchamp.mp4

Synchronized Playback with Chatting

Sync.Watching.mp4

---

Installation

Want to try VideoSync locally? Here’s how:

Prerequisites

• Node.js & npm (v16+)
• Java JDK 17+
• Maven
• MySQL (v8+)
• Google OAuth credentials (Google Cloud Console)

---

1. Clone the repo

bash git clone https://github.com/MohammedAymanKhan/VideoSync.git

1. Spring Boot Setup

   • All dependencies are already included.
   • Simply reload Maven/Gradle in your IDE to resolve them.

2. Frontend (React + TailwindCSS)

   • Navigate to the React app folder:

     cd frontend
     npm install
     npm run dev

3. Google OAuth (Authentication)

   • Configure your application.properties with:

     spring.security.oauth2.client.registration.google.client-id=YOUR_GOOGLE_CLIENT_ID
     spring.security.oauth2.client.registration.google.client-secret=YOUR_GOOGLE_CLIENT_SECRET

4. Database Setup

   • Update application.properties with your DB credentials:

     spring.datasource.url=jdbc:mysql://localhost:3306/YOUR_DB_NAME
     spring.datasource.username=YOUR_USERNAME
     spring.datasource.password=YOUR_PASSWORD

You're now ready to run the app! 🎉

License

This project is licensed under the MIT License - see the LICENSE file for details.