How I made this

I made this by vibecoding with ChatGPT Codex. Although I have written a lot of code (including in Quarto and BASH used here), I can’t code in Python, which this workflow uses a lot. Before this morning I didn’t know how Github or Netlify worked. I made this going back and forth with the chatbot. The chatbot helped me make the workflow plan, write the first drafts of the Python, BASH, and Quarto scripts, and finally troubleshoot web hosting and domain management. It took about 4 hours with a lot of learning along the way. This page is the only page on the website created entirely by me.

There was a lot of debugging along the way. On a few occasions, I had to explain to the chatbot the likely source of an error before it could suggest code to fix it.

My process as scorekeeper

  1. I score your responses during the game in a Google Sheet.
  2. When I want to update the webpage, I run the BASH script publish.sh. Within 1 minute, the public website will update so you can see the latest rankings.

The back-end

  • You fill out your Google Form. Google creates a Google Sheet with all your guesses.
  • A Python script reads the Google Sheet and creates a scoring sheet that I can use to score your responses. I run this script once at 5:30 PM when the picks lock.
  • Using the scoresheet this script made, I score your responses throughout the game.
  • When I am ready to update the webpage, I run a BASH script publish.sh that does the following:
    • A different Python script “reads” my scoring Google Sheet containing results and your points. It converts that into a couple formatted CSVs that my website-generating scripts can work with.
    • (Earlier) Created a series of Quarto scripts that, when rendered, read the data in the CSVs and create the website.
    • The BASH script runs the Quarto rendering engine, which pulls data out of those CSVs to make the HTML files on my machine
    • The BASH script then pushes the website folder onto a Github repository
  • Then: My free account on the Netlify hosting service is “watching” the Github repository and updates the website whenever it sees that that repository is updated
  • …and earlier I went into the domain I owned on GoDaddy (gregdistelhorst.com), and created a subdomain “superbowl” which points to the address where Netlify is hosting.

The tools and languages used

  • ChatGPT
  • Quarto for writing webpages in markdown. Quarto documents can run Python code, R code etc. and put the output into a webpage.
  • Python. The scripts that read the Google documents and create spreadsheets are all Python scripts.
  • BASH Since I’m on OSX, it’s sitting on Linux and BASH scripts run commands in Linux. publish.sh is a BASH script that calls the Python scripts, calls Quarto to render the webpages, and then pushes the updated files onto Github
  • Github Software version control. (I barely understand it.)
  • Netlify Effectively free web-hosting
  • GoDaddy Where I manage the gregdistelhorst.com domain.