Synchronous - Collaborative Music Listening App

https://synchronous-xt28.vercel.app/

Synchronous is a real-time collaborative music listening application built with the MERN stack (MongoDB, Express, React, Node.js). It allows multiple users to join a virtual room and listen to music simultaneously, with perfect synchronization across all devices.

🎵 Key Features

Real-time Synchronization

• All users hear the music at exactly the same time
• Automatic drift correction maintains perfect sync
• Adaptive latency compensation for different network conditions

🚪 Room Management

• Create unique music rooms with custom names
• Join existing rooms with a simple ID
• See all participants in real-time

🎚️ Admin Controls

• First user becomes room admin
• Search and select songs from YouTube's vast library
• Play, pause, and seek through tracks
• Control playback for all participants

📱 Mobile-Optimized

• Fully responsive design works on all devices
• Touch-friendly controls for mobile users
• Mobile-specific audio optimizations

⚡ Performance Optimized

• Efficient WebSocket communication
• Adaptive quality based on network conditions
• Minimal resource consumption

🛠 Technologies Used

Frontend:

• React (v18)
• React Router (v6)
• Socket.IO Client
• React Player
• Axios
• Tailwind CSS

Backend:

• Node.js (v18+)
• Express.js
• Socket.IO
• Axios (for YouTube API)
• Cors

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (v8 or higher)
• YouTube API Key (free tier)

Installation

git clone https://github.com/your-username/synchronous-music-app.git
cd synchronous-music-app

Set up backend:

cd backend
npm install

Set up frontend:

cd ../client
npm install

Configure environment variables:

Create a .env file in the backend directory:

YOUTUBE_API_KEY=your_youtube_api_key
PORT=5000

Run the application:

Start backend:

cd backend
node server.js

Start frontend in a new terminal:

cd client
npm start

🧭 Usage Guide

Creating a Room

• Go to the homepage
• Click "Create a Room"
• Optionally enter a room name
• You'll be redirected to your new room as the admin

Joining a Room

• Get the room ID from a friend
• Enter it in the "Join a Room" field
• Click "Join Room"

Room Controls (Admin Only)

• Search for songs: Use the search bar to find YouTube videos
• Play/Pause: Control playback for everyone
• Seek: Drag the progress bar to skip to any part of the song
• Volume: Adjust volume using the slider

As a Participant

• Listen to music in perfect sync with others
• See what song is currently playing
• View other participants in the room

🛠 Troubleshooting

Problem: Songs don't play in sync
Solution: Check your network connection. The app automatically corrects drift over time.

Problem: Can't find songs in search
Solution: Ensure you have a valid YouTube API key in your .env file

Problem: Mobile playback issues
Solution: Make sure "Auto-Play" is enabled in your mobile browser settings