-
-
Menu screens & About
-
Game screens
Inspiration
We all share a love of K-POP and wanted to create a fun and interesting game that we would play in our free time and that would challenge us in the process of making it.
What it does
Our project is an app that allows users to a play a game of guess the celebrity. It uses voice recognition to detect the right spoken answer. There are two game modes, one for K-POP fans and one for those that aren't, which instead tests on western celebrities. Play it here. Mobile recommended.
How we built it
Our first goal was to make sure our design for the game was mobile-first and easily navigable. We started with sketched and digital wireframes and then made a Hi-Fidelity prototype. Feel free to take a look at the prototype here. We also created our own logo (with the help of Canva). We then used React to build the app. MongoDB Atlas handles our databases of celebrities, one of which we created ourselves and the other uses AWS Amplify API to scrape data from another person’s website (in this case, FamousBirthdays). We then used Web Speech API for voice recognition. In order for the Korean names to be properly (or mostly) understood by the API and the app, we romanized the Korean that the API hears. We deployed our full-stack app to Vercel.
Challenges we ran into
Most of the challenges we ran into seemed to be backend related. Though we inevitably decided on creating our own database of K-POP artists, we had trouble connecting API’s we had planned on using to give us images. Connecting our database also came with a bit of struggle. The most challenging part of our project would have to be the Web Speech API. We kept getting errors, and it kept not picking up on our voices. We went through a lot of testing to get it to work (we yelled “Hello” into the mic many times).
Accomplishments that we're proud of
As web design majors, we can’t help but be proud of the design. We were able to use concepts we learned in class to create a nice layout. Another thing we’re proud of is getting both modes of the game to work, especially since we used different ways of populating the two databases (one we created manually, and the other we made using AWS Amplify API for web scraping). We’re all pretty proud of being able to make a functioning guessing game if we’re honest.
What we learned
We learned so much about troubleshooting and GitHub collaboration. Our collaboration was much better this time than the last time we’d worked together due to better communication and a passion for the project. We also learned that taking a break, even on a time crunch, can really make or break the outcome of the project. Code is sometimes unpredictable, and not taking a break can make you miss the simplest problems.
What's next for BiasGuessr
Hopefully, getting the badges to work. We’d decided to focus on the main component of the app, which was the game. Another thing we’d love to add is CSS animations, since we opted for more simple styling.
Log in or sign up for Devpost to join the conversation.