We tried to come up with an idea where we could implement what we learned in the workshops on Saturday (so front-end and back-end working together) and ended up deciding that we could play a simple game of guess the song.

What it does

NoUShaZam enables users to pick categories of music, then have a song randomly chosen from that category. The song plays and the users must then try and make a guess of what they believe the song is.

How we built it

We have a front-end that codes what the website looks like, using react, js, and pieces of HTML. It relies on the back-end in order to look up songs in the database and also find the paths to the .mp3 files that we need to play on the website for the user. The back-end is where the database of dictionaries and songs are kept track of and where the songs are randomized and cross checked for their names.

Challenges we ran into

We originally wanted to do some sort of app with Spotify's API, but about half way through the day, we found it was too restrictive in what we could do with it. We ended up deciding to just keep an internal database of .mp3's in order to get around this problem and be more efficient with our time. Another problem we had was trying to connect our back-end to our front-end. Our biggest headache was properly routing our files in order to make sure that the .mp3 files would be found by the front end. To get around this, we had to import the module os and set an absolute path to our files. However, since it was difficult in making react work with local .mp3 files, we were unable to finish the project.

Accomplishments that I'm proud of

We are proud of the fact that we were able to persevere through our countless bugs and headaches, and although we weren't able to finish this project, we learned a lot about working with front-end and back-end. Coming from almost no experience, we are very satisfied with how far we were able to come and learn about during these ~8 hours of coding.

What We learned

We learned a lot about how react, flask, and git works. We learned how to effectively use git and learned the commands. We also learned about how react is able to streamline the process of creating a webpage that could interact with our back-end. Lastly, we learned about how flask works.

What's next for NoUShaZam

If we were able to finish, there would be definitely a lot more layers that we could've implemented into the game, like different levels of difficulty or a high score system. We would've liked to style the front end a little bit more, but with the limited amount of time we had, it just wasn't possible to finish.

Share this project: