Inspiration
The idea for Playlistr was born from a love of shared musical experiences and a desire to solve a common party foul: the battle for the AUX cord. I'm old enough to remember the magic of flipping through song titles on a jukebox after dropping in a quarter. When TouchTunes came along, it was a revelation! The ability to use your phone to quickly find and play any song you could think of was awesome. I wanted to bring that same seamless, interactive experience into my own home, especially during parties and get-togethers.
Too many nights have ended with a small group huddled around a TV, passing the remote back and forth, trying to keep the music going. Inevitably, someone's favorite song gets skipped, or the vibe dies because no one remembers to queue up the next track. I imagined a better way—a system where everyone could participate, where the playlist was a living, breathing part of the party that we could all shape together. No more fighting over the remote; just a fun, collaborative soundtrack for our best moments.
What it does
Playlistr transforms any gathering into a collaborative, real-time jukebox experience. A host starts by creating a new session, which generates a unique link to share with friends. Once they join, everyone can search YouTube for their favorite music videos and add them directly to the shared playlist. But the real fun comes from the democratic voting system! Everyone can cast a thumbs up or a thumbs down on any song in the queue.
The playlist dynamically re-orders itself based on these votes. If a track gets three upvotes, it's immediately promoted to play next, keeping the energy high with crowd-pleasers. Conversely, if a song receives three downvotes, it's instantly removed from the list, no questions asked! To complete the experience, I've included a real-time chat box for everyone to share their thoughts and reactions. And for the full party effect, the "TV View" mode projects the video player, the constantly evolving playlist, and the live chat onto a big screen for everyone to see and enjoy together.
How we built it
This project was brought to life with an incredible combination of Bolt.new, React, and Firebase. I started by mapping out my vision with the help of Gemini, which gave me a solid project plan. I then handed that plan over to Bolt, and it was amazing to watch it scaffold the entire application! Bolt also guided me seamlessly through the Firebase integration process. The Firebase console itself was a dream to work with; it's truly a "click and go" experience for setting up databases, authentication, and hosting.
One of my favorite moments during development really highlights the power of this stack. When a feature failed because I hadn't set up the necessary database indexes in Firestore, I thought I was in for a long debugging session. Instead, the browser's developer console gave me the exact URL to click to create the missing indexes. A single click, a page refresh, and the problem was solved. This level of thoughtful integration made resolving issues incredibly fast and let me focus on building features, not fighting with configuration.
Challenges we ran into
The biggest technical hurdle was undoubtedly implementing the real-time features. I initially tried a polling method to keep all the collaborators' screens in sync, but it was clunky and inefficient. As someone who had never built a real-time application before, I wasn't sure what the right approach was. Thankfully, Bolt was able to walk me through a better implementation plan using real-time listeners, and now I have a functioning project that serves as a perfect reference for understanding these powerful concepts.
On a personal level, the biggest challenge was learning React. As a longtime .NET developer, I've always been most comfortable in that ecosystem and honestly, I was never a fan of JavaScript. My previous experience with Vue3 was just okay, and I was resistant to learning yet another framework, especially with concepts like JSX. However, I was absolutely blown away by how intuitive, easy, and declarative React is. It completely changed my perspective and made me realize it's a tool I absolutely need in my developer toolkit.
Accomplishments that we're proud of
Frankly, I'm just incredibly proud that it works! This idea has been rattling around in my head for years. I even attempted to build it a few times in the past using .NET and Blazor, but with very little success. To see this concept go from a nagging idea to a fully functional application in a single weekend is an amazing accomplishment. The modern toolset, including AI-powered research and code generation, made all the difference and the time spent was worth it for that feeling alone.
One AI-powered feature I'm particularly excited about is my upcoming music recommendation engine. When the playlist is about to run out of songs, my system will use an AI model to analyze the vibe of the tracks played so far and suggest three new songs by different artists that fit the mood. No public API existed for this, so I prompted Perplexity AI to build one for me! While I didn't have time to fully integrate it before the deadline, the foundation is there, and I can't wait to roll it out soon.
What we learned
The biggest takeaway is that React is definitely the future for rapid, modern web development. While .NET will always be my go-to for robust backend systems and enterprise applications, this hackathon proved that if I want to build something fresh, new, and useful quickly, I need to embrace this platform. The integration between React and Firebase is rock solid and makes you immediately productive in a way that is hard to replicate. This project also highlighted the strengths and weaknesses of different cloud platforms. I've exclusively used Azure for years, and while its integration with .NET is powerful, the experience of getting a project off the ground with Firebase is far superior. The "click and go" setup is a world away from the often complex configuration of Azure services. It's going to be hard to go back after experiencing how seamless and developer-friendly this ecosystem is!
This experience also showed me just how far AI has come and what a masterful tool it is. It's not just for helping inexperienced developers bring new ideas to life; it's a force multiplier for experienced devs. By leveraging AI to handle the plumbing and boilerplate, I was able to multiply my abilities, productivity, and output. It allowed me to focus on what really matters: building a full-featured app quickly and efficiently. AI is fundamentally changing the development landscape, and I'm excited to make it a core part of my workflow.
What's next for Playlistr
The immediate next step is to launch my first "House Party Alpha Test" with friends! I want to see it in action, with everyone adding songs, voting tracks up and down, and calling each other out in the chat for their questionable music choices. Seeing it all play out on the big screen will be the ultimate test of the core experience, and I'll be gathering tons of feedback.
Looking further ahead, I plan to introduce a photo-sharing feature. I envision users being able to upload photos from the event in real-time, creating a live slideshow alongside the music. So often, we forget to take pictures, or we spend the next day asking everyone to send us what they took. With this feature, Playlistr will not only create the soundtrack for our nights but also become a living memory book, capturing the moments we share and preserving them for everyone to look back on.
Log in or sign up for Devpost to join the conversation.