MiccDrop

Inspiration

One fine day, our team was singing along to "Die With A Smile" by Lady Gaga and Bruno Mars, when someone remarked that we would all do badly at karaoke. That's when it clicked. Instead of learning how to sing, why not create an app that rewards you for being bad at karaoke? One Hack & Roll and one sleepless night later, MiccDrop was born.

What it does

With Real-Time Pitch Detection, our program compares your pitch with the pitch of the song, and gives you more points the more off-tune you are. However, it's not as easy as screaming into the microphone. Our program rewards those who are precisely off-tune, which means that you get more points if you sing in between the 2 octaves of the note!

How we built it

Using React Native for the frontend, Node.js for the backend, as well as Supabase for our database. We used the Spotify API to retrieve metadata for the songs, as well as a Spotify Lyrics API to get .lrc (lyric) files.

Challenges we ran into

Building an app with React Native was not easy, and many libraries we wanted to use for this had little documentation, resulting in us having to fix bugs quite often. Creating a karaoke app from scratch also presented many challenges, such as creating pitch detection from scratch, creating a visualizer for it, creating lyrics that scroll, and lastly syncing it with the music.

Accomplishments that we're proud of

Our pitch detection system that our engineer stayed up the whole night to build.

What we learned

React Native is really hard to work with, but now we have experience in how to use it! We learnt how to work with lyrics, and styling in React Native as well!

What's next for MiccDrop

Having a multiplayer option was something we initially thought of and scrapped because of the 24 hour time limit. Other extensions include editable profiles, more songs, even allowing one to download songs to compete against others. A 3D editable avatar would also be a future extension (quite long in the future, given the complexity).