-
-
-
Ai analyses the recent songs added to the queue to decide on the genre for the next song
-
Room page
-
Songs are added to the queue
-
Landing Page - User can Host a Room or Join one using code
-
Guest Page- User requests song that is added to the queue or shares the vibe they are feeling
-
Room page- guest can access the room either by the code or scanning the QR code
-
Figma Inspiration
Inspiration:
Music has always been a social experience—but the way we listen together online is still broken. Most platforms either rely on one person controlling the queue or reduce music sharing to passive playlists with no real interaction. We were inspired by the idea of making music feel alive in shared spaces again. In real-life settings like parties, hangouts, or study sessions, the vibe constantly shifts based on people’s energy, conversations, and mood. But existing tools don’t adapt to that in real time. That’s where the idea for an AI DJ came in. We wanted to build something that could: Understand the collective vibe of a group React to real-time chat and energy changes Dynamically adapt the music queue automatically Make shared listening feel interactive, intelligent, and human again Instead of users manually curating playlists or fighting over control, the AI DJ acts like a real DJ in a room—listening, interpreting, and responding to the crowd’s mood instantly.
What it does
Abyss Vibe DJ is an AI-powered social music platform that turns group listening into a real-time, interactive experience. Users join shared rooms where they can chat, influence the vibe, and listen together while an AI DJ dynamically builds and controls the music queue. The AI analyzes user input and conversation context to understand the room’s mood, then automatically selects and queues songs that match the collective energy. Instead of manually picking tracks, users interact naturally through chat while the system adapts the playlist in real time. Each room stays perfectly synchronized across all users using real-time updates, so everyone hears the same moment at the same time—just like a live DJ set
How we built it
Abyss Vibe DJ is built as a full-stack real-time web application using a JavaScript-based architecture across both frontend and backend. On the backend, we used Node.js with Express to handle REST API routes for room creation and health checks. Real-time communication is powered by Socket.io, which manages live music rooms, synchronized playback, chat events, and dynamic DJ queue updates. We used dotenv for environment configuration and the native Fetch API to connect to external services like the Google Gemini API and Apple iTunes Search API. On the frontend, we built the interface using React, bundled and served with Vite for fast development and hot module reloading. The client connects to the backend through socket.io-client, enabling real-time updates for music, chat, and room state. We also used qrcode.react to generate shareable QR codes so users can instantly join rooms from their phones or other devices. For styling, we kept things lightweight with plain CSS, focusing on a smooth, immersive “vibe-based” UI instead of heavy frameworks. The AI DJ logic is powered by the Google Gemini API, which interprets chat context and user input to determine the room’s mood and suggest or adjust music accordingly. Music metadata and previews are pulled from the Apple iTunes Search API, giving access to track information and 30-second audio clips used in the queue. Overall, the system is designed around a real-time event-driven architecture where Socket.io synchronizes all users, while AI and external APIs dynamically shape the listening experience.
Challenges we ran into
One major challenge was maintaining a real-time song queue that stays synchronized across all users while also updating dynamically based on AI-generated “vibe” and user input. Balancing automation with user control took multiple iterations. We also struggled with AI-based song selection, making sure the system chose songs that actually matched the room’s mood rather than feeling random. Another issue was music playback. We initially tried using Spotify but faced API restrictions, so we switched to the Apple iTunes Search API, which provides public previews and made playback much easier. Building real-time rooms with hosts and multiple users was also complex, especially ensuring smooth joining, queue updates, and state synchronization. Additionally, sticking to our deep-sea theme across the UI and experience was harder than expected—we had to keep the design consistent while still making the interface intuitive and responsive. Lastly, we ran into merge conflicts during development, which we solved by using a better branching workflow for collaboration.
Accomplishments that we're proud of:
We successfully built a fully working real-time application from scratch. Our AI DJ is functional and can interpret user chat to influence the music queue, creating a dynamic listening experience. Users can join rooms, communicate through chat, and request songs seamlessly while staying synchronized.
What we learned
We learned how to build and manage a real-time system using Socket.io, especially handling synchronization across multiple users. We also gained experience integrating AI APIs to create meaningful, context-aware features rather than static functionality. Additionally, we improved our understanding of full-stack development, from building responsive UIs in React to designing backend architecture in Node.js. Working as a team, we also learned the importance of version control, branching, and collaboration workflows to avoid conflicts and keep development organized.
What's next for Abyss DJ:
We plan to deploy Abyss DJ as a fully accessible web application, allowing anyone to create or join rooms online. In the future, we want to: Let hosts connect their preferred music source/platform for more personalized playback Integrate full-length music instead of previews Improve AI accuracy for better vibe detection Enhance the UI/UX with more immersive visuals Add user accounts and persistent rooms Our goal is to evolve Abyss DJ into a scalable platform for real-time, AI-powered social music experiences.
Built With
- applesitunessearchapi
- dotenv
- express.js
- geminiapi
- javascript
- node.js
- react
- socket.io
- vite
Log in or sign up for Devpost to join the conversation.