I am trying to build up a portfolio of personal projects, so I am attempting to take a stab at creating a React App that is using the EA NHL API to keep track of information on my club team.
EA has an API that people can use to look up recent game results, member stats, and club information. This immediately made me want to design a site for my friends' club team. I went straight into Figma and had a blast designing a navigation, a scoreboard like you see on major league sites (MLB, ESPN, NHL, etc), and a rosters page. The more I use Figma, the more I learn how much I enjoy UX/UI design.
After finishing a couple of wireframes, I decided to get to the dirty work of building my React app. I am using Vite to host the server locally. I had to go back and re-watch some tutorials to get my new app up and running, but ultimately it was pretty easy. I was good to start coding my homepage within 15-20 minutes of googling and watching videos. This is always my least favorite part of starting a new project.
Wanting to dive right into working with the EA API, I began styling the scoreboard. I used hard-coded data to get the HTML structure and CSS just right before spinning wheels on populating the component with live data.
Once I started testing my API calls, I immediately ran into an issue with CORS authorization. After some Google-Fu, I downloaded a Chrome extension that helps suppress these errors while working in a local dev environment. But, my errors didn't end there. It turns out, that even though you can enter the API calls into your browser and get the JSON printed out, EA does not allow unauthorized API hits from personal apps and sites.
To get around this, I manually copy & pasted the JSON into a local .json file, and am hosting it in the same folder as my app. The Recent Games API only returns the most recent 5 games, but it was enough to get started. The API actually returns an impressive amount of information. My long term plan is to build a "master" JSON file where I can add a new file every week or so to build up a database of all recent games. Manually uploading is going to be the way to go for now, I don't think EA will ever make the API fully public.
Anyway, I just got the basic "bones" of my scoreboard component laid out, and fully populated with data from the API/local JSON file. While not overly impressive, I am proud I was able to get here myself.
I am posting this as a way to keep track of my progress on this project and hold myself accountable. I am hoping that by the end of the month I can have the full-site up and hosted on a real domain!
Top comments (0)