The Masked Singer but not the Masked Singer

• 

  Start Screen

• 

  Question & Answer Screen

• 

  Result Screen (working)

• 

  Result Screen (score working, recommendation still in progress)

• 

  Routing

Inspiration

Now we usually get recommendations on musics based on what we like, but it is often nice to step out of our comfort zone, although challenging. This project helps people step out of their comfort zone by testing what genres of music they are familiar and unfamiliar with, and give corresponding music recommendations.

What it does

Choose one album cover out of 4 choices to match the singer. After 10 questions, users will get their results and recommendations on one song in their familiar genres and another song in their unfamiliar genres.

How we built it

This is a web app. We built the project using React, JavaScript, and of course HTML and CSS. For the API of music information, we chose last.fm's API (link).

Challenges we ran into

We did't have much experience and it was really challenging to learn and code at the same time. We switched between many APIs to find the best one. The biggest challenge was the problem of integrating the API into our project, along with setting up the question and answer functions, took the longest time in our development.

Accomplishments that we're proud of

We learned React, CSS and HTML from basically scratch. We managed to work out the API integration problems with our own efforts and help from tutors.

What we learned

Basic React, CSS and HTML. Last but not the least, teamwork experience.

What's next for The Masked Singer but not the Masked Singer

Complete the recommendation part; make more varieties of questions; offer links to play the music in questions and recommendations.

Built With

• css3
• html5
• javascript
• last.fm
• react