Building a Simple Trivia Web App Using Vite, NHL APIs, and Firebase
Link to Web-App | Link to GitHub Repo
Introduction
In this article, I’ll detail how I built my simple NHL trivia app called “Who He Skate For?” with Vite, NHL APIs, and Google Firebase.
It’s inspired by the NBA on TNT segment “Who He Play For?” where Charles Barkley and Shaquille O’Neal try to guess what team various (and usually lesser-known) NBA players play for. The segment has spawned some particularly hilarious memes, most commonly from one of the first editions of the segment where Shaq guesses (in impeccable Chinese writing, too) that Aaron Brooks plays for the Guangdong Tigers.
I have always been a fan of hockey, and recently getting into watching basketball spurred this idea to convert this simple game into a web version for the NHL and collect the data to analyze. Now let’s get into the technical aspect! I won’t show all the details, but I’ll go over a few key aspects of my project and also share the resources I used to help me learn.
Vite
To develop my app, I started out using Vite (french word, pronounced “veet”) as a local development server. According to the website, Vite’s value add focuses on two main components:
- Fast Hot Module Replacement (HMR), meaning the development server keeps track of your codes changes and automatically applies those changes to the server — this feature was great for rapid development, as as soon as you save your code, your local server updates.
- A build command with RollUp to get your app ready for production- By leveraging Rollup for the build command, Vite benefits from Rollup’s performance optimizations and efficient bundling capabilities. This results in smaller bundle sizes, improved loading times, and overall better performance for web applications built with Vite.
To start, make sure you have Node installed, and simply run this:
npm create vite@latestThis will scaffold out a Vite project for you, and you can choose the framework and Javascript variant you’d like to use through a terminal selection:
For my project, because it was fairly simple and I wanted to understand the basics of JavaScript before moving on to a framework, I went with Vanilla JavaScript. After your project has been created, you’ll want to navigate to the project directory, install all of the dependencies using “npm install”, and then test out the local dev server by running “npm run dev”.
NHL APIs
Now for the logic side of the application. For this application, we want to show the user a random photo and name of an NHL player, show a selection of NHL teams they can choose from, grade the user guess as correct or incorrect based on their team selection, and then display all of the results back to the user at the end of the game:
To get a list of all of the teams and their active rosters, we will be utilizing the “?expand=team.roster” modifier of the NHL API. Wrapping this in a getRandomPlayer() function yields the following:
You’ll notice here I also created a player class to help track all of the player attributes more easily, which is below. In the constructor, we generate a random team number to choose from, then generate a random team roster number after we’ve determined how long the roster is, then we set the various attributes of the player.
The getplayerPhotoURL and getPlayerTeamLogoURL also utilize more external API calls in order to get photos of the player itself and the team they play for, using the common playerID we’ve already retrieved. The player photo was particularly hard to figure out, as the other common photo API used for this, nhl.bamcontent.com gave me HTTP security errors, and so I had to search a bunch for this other API to use.
Another great tool that helped me here is any JSON Visualizer tool- there are many, but I used Code Beautify’s JSON Viewer. This really comes in handy when working with large, nested API responses and you want to make sure you’re getting the right information. Here’s just a small sample of what the NHL API call yields in JSON viewer:
Firebase
And Lastly, but certainly not least, is our cloud-hosting platform, Firebase. Firebase is a set of backend cloud computing services and application development platforms provided by Google. It hosts databases, services, authentication, and integration for a variety of applications. For our use case, since we don’t need to run complex server-side code or authenticate our users, we’ll just be uses the web hosting and database services.
I had discovered Firebase via a YouTuber who goes by the name of Fireship, who makes video tutorials about software development and programming. His Firebase-Back To Basics video was an amazing and succinct quick start video to give me everything I needed to get the basics of Fireship. Once I had gotten the basics of it, his 100 Firebase Tips, Tricks, and Screw-ups video gave me all of the neat little pro-tips to ensure my application was ready for production. Highly recommend!
To store user guess data, I used Firebase’s NoSQL document collection database service called Firestore. The user quotas mean its great for small scale apps, and because it’s pay as you go, you don’t need to worry about getting a surprise huge cloud bill. Below is a summary snippet of a few pieces of Firebase-related code sprinkled around my application.
Once your API keys are set and initialized, you can add data to various collections. You can think of collections as file folders, and documents as the files stored within collections. For our app, every time a user clicks a team logo to guess, we want to store the result of that guess along with the rest of the player data in the “guesses” collection. You can explore your data within the console Firestore tab, here is an example of what my player guess data looks like:
To deploy and manage my Firebase cloud projects from the command line I used the Firebase CLI. To build our application with Vite, I run the standard build command:
npm run buildAnd then after that, simply run:
firebase deployFirebase will look into your ‘dist’ folder (or whichever public build folder you’ve specified) and deploy it to a public link you can view:
Python & ETL Scripting
I wanted to aggregate all of the user guesses and show a breakdown by player, so I wrote a simple Python ETL script to extract the data out of our guesses Firestore collection and then upload it to our PlayerAnalytics collection. The player stats page displays all this information along with a % correct metric for each player.
This write-up is already getting pretty long, so I won’t go into too much detail about the python scripting aspect of this project, and you can check out the GitHub repo in full if you’d like to see more detail. This was the quickest and dirtiest way I could think of getting this information, with the downside being that it’s manual and not exactly an automated data pipeline. In the future, I may do a scheduled export to Google BigQuery or utilize Firebase Cloud functions to simply maintain the data so this external code doesn’t have to be manually run by myself every time. Or maybe I’ll get bored and move on to my next project. We will see!
Conclusion
That’s about it, I hope you enjoyed a quick overview of my little NHL trivia app. Share it with your friends, or use the NHL APIs and tech I’ve shown here to make whatever kind of NHL stats/trivia project you want. Lastly, I want to share two big takeaways I’ve learned from all the time I’ve put into this project:
- Move Fast and Break Things: This was internal motto used at Facebook until 2014. I really enjoy this type of mindset, especially when you are doing small projects. There is no downside to breaking things on such a small scale like this, so don’t hesitate or be afraid. Just jump in, learn, get your hands dirty, and ship something cool. When I first started out with Firebase I was really cautious because I didn’t want to accidentally get a huge cloud bill, or for my test site to go down or something break after my first test release. Looking back at it, I wish I could have gotten over this fear faster, because once I did it just led to me shipping faster!
- The XY problem: The XY problem is asking about your attempted solution rather than your actual problem. That is, you are trying to solve problem X, and you think solution Y would work, but instead of asking about X when you run into trouble, you ask about Y. I went down too many frustrating rabbit holes with this project trying to fix certain things, when I could have just focused on the larger context and started my google searches/ChatGPT prompts with that first.