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.
Traditional music streaming at group events has several limitations:
We wanted to build something that makes music democratic.
DJ ROOTS is a real-time collaborative DJ platform where anyone can join a room using a simple room code.
Participants can:
Instead of one person deciding the playlist, the entire crowd decides what plays next.
Everything happens in real time without refreshing the page.
Every participant has equal voting power.
The queue automatically rearranges itself according to the most popular songs.
Using Supabase Realtime, every vote, new song, and playback update is instantly visible across all connected devices. No polling.
No manual refresh.
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:
The webcam processing happens locally, so video never leaves the user's device.
Instead of embedding YouTube's player, our backend extracts the audio stream using yt-dlp.
This allows:
Every project teaches something, and DJ ROOTS was no exception.
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.
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.
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.
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. 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.
We have several exciting ideas planned for future releases:
Building DJ ROOTS helped us gain practical experience with:
This project showed us that building a polished real-time application involves much more than writing code—it requires solving real engineering challenges.
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! 🎧❤️