Harry Potter Characters

While my son was into Harry Potter, it made me wonder if someone had made some kind of Harry Potter API for devs to play with. I found hp-api.herokuapp.com and decided to do a little drill with it to output characters within a NextJS-driven page.

👉 View the Harry Potter character pagepotter characters screenshot

While doing so, I realize I have a gap in my lab submdomain capabities. lab is for a static html, but I wanted to have some exercises driven by NextJS, so I decided to create a 'nextlabs' subdomain.

Other things of note:

  • The api uses http for the image paths instead of https, even though https does work. I could use a string replacement to fetch the https version, but maybe I should just do a fork of the api instead, especially since:
  • The api doesn't have a unique id per character object, unless I wanted to use the image path as that identier, which doesn't make sense either.

Perhaps making a fork of the api, adding the unique id myself, and changing the chracter image path values to use https, would be a good exercise as well.

Edit: 2021-05-03

As it turns out, you can't generate static pages on NextJS build if the source of the data is from the api of the very same build, so I moved the data to yet another app, served at https://apinext.twhite.dev/api/potter.

As part of the move, I added a slug key (such as harry-potter)to each character object that serves as both the url slug for the character, as well as a unique identifier. I also parked the images on an s3 bucket I control, and updated the image paths to use https.

May 1, 2021🏷labharry potternextjsapi