🎧 DJ ROOTS – Building a Real-Time Collaborative Music Platform with Gesture Control

Crowd Vibes. You Control.

Music is one of the best ways to bring people together. However, during parties, college events, hostel gatherings, or study sessions, one common problem always exists—who gets to control the music?

Usually, one person owns the playlist while everyone else keeps requesting songs. This often creates confusion, interruptions, and arguments over what should play next.

Our team wanted to solve this problem by creating a platform where everyone in the room gets an equal voice.

Welcome to DJ ROOTS.

🚨 The Problem

Traditional music streaming at group events has several limitations:

• Only one person controls the playlist.
• Song requests are ignored or forgotten.
• No real-time collaboration.
• Existing queue systems don’t truly represent the crowd’s choice.
• There is no simple browser-based solution that works instantly without downloading an app.

We wanted to build something that makes music democratic.

💡 Our Solution

DJ ROOTS is a real-time collaborative DJ platform where anyone can join a room using a simple room code.

Participants can:

• Create or join a music room
• Add songs using YouTube
• Upvote or downvote tracks
• Automatically reorder the queue based on crowd votes
• Watch every change happen instantly across all connected devices
• Let the host control playback using webcam hand gestures

Instead of one person deciding the playlist, the entire crowd decides what plays next.

🛠 Tech Stack

Frontend

• React 19
• Vite
• Tailwind CSS v4
• Framer Motion
• Three.js
• GSAP
• OGL

Backend

• Node.js
• Express.js

Database & Authentication

• Supabase
• PostgreSQL
• Supabase Authentication
• Supabase Realtime

Computer Vision

• Google MediaPipe Gesture Recognizer

Audio Pipeline

• yt-dlp
• youtube-dl-exec
• HTML5 Audio API
• Web Audio API

Deployment

• Vercel (Frontend)

⚙️ How It Works

1. Users create or join a room using a unique room code.
2. Songs are added using a YouTube link or search.
3. Song metadata is automatically fetched.
4. Every participant can vote on songs.
5. Votes instantly reorder the queue using Supabase Realtime.
6. The host starts playback.
7. Audio is extracted through our backend using yt-dlp.
8. Every connected device stays synchronized.

Everything happens in real time without refreshing the page.

✨ Key Features

🎵 Collaborative Queue

Every participant has equal voting power.

The queue automatically rearranges itself according to the most popular songs.

⚡ Real-Time Synchronization

Using Supabase Realtime, every vote, new song, and playback update is instantly visible across all connected devices.

No polling.

No manual refresh.

🤚 Gesture-Controlled DJ Mode

One of the most exciting features of DJ ROOTS is touch-free control.

Using Google MediaPipe, the host can control playback through hand gestures.

Supported gestures include:

• 👍 Thumbs Up → Upvote
• 👎 Thumbs Down → Downvote
• 🤏 Pinch → Volume Control
• 👋 Swipe → Skip Songs

The webcam processing happens locally, so video never leaves the user’s device.

🎧 Advanced Audio Streaming

Instead of embedding YouTube’s player, our backend extracts the audio stream using yt-dlp.

This allows:

• Better playback control
• Spectrum visualizations
• Volume adjustments
• Lower latency
• Full synchronization

🧩 Challenges We Faced

Every project teaches something, and DJ ROOTS was no exception.

1. YouTube Bot Detection

The biggest challenge was extracting audio reliably.

Cloud-hosted servers often get blocked due to YouTube’s bot detection mechanisms.

We solved this by designing a backend that can run from a trusted local or residential network for demonstrations and testing.

2. Real-Time Queue Synchronization

When multiple users vote simultaneously, maintaining a consistent queue order becomes difficult.

We solved this by storing vote counts in PostgreSQL and using database triggers to automatically recalculate rankings.

3. Browser Autoplay Restrictions

Modern browsers prevent automatic audio playback.

Instead of treating this as a limitation, we created an “Enter DJ ROOTS” interaction that unlocks audio playback while improving the user experience.

4. Smooth Gesture Recognition

Making webcam gestures responsive without affecting application performance required careful optimization.

Using MediaPipe allowed us to process gestures directly in the browser with low latency.

👥 Team Collaboration

This project was built through close collaboration among our team members.

We divided responsibilities across frontend development, backend implementation, real-time synchronization, UI design, and overall integration to ensure that every component worked seamlessly together.

🚀 Future Improvements

We have several exciting ideas planned for future releases:

• Hype Mode with immersive visuals
• AR-inspired DJ console
• Better cloud deployment strategy
• Stronger room permissions
• Mobile applications
• AI-powered song recommendations
• Multi-host collaboration

📚 What We Learned

Building DJ ROOTS helped us gain practical experience with:

• Real-time system design
• React architecture
• Backend API development
• Database design
• Authentication
• WebSockets
• Computer Vision
• Audio streaming
• Team collaboration
• Production-level debugging

This project showed us that building a polished real-time application involves much more than writing code—it requires solving real engineering challenges.

🎯 Final Thoughts

DJ ROOTS started with a simple question:

“Why should one person control the music when everyone is listening?”

Our goal was to create a platform where every participant contributes to the playlist and the crowd decides the vibe together.

While there are still many exciting features ahead, we’re proud of what we’ve built and excited to continue improving it.

If you have suggestions, feedback, or would like to collaborate, we’d love to hear from you!

Thanks for reading! 🎧❤️

webdev #react #node #supabase #javascript #opensource #fullstack #computervision #music #buildinpublic