We wanted to develop a simple, fun and addicting game that anyone could play this summer with friends, family, or by yourself! As the pandemic affected many people’s social lives, we wanted to create a fun game that people could play competitively or collaboratively with their friends regardless of their interests and backgrounds. Whether that is gaming videos, vlogs, make-up routines, or even news, we all watch YouTube videos one way or another. Our game, The YouTube Thumbnail Game is enjoyable for anyone, and can be played on any internet-connected devices.

What it does

When you start the game, you are presented with two YouTube video thumbnails and their respective titles. You are to guess which video has more views. If you get it right, you get a point. You lose the game if you get one wrong.

There are 2 game modes: Timed Mode and Casual Mode. For timed mode, you get 7 seconds to pick a video, and your score gets recorded in the leaderboard, where you can compete against people around the world. Casual mode does not have a time limit and the score does not count toward the leaderboard. You can view a personalized performance stats and graph of any player on the profile page.

How we built it

Starting with fetching the YouTube videos we wanted in our game, we worked on the backend to fetch two random videos from our PostgreSQL database. We used a list of 1000 nouns in the English dictionary and used the Google Cloud API to get relevant videos for each keyword. This was done by running a script that we created that would take the API response and generate a database migration file with the necessary SQL. We used GraphQL to fetch these videos from our database because we needed to be as efficient as possible and prevent over-fetching from occurring. In addition, we used TypeOrm to ensure this process was scalable. Then, we worked on the front-end using React.js and implemented server-side rendering with Next.js to ensure that our data was loaded as quickly as possible for the user. To make everything as organized as possible, we used Styled Components and utilized both keyframes and react-spring for animations.

Challenges we ran into

The biggest challenge we faced was optimizing the fetching and invalidating videos to our Postgresql database. In order to keep our users engaged, we knew that we would have to render the videos on the screen as fast and efficiently as possible. This took several attempts of trial and error, but eventually we were able to utilize URQL’s cache invalidation functionality to obtain the desired result. Additionally, there were a plethora of small bugs that we encountered, and we unfortunately weren’t able to fix all of them.

Accomplishments that we're proud of

We are proud that we were able to complete a fun and addicting game that people could actually enjoy playing within the time constraint. We were able to test our game with some of our friends who enjoyed playing it, which was a really rewarding feeling for us.

What we learned

We learned that teamwork and communication are crucial for something to get done efficiently. From the previous hackathon, we were programming everything from beginning to the end together. However, we tried splitting up the work this time, and we were able to get things done much more efficiently. It was especially effective because we could critique and give suggestions for improvements after a component of the project was completed, which spurred additional ideas and suggestions.

What's next for The YouTube Thumbnail Game

We would like to make a more robust collaborative mode, where users can “team” up with their friends and family to compete against other friends and family as a team. We truly believe that our game will be played by many people all around the world and brighten people’s days and make their summer fun and engaging!

Built With

  • firebase-analytics
  • firebase-authentication
  • google-cloud
  • graphql
  • graphql-code-gen
  • material-ui
  • next.js
  • react
  • react-spring
  • styled-components
  • typescript.
  • urql
  • youtube
Share this project: