💡 Inspiration
Inspired by Carson's love for anime, we wanted to create an anime-related hobby app. We thought of a recommendation app, a social media app, but after much thought, we were reminded of the popular guessing game, "Higher or Lower". Anime went out of the picture when we realized there wasn't a reliable Anime API that we could fetch from (further research shows that this might have been available), so we stuck with movies as an alternative.
⚙️ What it does
Box Office Battles is an interactive guessing game that prompts the user to guess whether the revenue of a movie is higher or lower than its “opponent”. The user’s streaks, how many choices they got right in a row, are stored in a leaderboard where they can compare scores with their friends.
🔨 How we built it
Frontend - React, TypeScript, AWS S3 + AWS CloudFront
Backend - Express.js, MongoDB, TMDB API, AWS EC2
🏃 Challenges we ran into
Much of the challenges came from the front end, especially with the animation of various images and text wrappers. Since we incorporated a lot of animation throughout the game (slide-outs after clicking the start button, KO animations, movie slide-ins, etc.), synchronizing these and animating them with react components was a challenge. Also, on the backend, bypassing rate limiting when fetching the movies was difficult to navigate as well.
🏆 Accomplishments that we're proud of
We’re proud to finish the project on time, and deliver a working solid game as our final output! The UI of the game is clean, and the project executes as expected. We worked well as a team, with each member pulling their weight.
🤓 What we learned
We learned a lot about animations, utilized MongoDB for the first time in a project, and learned how to deploy on AWS.
Log in or sign up for Devpost to join the conversation.