The app gets stats about football matches. It has 3 filters: Team, Player and Match. Once Player and Match filters are chosen, the stats are presented in a radar-chart with some details about the game and the player.
JavaScript, React, React Hooks, Recharts, SCSS, SCSS Modules, localStorage HTML, Webpack, Babel, Eslint, Stylelint.
-
First search with refresh:
-
Search and Radar Chart
- Open the repo in your code editor
- Install NPM packages
npm install - View the project in the browser:
npm run start
The Chart is implemented using Reacharts library. Once fetch request is successful and the results are received, a Radar Chart is rendered on the page showing stats for a match. The polygon area of the chart gets updates according to the data received and the colour of the area is team's colour.
There are 3 available filters: Team, Player and Match. Once any of the filters is chosen, the other select-options are updated based on the chosen filter, e.g. if option "England" is chosen in filter Team, the filter Player will only show players of that team and then once the player is chosen, the filter Match will only show matches related to that player, etc.
In order to clear the choice, the user can simply select "All" option of select.
All the 3 filters can work both individually and together.
Once at least 2 filters are chosen (Player and Match), the Search button activates, otherwise that button is disabled.
For drop-down menu, the options are taken dynamically from the mock-data provided using JS array methods.
As soon as data is fetched successfully, the results of the search are saved in the localStorage and in case the window is refreshed, the filters and stats chart are populated from localStorage.
SCSS and CSS Modules
In addition to current code, I believe the following implementations would be beneficial:
- The data with an array of products can be fetched from an actual API rather that from a mock file.
- Additional testing with Jest could be implemented in order to check the logic of the filters and other utilities.
- Responsive design can be implemented to the app.