NBA - ReactJS

Description:

• This project was completely created to test speed and therefore contains a lot of repetition of the code and the code is not refactored.
• Just to give you a basic idea of thinking skills, not to judge on the code efficiency. Definately refactoring would do that job.
• Check out the API index at http://localhost:3008. Note that the api uses json-server: https://github.com/typicode/json-server
• The webpack server and API server for the project can be run via npm start.

PART I - Basic Data Retrieval

1. Modify the Card component to take props for the player's name, image, and team.
2. GET the list of NBA players from http://localhost:3008/players and render a Card component for each of the players, using player data from the API as props.
3. Use http://localhost:3008/teams to get the name of each person's home world. (Note that the embed functionality of json-server has been disabled so that this is necessary ).

PART II - Controlled Data Fetching

4. Add pagination at the server level, loading no more than 10 results at a time (ref: https://github.com/typicode/json-server#paginate).
5. Make the provided SearchBar component work as a filter on the player cards, acting on any of their attributes, filtering at the server level and still paginating the results(ref: https://github.com/typicode/json-server#full-text-search).

PART III - Saving to the server

6. Add an edit button on the card that displays a form to edit all of the player's attributes except for team, that will be in a later step. (You can route to another page, display a modal, edit in-line, or do this any way you like).
7. Add a Save button to the form that updates the person's attributes by making a PATCH request to http://localhost:3008/players/[the player's id goes here]. Note from the json-server documentation:

   A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body.

8. Create a component that renders a <select></select> element For the player's team. Pass in the list of teams from the API as a prop to create options for the select element. Use each team's id as the value like so <option value=29>Utah Jazz</option>. Make sure that this saves correctly to the server

PART IV - Favoriting Cards

9. Add a favorite button to each card and a favorite count to the upper right hand corner of the screen. Clicking the button toggles favorited button state and increments/decrements the favorite count appropriately.
10. Make the favorite state save each favorite to the json-server by POSTing to the http://localhost:3008/favorites endpoint. Note that the json-server is schema-less so we expect you to invent your own schema for the favorite records. Load favorited documents on the initial page render in order to appropriately render the favorite counter and button states on page load.