๐ง 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! ๐งโค๏ธ
Top comments (1)
How did you handle latency in the real-time collaborative aspect of DJ ROOTS, was it a challenge? I'm working on a similar project and would love to swap ideas on this.