Skip to content

README.md

Latest commit

 

History

History
89 lines (69 loc) · 8.21 KB

README.md

File metadata and controls

89 lines (69 loc) · 8.21 KB
Raw

Frontend

Typescript/React frontend, copy .env.example vars in .env file (you should create it) and ask me (or check email) how to fill it.

Structure

In the main folder you will find all the configurations/requirements files, eslint configuration, jest and cypress config for tests, (etc.) your main focus should be on the src folder.

Src

In the types file you will find basically every type of the FE application, this file is divided in 3 main section and an Utils section.

  • Forms: React-Hook-Forms form interfaces stores the interfaces of the forms handled by react-hook-form
  • API: Contain DTO & BODY types that are needed for API comunication
  • Redux: Redux State Store contain types of the redux store
  • Utils: Types used for utils

Controllers, Components

With Controllers i mean a React components with the main functionality of praparing the data for the Components, and handling their states.

main controllers

  • Router controls the login/logout state and redirect the user to the correct component of the Single page Application.
  • Home is a container for the 2 main React components of the application:
    • LeftMenu that controls the states of the application that are rendered by the Main Page.
    • MainPage The main page of this single page application that can renders one of these five Controllers: Players, Teams, Matches, Stats, User.
  • Error Used as an ErrorBoundary this Controller catches every unhandled error and "tries" to gracefully handle it, i usually like to use this approach because i can centralize the log, and i can be sure to log every error (with the implemented logger), this approach gives, to the user, the impression that every errror is handled by the application, and that he can always safetely move back to home/login page. This Controller renders Error Component that is used to render handled/catched Exception too (same UI/UX).

data controllers

  • Players Renders the Table of Players and the buttons to have the CRUD operations on players data, to edit/delete a player (or browse its stats) you need to select its checkbox in the table.
  • Teams Renders the Table of Teams and the buttons to have the CRUD operations on teams data, to edit/delete a team (or browse its stats) you need to select its checkbox in the table.
  • Matches Renders the list of matches, divided per status (ongoing, preparing, ended). Only one match can be in ongoing mode and this match is the only one that can be updated (and browsed) Live. In this page the live matches will be updated live with SSE notifications.
  • Stats Renders the stats for team and players (strikers and defenders) via a simple select and a Table.
  • LiveMatch Renders the live Match page, the live match will be updated live with SSE notifications.

data controllers (extra)

  • Player This page shows the Player Page, where you can browse the player Stats.
  • Team This page shows the Team Page, where you can browse team Stats and the team matches.
  • User This page shows the user page. Updated in next release :This page will store user favourite team color defining the mui palette.

shared components

  • Image Layout used to render logo, error pages, and basically every images you want to add.
  • Custom Table used to render data in a table, before calling this component you should use an util function to extract and normalize the data you want to display in columns and rows that can be read by this component. One table multiple uses.
  • Custom Text Modal and Custom Option Modal paired with Confirmation Dialog used to render all the form fields for CRUD operations on App data, every form component it's used with different kind of data.

Hooks

Custom hooks of the webapp

  • FE Logger implementation, the dev implementation with console.info, console.error can be extended with the desired prod Logger
  • SSE notification to intercept BE SSE events and notify the user. When the user visit Match page (or any live match page) a SSE network connection will be opened, this connection is similar to a websocket but in SSE the BE is the only one with the ability to send a message in this stream. When this hook intercepts the message type 'goalScored' this will add a text notification and a goal. The goal will be added to the team only it the id sent in the SSE stream is correct, the text message will be shown anyway.

Store

Here is a setup and export the redux store, handle load/save state to local storage.

  • player here we handle the selectors, reducers and thunks of the player store, handles player list (for player list table), player (player page) status (status is meant to render loader, error page or desired component). When a CRUD operation is performed playerList will be updated accordingly, player prop will update when a user browse the player page (data only in read mode).
  • team here we handle the selectors, reducers and thunks of the team store, handles team list (for team list table), team (team page) status (status is meant to render loader, error page or desired component). When a CRUD operation is performed teamList will be updated accordingly, team prop will update when a user browse the team page (data only in read mode).
  • match here we handle the selectors, reducers and thunks of the match store, handles match list, and status (status is meant to render loader, error page or desired component). When a CRUD operation is performed matchList will be updated accordingly. For Live match page i didn't added another property "ex. match" because SSE event will update the matchList prop directly.
  • stats here we handle the selectors, reducers and thunks of the stats store, that contains the 3 requested statistics: team rankings, strikers and defenders.
  • users here we handle the selectors, reducers and thunks of the users store, that contains mainly user email and token.
  • util here we handle the selectors, reducers and thunks of the util store, that contains mainly the status of the user selection (from LeftMenu).
  • sse is where we handle sse match messages shown on Matches and Live Match component.

Utils

In this folder you can find:

  • f general utility function and project tested utils.
  • ls handles the local storage interaction and its encrypt/decrypt.
  • store where i handle loading/saving state on page/reload and the initial state of the whole redux store.
  • config environment variables loading from env file.

Api

Is where I created an axios instance and implemented all the frontend API calls to node backend.

Cypress

Utils to support cypress tests suite.

Translations

The it and en files represent the i18n for these languages, with the Language Selector Controller you can switch between italian and english.

Images

Is where the images/logos are stored

Tests

To run the cypress automated tests, you need to open a terminal in the frontend folder and run the command:

yarn run cypress open

This will open the cypress integrated browser and you will see 2 options:

  • E2E Testing
  • Component Testing

You can browse both options and run the tests i added. loom video