Live updated fantasy premier league viewer for your teams, fixtures, dream teams and viewing player stats.
Table of Contents
This project was made as a quicker way for someone to view their FPL (fantasy premier league) teams and see how players are doing for any fixture in any gameweek. The application uses data from the fantasy premier league API. It also features live updates for fixtures and player scores. This was a great project to learn about the React Native framework, Expo, Typescript, React-Spring, Redux, React Navigation, Jest and the React Testing Library. A detailed explanation of how to use this mobile application is in the Usage section below.
This project utilized functional components, react native hooks and the redux design pattern. The RTK Query data fetching and caching tool made using fetched data across the application easy. Redux was also used for storing the main state of the team whether it is the team of the week, a user’s team, or a team currently playing in a match. React Navigation was used for easy addition of modals and themes. Test driven development (TDD) was used for the creation of services and helper functions. Testing was done using Jest and the React Testing Library. I chose to use this testing library as it leads to creation of tests that exclude implementation details. Also, AsyncStorage was used to keep data offline in a key-value storage system. Animations were created using the React-Spring library.
To use this application you download the apk file provided for Android or it can be ran on an iphone simulator with the second file provided.
Android APK: https://drive.google.com/file/d/1_s7WHL32YHSzi8upEHIwWaTNZ5_7saGd/view?usp=sharing
IOS Simulator: https://drive.google.com/file/d/16BImX4u05_2SflIkaiPMuXHymcoC80yy/view?usp=sharing
Upon starting up the app, it fetches data from the FPL API. If there is an error fetching the data, it will tell you to close the app and open it later. Once the data has been fetched it will take you to the main screen. Here you can view fixtures for the current gameweek at the top and switch the gameweek as well to look at upcoming and previous fixtures. At the bottom is a tab bar where you can you can select 'My Teams' to add your budget or draft team. To add your team, you need your team ID which can be found embedded in the URL when viewing your team on a web browser.
Example:
When on the points tab on the browser, the URL will contain your team ID: https://fantasy.premierleague.com/entry/ 8423283 /event/36
Once your team has been added it will be set as your favourite team and will be displayed initially whenever the app is opened. If you click on your team’s name, the standings will open for draft leagues and a list of leagues will open for budget leagues. You can navigate to any league and click on any team to view how they are doing. Other teams you are viewing can be added to your team list by using the team ID which is displayed to the right of the team name.
When viewing your team, there are two cards at the top that show if you are viewing the current gameweek. Press the left one to view additional info such as expected points, cost, form, selection percentage, and upcoming fixtures. The right one shows point totals, transaction totals, rank, and squad cost for budget teams.
Through the bottom navigation bar, you can view the dream team for the gameweek you are viewing, overview which will open a popup where you can see some info about the gameweek you are on as well as fixture difficulty ratings for every team sorted by average difficulty over the next 4 fixtures. The gameweek button expands the fixtures scrollview for easier viewing of all fixtures.
The players button will open a player table where you can see various stats for players, filter players by price range, minutes played, team, and position. You can also check per 90 values for applicable stats and watchlist players. Selecting a player will open a detailed view of there stats for the year and the history of the player as well. You can filter there stats for different gameweek spans and see there per 90 numbers. If you press the button on the left side of the view toggle button it will open a player comparison popup where you can add up to five players to compare their stats. You can compare these players during certain game spans and there per 90 numbers as well.
The last button on the bottom bar opens a team modal for you to manage your teams. You can add, remove, edit, and choose a new default team on start up here.
Finally, in the top right is a cog which opens settings where you can change the theme of the app and also has a credits tab, crediting the FPL api and icon sources.
See the open issues for a list of proposed features (and known issues).
Any contributions to this project are welcomed! To contribute:
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License.
Tarun Bola - [email protected]
Project Link: https://github.com/CodeByTarun/FPLApp