bapairaew/open-fpl

Open-source Fantasy Premier League tools

Open FPL

Open FPL is a open-source web application that consists of various tools for Fantasy Premier League. It aims to complement the game experience and bring out the best from the team manager by providing statistics, data visualisation and other utility tools.

Overview

• app/*: Application code
• data/*: Data files and its generation scripts for that application
• common/*: Shared code accross the applications
• www/*: Landing page code

Running Locally

$ git clone https://github.com/bapairaew/open-fpl.git
$ cd open-fpl
$ npx lerna bootstrap

# Depending on what you have installed globally, you might have to install "yarn" and/or "ts-node" for the steps below
$ yarn data:init # This will take ~6+ min to download and setup remote test data
$ yarn data:dev # On one terminal
$ yarn app:dev # On another terminal

E2E Testing

$ yarn e2e:dev:server:app # Start app server with production build for testing
$ yarn e2e:dev:app # Start E2E testing

You can change app to other packages to test those.

Stack

• Next.js
• Vercel
• Chakra UI
• Cypress

Data

The project relies on static data from Fantasy Premier League and Understat. There is a script to pull the data from the those sources in this project. By default, the script will get the data one page at a time to avoid too much workload on those sources. So please be mindful with the set up if you are going to use it.

open-fpl's Issues

Customisable Player Card

Some info are more relevant than others for some players. Disallowing customisation implies that there is only one set of data that is better than others while in fact there are more ways to play the game. So we should allow users to pick what data they think it is more relevant.

Improve teams colour code and re-enble dark mode

Some teams have to the same colour codes (e.g. MUN and LIV) which makes it harder for user to distinguish them at a glance. The colour codes are current extracted from https://teamcolorcodes.com/soccer/premier-league-color-codes/ which is introduced this issue and moreover the data is. already outdated.

Might be better to just hard code these values base on their current year kit colour since they are changed only once a year.

---

Also somewhat related issue: dark mode was disabled because FPL colour codes and team colour codes worked quite baldly with base Chakra UI dark theme. Since FPL colour codes should be simple to adjust so once team colour is fixed this should be very trivial to fix. If not, create another issue to enable the dark mode.

Add explicit license to Open-FPL

Awesome project btw, thank you.

Just wondering which open-source license is, or would, your code base be under? You do not specify a LICENSE file at the root of your project.

May we assume that your source code not being private suggests that it may be used, freely, elsewhere?

If so, might I suggest you choose a license from the list found here?

You could simply copy and paste a suitable license from https://choosealicense.com/licenses/mit.

Also, there are several tools that can aid you in evaluating the current licensing of the libraries and dependencies that are being used within your project, for compliance. Here are a few examples of such software (no particular order):

https://github.com/lirantal/licenseye
https://github.com/mwittig/npm-license-crawler

Include Goalkeeper stats

Goalkeeper points rely heavily on their number of shot saves and clean sheets. Currently, Open FPL only provides only xGA which is not enough for managers to make a decision.

Lineup section in Team Planner page got cut off in Safari 12

Describe the bug
Lineup section in Team Planner page got cut off in Safari 12.

To Reproduce
Steps to reproduce the behavior:

1. Open Safari version 12 or use lambdatest.com or other browser simulators
2. Open https://www.openfpl.com/teams/4073
3. See the Lineup section on the right side only show half of one player card

Expected behavior
Lineup section in Team Planner is shown in page

Screenshots

Desktop (please complete the following information):

• OS: macOS Mojave
• Browser Safari
• Version 12

Additional context
Other pages work fine

Invalid team id should show error or warning instead

Adding profile with invalid team ID results a successful profile creation.

To Reproduce
Steps to reproduce the behavior:

1. Open settings modal by clicking "Set up a profile" at the bottom left of the screen
2. Input invalid ID (e.g. "This ID is invalid")
3. Profile is created successfully

Expected behavior
Error or warning is shown to tell the users that the team data would not be synced with FPL if they decide to proceed.

Players Explorer - Sort not working

Sorting doesn't seem to work in Players Explorer. Currently, it only works when sorting by Points.

Tested on MacOS, Chrome Version 92.0.4515.107 (Official Build) (x86_64)

Open FPL logo on side bar got reanimated every time route changed

To Reproduce
Steps to reproduce the behavior:

1. Go to https://openfpl.com/players
2. Click on either Fixtures and Team Planner link on the side bar

Expected behavior
Open FPL logo stays still

Open FPL sometimes not refreshed with latest data

The current data refresh mechanism is relying on a GitHub action that will commit a change on ./packages/data/last-updated.json which subsequently trigger auto deployment on Vercel. However, it is not guaranteed that open-fpl-data project would be deployed before open-fpl project, hence, this would result open-fpl refreshed with outdated data from the day before.

Cant access team planner page

I goto https://app.openfpl.com
I setup profile successfully (it gets my team name and rank etc)
I goto Team Planner and i get an error

_"Uh oh, something went wrong.

To be honest, we are not too sure what happened so please tell us what you did on Github
or Twitter."_

OS: w10 19045
Browsers: Edge 108.0.1462.54; Chrome 108.0.5359.125; Firefox 107.0.1

OS Android 12
Browsers: Firefox 108.1.0 and Chrome 108.0.5359.128

It worked fine last season but hasnt worked at all this season. I tried removing 2fa auth from my profile and deleted all browsing data from chrome

https://i.imgur.com/bntsFjs.png

edit: the players explorer page appears to be from last year. no haaland, no alvarez, nunnez etc. Origi is still a LIV player. Same on mobile and Desktop. Fixtures for current gameweek are dated 06/05/23 but are totally wrong e.g Brentford v Chelsea, Burnley v Everton.

Support smaller screen

Stats show that around 50% of the traffic are using phone to access Open FPL and currently Open FPL does not support those devices screen yet.

Sort Fixtures Difficulty Rating by multiple gameweeks

As a FPL manager, I would like to sort teams by FDR of multiple gameweeks, so that I know which teams/players would more like yield better returns in a longer term.

Automated testing

TBD

Reorganising Settings

Currently we have

interface Preference {
  name?: string; // Profile name
  teamPlannerPinnedBench?: boolean; // If team planner's bench section always visible
  playersExplorerDisplayOption?: DisplayOptions; // Display options for players explorer
  playersExplorerSortOption?: SortOptions; // Sort options for players explorer
  playersExplorerTableSortColumns?: PlayerTableSortColumnConfig[]; // Sort columns for table view players explorer
}

interface Settings {
  preference: Preference | null; // Profile preference
  teamPlans: string[] | null; // List of active profile's team plans
  fixturesTeamsOrder: string[] | null; // Fixtures page row order (shared)
  starredPlayers: number[] | null; // List of starred players (shared)
  customPlayers: CustomPlayer[] | null; // List of custom players (shared)
  teamsStrength: TeamStrength[] | null; // Overridden teams strenth adjustment (shared)
  // ...
}

Many of these do not make sense. Everything should be shared across all profiles but name and team plans.

Analytics events

As an app developer, I would like to know how the app is being used, so that I can make improve current features, and design new features based on real life data.

Player Statistics Explorer

• How many users actively use this feature
• Which search query are used the most
• How often users use each view option
• How often users use each sort option
• How often users use starred player
• How often users use compare modal

Team Planner

• How many users actively use this feature
• How many plans users have
• How many weeks in advance users plan
• How many custom players users make
• How often users use summary modal
• How often users edit their plan thru change log section
• How many users use captain planning
• How many users use chip planning

Fixtures Difficulty Rating

• How many users actively use this feature
• How often users rearrange the rows manually
• How often users use sort columns
• How often users adjust team strengths

Improve search query

Current search query does not support a simple use case where a user want to look for a player below a certain price. The current workaround is to use 0-XX range search which is not obvious to figure out.

Maybe use this lib instead: https://github.com/GitbookIO/filterable.

Revisit HTML semantic

At some point, HTML semantic were completely neglected and this ended up in quite a mess. In order to play nice with SEO, bots, and screen reader and for the sake of a11y. Please have a revisit on the whole application HTML semantic.

Some points you might want to start looking at

• TransferablePlayer is button but there are a lot divs inside
• Heading hierarchy
• Does radio group for each profile on settings modal make sense?
• Does Team Planner tabs semantic make sense?

Host main app under app.openfpl.com and landing page at www.openfpl.com.

People are linking to https://www.openfpl.com/players directly which is not really a nice URL.

Make it clearer that Fixtures table cells are clickable

There is no indications that table cells are clickable to show team strength chart/team power level comparison. Would be nice if we could provide a visual to let the users know that there is a feature hidden there without disrupting the current look and feel.

Improve player table performance

There is a couple seconds lag when scrolls up/down the table view in Players Explorer and Team Planner's transfer market which makes browsing experience not pleasant.

Try plausible.io for the analytics tool

Their cheapest plan is cheaper than https://usefathom.com but capped at only 10k page views monthly. Their features seem to be very comparable; Plausible seems to have cleaner integration with Next.js (https://github.com/4lejandrito/next-plausible) . So needs to find out about Plausible dashboard performance and usability.

Based on current stats, our page views are at 5k in 3 days, so we are looking at optimistically 50k page views monthly. Price at 100k is very close but Plausible would be cheaper if we are under 10k a month.

Plausible is offering - $6 for 10k, $12 for 100k, $20 for 200k, $30 for 500k, ...
Fa is offering - $14 for 100k, $24 for 200k, $34 for 400k

Auto remove outdated team plan transaction

Currently, outdated team plan transactions will be highlighted as outdated once the relevant gameweek has passed. This requires users to manually remove them from their plans. The experience would be more seamless if those transactions were removed automatically once become irrelevant.

General stats revisit

Open FPL aims to provide only relevant stats to its users without overwhelming them. General stats should give a manager enough information, at one glance, to make a decision if they want put certain players to their team OR to shortlist a group of players for further research on other websites.

Current assumption is that player form is the king so Open FPL provides stats from last 5 matches along with seasonal stats for baseline comparison. This assumption could be wrong so please have a revisit on this after getting enough feedback.

Note:
Other stats that might be useful: VAMP

New "Find your team ID" popover

We are providing a link (https://fpl.team/find-id) to show the users how to find their FPL team ID. The instruction does not seem to applicable for official FPL preseason UI. So either update the link, provide our own instruction, or find a crazy way to make it easier to get the team ID.

Make overflowing team planner tabs scrollable

Once there are enough tabs to fit the width of the screen, the tab content would started to be wrapped into multiple lines of text. This would result distortion in the UI.

Show Open FPL's FDR in other pages

As an Open FPL user, I would like to see my customised attack/defence home/away based FDR on other pages, so that I can actually make use of the customisation I provided and make a better decision.

"Live" data architecture

The current architecture relies mostly on static data which is only updated once a day. It is done this way because of two main reasons: limit workload on data sources side (Official FPL and Understat), and limit workload on Open FPL side since ultimately it aims to be lifetime free-to-use so minimising all costs possible would make Open FPL more sustainable in long term.

This, however, comes with a few unfavourable experience as users would have to wait until next update to get the latest data.

Lack of live data has a major impact on Team Planner feature since the user would not be able to get their latest team after the deadline has passed which usually happens hours before scheduled data updates. Another minor impact includes - player points data would not be updated until the next data sync.

There is a quick workaround by increasing the frequency of the data sync but that will not only increase unnecessary workload to sources but also could end up very expensive of our side since there is limit of both GitHub actions and Vercel deployment we can do without blowing the budget. Also there is a doubt that how much improvement this would be since there is a chance that the users have to wait until the next data sync which could be minutes, hours, or whatever our new sync frequency is.

Not only "Live" data architecture should fix the issues above but also would unlock features like Live Ranking, Live Score, Live Dashboard which should be very useful and enticing features to the users as it will help them enjoy the live game more.