A simple web page to track a YouTube series I like.
Hey everyone!
This weekend I spent a few hours building a simple web page to track the “50 States” YouTube series, created by Francesco Costa and produced by Il Post.
DISCLAIMER: I have no affiliation with Francesco Costa or Il Post, I just really like the series and wanted to build something to track it.
Here it is: https://50states.fratellobigio.com/ (in Italian, as the series is in Italian).
The page is built with React. It has a map of the United States with the states colored based on whether they have been covered in the series or not.
Selecting a state will show a link to the corresponding video if it has been covered (or a message if it hasn’t) and some statistics:
- area
- population
- capital city
- most populous city
- population density
It also has a few stats about the series itself, such as:
- progress, with a completion bar (17/50 at the time of writing)
- date of first and last video released
- average number of videos per year
- the expected completion date based on the current pace, which at the time of writing is estimated to be around December 2030 (Francesco, if you ever stumble upon this, no pressure!).
Data is fetched weekly from YouTube and US Census Bureau APIs, and the map is built with Leaflet using data from OpenStreetMap. CI is handled by GitHub Actions with a weekly schedule and the page is deployed on GitHub Pages.
This was the first time I built something trusting entirely on GitHub Copilot. My frontend skills are pretty much non-existent, so I was curious to see how far I could get with the help of an AI assistant.
Overall, I am satisfied with the result, although I’d like to spend a few more hours polishing it in the coming weeks.
Have a look and let me know what you think! If you have any suggestions for improvements or features to add, feel free to reach out. I’m always open to feedback and ideas!
Till next time!