IGDB API + FullCalendar React Component

Starting off, I just want to say, it’s easy in the course of building something, to forget to celebrate the small wins. This blog entry is a reminder for myself to celebrate the small wins.

After figuring out how to make API requests with the IGDB API and format the response in JSON by date, my recent task has been to find a way to visualize the API response in a browser. Because I want to view them in monthly increments (as a proof of concept), I’ve been poking around for a react calendar component and happened upon FullCalendar.io.

Here is the result of the past week:

TL;DR: in the gif above, I’m clicking the next month button, which is sending a request to the IGDB API, displaying a loading spinner, and populating a list of video game releases for the next month (August, then September)

General process of how I got to the above (mostly front end stuff):

• installed the fullcalendar npm package locally and implemented a vanilla component in a .js file
• experimented to see how it would display a list of json events
  • used a json file with a list of video games for June
  • installed moment.js to perform some date conversions
  • mapped over game data to create a format that the react component recognized
• created a listener for the next + previous buttons (so I could make API calls for game releases)
  • this took more time than I’d like to admit 😅
  • ended up creating a listener for a click event, updating a hook, and making an API request based on the hook value change
• installed axios to facilitate the API request
  • I spent a few hours running into a 404 error with my axios requests. I thought the problem was with my server-side logic, but it turns out I was missing a front-end proxy to my django code! Oops, just glad it didn’t take more time
• rendered react-spinner component while waiting for the API response, adding some formatting to make it look pretty-ish
• implemented useEffect() hook to set the month on page load (with an empty dependency array) to make sure I was loading data for the current month

Observations + open questions

• The API request + response process could be improved
  • Maybe I could implement a caching mechanism to reduce load time
  • Could also improve the python API request logic for added efficiency
• Not sure how to scale authentication for lots of requests
  • the IGDB API requires auth to use (had to register my app with Twitch, the maintainers of the API) and while fine for an individual user, a bunch of users and a bunch of requests could really complicate the process
• Need a way to prioritize display of popular games
  • there’s no inherent way to do that in the current iteration of the API (which they explain is a result of a subjective and changing definition of popularity)
  • maybe there’s a way to scrape several sites for anticipated upcoming releases and then aggregate +/ assign a weight to those games?
• I still feel really inexperienced with Django (and python classes). Familiarity and comfort will come with time and experience, but I feel like I’m barely scratching the surface in terms of comprehension and functionality

What’s next

I have been meaning to get a private repo started (oops). Now that I have this much working locally, I think now is the time. It might also be time to get this running in some docker containers.

In terms of functionality, I think the next couple of things I’m curious to implement are filters for platforms and customizing the display of events in a given day.