/tempo-test

Primary LanguageTypeScript

Teams Management System - Tempo.io Test

This project was bootstrapped with Create React App.

Available Scripts

Use node version 14+.

In the project directory, you can run:

npm start

npm test

Solution

  • Used React, Context API, Styled Components, React Testing Library, React Router Dom, React Icons and other minor packages.
  • Handling state with unique Context API to avoid messy props and using the separated concern of business logic.
  • Created a logic to find the user's of selected team, combining two arrays and ES6 arrays methods.
  • Created a list of teams which is the main route of app.
  • Created a team page to show the team members, filtering the list of users by team id.
  • Created a filter with logic using ES6 and best JS practices to handle with different pages and filters.
  • Created two lists of teams and users looking for better performance on filter records.
  • Created a reusable component of ListItem to use with Team and User, including conditional rendering of item action.
  • Created a reusable component to handle with loading indicator when the app is finding some API data.
  • Created a reusable component to handle with empty lists.
  • Created a reusable component to handle with page title.

Testing

  • Created tests of all pages mocking values of Context.
  • Created tests of all reusable components with different values of props.