Build A Fantasy Premier League App REST Api ReactJS, NodeJS, ExpressJS

Necessary Apis:

https://fantasy.premierleague.com/api/fixtures/, https://fantasy.premierleague.com/api/element-summary/1/, https://fantasy.premierleague.com/api/event/1/live/, https://fantasy.premierleague.com/api/me/,

https://fantasy.premierleague.com/api/fixtures/

https://fantasy.premierleague.com/api/bootstrap-static/

https://fantasy.premierleague.com/api/my-team/

#Features:

• User login/authentication, Protected Route(s)
• View the important information of your own selected players that you have in fpl.
• The match fixtures.
• Just one click away from seeing all the match fixtures.
• Check your player’s opponent for any game week.

Most of the APIs are available publicly. The data access for my team and some other APIs are for logged in users only. You have to be logged in to https://fantasy.premierleague.com/ to get your private data, where you can get the JSON data for your selected team. Some of the statistics are available for your team from the links above. Live data are updated frequently. For example, the number of goals scored from Game Week 1 is updated in “stats” accessible using the link: https://fantasy.premierleague.com/api/fixtures/?event=1.

The effective way to fetch the data and display it to the public is explained in this article. When the data get bigger, it is difficult to display real-time statistics to the UI for the public. In order to effectively retrieve and display the data, we need to consider a few factors.

1. Use Async Await.
2. It is better to fetch the live data and frequently write/overwrite the .json file using for example the “fs” file system library. https://nodejs.org/api/fs.html
3. Then display to the app from the JSON file not directly from the response data that we received from the URL.
4. Use fetch/Axios.

5. It is better to fetch the necessary data in separate react components than fetch all in one file and perform Promise.all. Because, if one error occurs in getting the data, it’ll affect other features as well.

6. I have a server.js file for handling the data, get, and post requests. Express is used there. and in order to activate the port 8000 for backend and display the data to UI with port 3000 default on create-react-app, use #concurrently in package.json file.

“start”: “concurrently \” nodemon server\” \”react-scripts start\” ”,

WHY DID I START THIS PROJECT?

1. I wanted to have a better view of my players on the pitch.

2. I did not like the view that I needed from fpl site as many of you have the same issue and wanted to have a perfect view of your frequently visiting site.

3. I wanted to see the opponents of my players in every single game weeks until the game week 38 (last).

4. We all want to see the really important information right in the beginning.

5. We all avoid navigating a lot on the same site.

6. Some of the information provided from FPL site is not relevant to us.

An in-depth story will be published once the optimized version is built.

HOW TO RUN LOCALLY?

• git clone git@github.com:oceankrish76/fantasy-premier-league.git
• cd fantasy-premier-league
• npm install
• npm start / yarn start