Monday, 22 November, 2021 UTC

A Players App Built in React And MUI

A Players App Built in React And MUI

Summary

Players app
Project to show the list of players from the Api Players, this a repository relative: Api Players repository.
View Demo View Github
Features:
  • Deploy Players: The first 20 players are displayed and can be navigated using pagination.
  • Search players: If the search text is an exact match to a player id, only this match is displayed. Otherwise it shows all matches using the nickname and status attributes.
It was built in react 17 together with the component library MUI.
Description of project structure
Note: Each component is inside a folder that contains its associated css, js and test file.
  • Inside the src folder:
  • components: In this folder are the components that are used to build the pages.
    • players: Folder containing the components related to players.
      • Card: The files that make up the component that builds the cards that shows the information of each player.
    • shared: Folder containing the generic components of the application:
      • Loading, Message, PaginationButtons and SearchInput: Components with descriptive names regarding the responsibility they have.
  • pages: Folder that contains the application pages, these are built with the components of the components folder.
    • players: Folder that contains the pages of players.
      • Home: Contains the files for the Home page. In this component, the view container pattern is applied where a component is established that will have the logic such as requests to the api or calculations, and another component that will only be in charge of presenting the information.
Instructions to execute:
  • Clone this repository.
  • Go to the root directory of the project.
  • Create file .env with this content: REACT_APP_API_URL =https://playersapinest.herokuapp.com/api/v1/.
  • Install the dependencies with this command: npm install or yarn install.
  • Execute the project: npm start.
  • By defect the aplication run in the port 8000, you can change it in the package.json file in the section 'scripts', you should find the key 'start' and assign the value PORT.
About Tests
In this application exist unit test in Jest and React Testing Library, these are the related commands:
  • Run all unit test: npm run test
  • Run coverage: npm run test:cov
Execute tests:
  • Execute all unit test: npm run test.
There are also end to end tests in cypress, you must create a file named cypress.json (for enviroments data) in the root of the project with the following structure: Where URL_PAGE is the url of the application.
{ "env": { "URL_PAGE": "http://localhost:8000/" } }
these are the related commands:
  • Open cypress: npm run cypress:open

... more @ reactjsexample.com

reactjsexample.com