Building a Stats Website for a Sports Club

This article gives a introduction on how I (a beginner developer) built a working stats website for my sports club. Hopefully it inspires others to make something similar and I'm hoping for feedback and direction on what to do next.

Contents

1. Introduction
2. Backend Setup
3. Frontend Setup
4. Hosting
5. Result and Issues
6. Future Improvements
7. Summary

Introduction

I joined an amateur football club consisting of 8 teams in my local area and after playing a season decided to start tracking some basic stats such as appearances, position played, goals scored, assists and goals conceded. I did this by getting each of the teams captains to send me a message after each game with each players stats.

Initially I created an Excel Spreadsheet to store this information and soon developed a number of macros using Visual Basic to automate and power the sheet into quickly providing me a report on the top players of the week and overall player stats which I could then screenshot and post onto our club WhatsApp group and Twitter account.

After two years of doing this, I decided I wanted to build these stats into a website to allow all players to view the stats whenever they wanted.

I learned the basics of HTML, CSS and JavaScript using online resources such as FreeCodeCamp and after a couple of months of practicing for an hour a day or so, I decided to just start building.

Backend Setup

The backend of my site is simply Google Sheets.

As I already had my data from past seasons stored in an Excel format with formulas doing the heavy work of summarising overall player and club stats, I wanted to keep the format as similar as possible.

I moved all of my data across into Google Sheets and then published each sheet containing the data I wanted to display on the site using "File > Share > Publish to web", selecting the sheet and publishing as a CSV.

I took the published URL and used it in my JavaScript functions by utilising the CSV parser "Papa Parse", which then provided me an array of objects for the data which I could use on the site.

Papa.parse(nextFixturesSheetURLCSV, {
download: true,
header: true,
fastmode: true,
complete: getHomepageTabNextFixturesInfo,
});

My site uses this process to import 9 sheets of data in to be used in the frontend.

Frontend Setup

I built the front end using HTML, CSS and vanilla JavaScript as this was well before I had read further into frameworks and other useful tools like SCSS etc.

The site was designed initially for mobile and can look slightly odd on desktop without much focus given to that yet.

I built the site as a single page application, using a tabs component from web.dev to split the site into swipable sections.

The majority of the site is displaying data such as full club, team or player stats but I am particuarly proud of the Team Of The Week tab, where I replicated the Premier League's Fantasy Football scoring system to recreate our own club TOTW, using SVGs to create the Dorkinians kit and pitch behind. Users can click on the players to see a breakdown of their scores and go back and see any TOTW since records began.

Hosting

I initially hosted the site on GitHub until I decided that I wanted my own custom URL before releasing it to the club. I therefore bought the domain name "dorkiniansfcstats.co.uk" and used BlueHost to host my files.

I have a very basic file structure so that it is easy to copy all files across into BlueHost when deploying updates and recently began using the Minify plugin for VSCode to produce lighter ".min" files.

Since then however, I have continued to develop the page back in a new repo in GitHub and have set up an automatic link to a Netlify page.

Result and Issues

The final page can be found at http://www.dorkiniansfcstats.co.uk/.

I'm really happy with how it came out, and it fulfils the vision I had in my mind years ago when I started out collecting stats.

Whilst the page was well received, I know there are many improvements that can be made.

By using Google Sheets as my backend and using Papa Parse to get the data to the frontend, I've created a relatively slow loading page. Chrome's Lighthouse report indicates a poor performance score of 17, highlighting the time to being interactive as around 7.7 seconds.

Future Improvements

I'd like to tackle the speed issues that the site faces, and look into understanding how I can use HTTP/2, avoid excessive DOM sizes and improve the order and speed of my initial loading functions.

Whilst happy with the Google Sheets backend for now, it would be good to consider other possible ways of achieving the same data management and data storage.

I would like to rebuild the page using something other than vanilla JS and I have begun learning React for this reason. I also wonder if I should use NestJS which I've been reading about.

I'm also considering switching from hosting the main site from BlueHost to Netlify as the later seems easier to understand (and cheaper). If anyone has any suggestions on this I'd be greatful.

Summary

I really enjoyed creating the site and having a clear idea of what I wanted to build has helped me start out learning web development.

Thanks for reading and I'd love to hear any questions or suggestions!