About The Project

As a lifelong Everton FC fan, I applied for a Junior Data Engineering job recently and wanted to build a project that can showcase my skills and enthusiasm for the role. The Everton FC analytics dashboard I built is a football statistics platform with Next.js, TypeScript, Recharts for the frontend and Python with FastAPI for the backend. I built this project to showcase my data engineering skills. The dashboard pulls current match data, player data, club data and premier league standings in the 25/26 season. It allows people to explore the clubs current stats in the season but also with visualisations of the data, I've put together a bar chart, pie chart and line graph displaying goal metrics and match outcomes. The current key statistics show matches played, wins, draws, losses, points, goals for, goals against, goal difference, xG, xGA.

Players stats include their current positions, matches played, minutes played, goals and assists, but also details if the player is injured or not by a badge. Players can be searched by their name or their positions played. Matches include the matches played this season with their scores and also the result. Standings are just the current Premier League standings table.

Key Features

Club Statistics - Real-time data integration showing current season performance updated after each match.

Trends in data - Visual representation of season comparisons and performance tracking.

Challenges & Solutions

Learning OpenAPI & FastAPI

Coming from a primarily NodeJs background, I had to learn OpenAPI & FastAPI specifications and documentation to build a robust backend system in Python for data processing & CRUD operations. I built different CRUD operations for pulling club, player, match and standings data but for also pushing new data that has been updated and added.

Python Backend + Next.js Integration

Integrating a Python backend with a Next.js frontend presented some challenges specifically around API communication and CORS policies. The solutions for the API communication was implementing proper API routes within Next and creating custom types in TypeScript that matched the fields that the data returned once pulled from the API.

Server Boot Times & Hosting Costs

The biggest hurdle was the backend server due to the cold boot times on the free tier which turned off the server after 15 mins of inactivity but it would take significantly longer to boot up and showcase the data which created a poor user experience. I optimised this by implementing caching on Next.js to cache the data but also upgraded the server to stop the cold boots. I would explore different options such as serverless deployment options such as AWS.