FPL Mini League Board

Using NextJS, Rust & AWS, I built a new Fantasy Football Mini League dashboard to show more updated data, league history and graph data

FPL Mini League Board

This project was created to create a better league board and dashboard for my mini league.

Architecture Diagram:

The backend is a Rust Lambda, which fetches data from fpl api endpoints and logs to CloudWatch. The front end is deployed through AWS Amplify when a commit or is made to the main branch in the GitHub repository.

Current Standings

Improved Table

The main improvement I wanted from this table on the official fantasy site is to have a table that updates in real time. On the official website, the table updates hours after the last games on a given day. But, I look at the table most often when games are on or just finished, to see how the new points have affected the standings.

I use a fpl api end point to check if the table is going to be updated today. If it is and hasn't been updated yet, I use another fpl api endpoint to get each league member's current points and return these points as the current standing. I then have to resort the standings in case the positions have updated.

Graph

I used the graphing library recharts, https://www.npmjs.com/package/recharts, to plot data of each league member per gameweek.

Interesting note from this graph of points per gameweek, all the games in gameweek 7 were cancelled when the Queen died.

Cup

In the fantasy app there is no tournament bracket view of the cup, so I decided to also implement this. I used react-brackets, https://github.com/mohux/react-brackets, to render the cup data as tournament brackets.

History

In the fantasy app you can see your own history, but this is limited to your points in your previous seasons. Below is an example:

The fpl APIs only allow you to retrieve a manager's total points for previous seasons, so I first implemented the rust lambda to return an array of past seasons, each element has the manager and their total points for that season. On the front end, I use this data to show a leaderboard, history and detailed history.

Since this site is used for just one mini league, I decided to save the current season's data to the repository, so the graph and cup could be rendered in the future. At the end of a season, the data will have to be committed to the repository to view detailed data about the season in the future.

Skeleton loading

I implemented skeleton loading into this project: