Render the data in a meaningful way to the user

[wesleyneal346]

Description

The client side of the development is to display the list of animals and present different UI elements to allow the user to update, add or delete any item from the list.

• Display animals to the user
• Format the data to as per the instructions in the README: in a line when the screen is bigger than 600px and in a different way when the screen is smaller than 600px. Refer to the README for more details
  • I'm using Semantic UI and making the columns more or less equal. There still is some squashing on the bigger names.
• Add a button to allow the user to create an animal and add it to the list
• Add a way for the user to edit animals
• Add a way for the user to filter the list based on custom criteria
• Fix the infinite loop problem caused by the useEffect React hook

Caution!

This PR is draft only.

Blocker

This PR is blocked by the server PR (#9). I feel that PR should go first.

Definition of Done

• Code is formatted
• (all unit tests are passing) (please forgive me: there are no unit tests for this)
• test with PostMan to make sure all the routes are working as expected
• demo to the PO