Inspiration

I’ve always loved hosting karaoke nights with friends—whether at a local bar or my living room. When lockdowns made in-person gatherings tough, I wanted to recreate that joy online. Seeing how apps like Spotify and Discord nailed dark-mode social experiences, I set out to build a platform that felt familiar, fun, and focused on connection through music—no fancy equipment or in-person meetups needed.

What it does

Karaoke Party is a browser-based karaoke platform where you can browse a huge library of multilingual hits, sing solo/duet/choir or host party rooms, record performances with voice effects, and compete with friends via real-time scoring. Audience members can react, vote, and join the singing queue—all in a sleek, dark-mode UI that feels like home for music lovers.

How we built it

I started by mapping out core user flows (browsing songs, creating rooms, recording) and designing the UI in Figma to match modern social entertainment apps. Using React for the frontend, I built responsive pages for home, song library, singing rooms, and recording studio. The Web Audio API powered real-time voice effects, while vanilla JS handled the singing queue and scoring logic. I hosted the build on Firebase to keep it accessible via any browser.

Challenges we ran into

The biggest hurdle was syncing lyrics with audio in real time—getting the scrolling to match vocal timing took weeks of testing. Microphone permission prompts also needed careful design to avoid confusing users, and making the UI responsive across desktop and mobile (while keeping the dark-mode color scheme consistent) required endless tweaking of CSS grids and flexboxes.

Accomplishments that we're proud of

Seeing the party room feature work seamlessly—users can create private links, join queues, and react to performances in real time. The recording studio with post-recording effects (reverb, echo) also turned out better than I hoped, and the trending songs section feels dynamic and true to what people actually want to sing.

What we learned

I deepened my understanding of browser audio APIs and responsive design, but more importantly, I learned to prioritize user experience over feature bloat. Simplifying the queue system and making permission prompts clear made the app far more usable than my first overly complex draft.

What's next for this project

I want to add more voice effects (like pitch correction) and expand the song library to include more regional hits across Europe and the US. I also plan to integrate deeper social sharing (TikTok/Instagram Reels) and refine the real-time scoring to be more nuanced—plus, adding a waitlist for full party rooms to keep the fun going.

Built With

  • firebase-(hosting)
  • node.js
  • react
  • responsive-design
  • web-audio-api
Share this project:

Updates

Submission history