A front end for my baseball data
Result:
New skills learned through independent study
Tools:
Python, Flask, HTML, CSS, Javascript, Next.js
The mission:
After successfully building a Jupyter notebook and delivering my Python project to class, I wanted to go one step further and build a front-end for it.
What I did:
- I took the Python code that I had created which produced lists and tables, and learned Flask so that I could to export data in a way that could be read by my website.
- This included cleaning the data, filtering it, sorting it and aggregating it.
- I then built a website using html, css and next.js to display the tables.
- The 'season records' page sorts the original dataset. The 'career' records aggregates the data so that each individual's statistics become just one row in the dataset. The 'era records' introduces a start and end date, then aggregates the statistics from between those two dates.
- I used next's ability to create dynamic URLs to create a page for every player in the dataset. There's thousands of players, so this would have been virtually impossible otherwise. Each player's page includes data from both the original dataset, as well as the aggregated data.
- Once I was happy with the apps I built, I had to learn how to deploy them online as my current web host didn't offer that functionality.
What I'd like to do better:
- I was in such a rush to get the Python talking to the website, that I didn't pay as much attention to the styling, so it's not as clean as I'd have liked, especially on mobile devices.
- It loads slower than I'd like. The original dataset has 86,000 records, so that's to be expected to a certain degree, but I'd like to learn ways to speed it up.
- There's a few quirks in the Python/Flask I'd like to iron out. ie, I wasn't able to rename the "stolen_bases" column to "stolen bases" without the code breaking.
The outcome:
This was my first Flask app, which I learned how to do by myself.
It was also my first Next.js app, outside of the CODELancashire turorial. I'm proud of the result.