Coding exercise to show dummy statistics about football teams, players and games

• React bootstrapped with Create React App
• Typescript for type checking
• Axios for Promise based HTTP requests
• Reach router for routing
• Ant as a styling library
• Moment for handling dates

You can view a live version here.

   git clone https://github.com/JonathanHalpern/football-statistics
   cd ./football-statistics
   yarn or npm i

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

I orginally made a fresh query to the API on each page, followed by a second query to get further information
e.g. to get the data for a particular player, I sent a post with a with a body containing the player's id to

/api/teams/players

This contained a history array of objects which had team_ids rather than team names, so I had to make a second query to the teams api

I considered setting up a GraphQL server. This would bring the following benefits:

• I would only need to make one query each time (avoids under fetching)
• I would not fetch unneeded data (avoids over fetching)
• My front end would be built in a more sustainable pattern, not dependent on the shape of the back end
• I could later add authentication on the 'add a game' endpoint

However, I decided that a more lightweight approach would be to fetch all the data on application load and create my own data store. I felt this was appropriate because the data size was small, it was unlikely to become stale and it would make the UX seameless (after an initial load).

I chose to use Context and React's new 'hooks' feature to share the data.

Having completed the exercise, I feel that I brought too much logic into the front end. This would have been better abstracted to GraphQL.