How We Built DJ ROOTS: An AI-Powered Music Recommendation Platform

Ananya Sharma — Mon, 13 Jul 2026 18:15:42 +0000

🎧 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

Users create or join a room using a unique room code.
Songs are added using a YouTube link or search.
Song metadata is automatically fetched.
Every participant can vote on songs.
Votes instantly reorder the queue using Supabase Realtime.
The host starts playback.
Audio is extracted through our backend using yt-dlp.
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

DEV Community: Ananya Sharma