There is a new website called Flatapets dedicated to helping pets find new homes, but they need our help! Our job is to implement a React application to help organize their data!
- Run
npm install
in your terminal. - Run
npm run server
. This will run your backend on port4000
. - In a new terminal, run
npm start
. This will run your React app on port5000
.
In our React application, the data about the Pets is in the db.json
file. This file will mimic an API that follows RESTful conventions.
Make sure to open http://localhost:4000/pets in the browser to verify that your backend is working before you proceed!
The App
component holds two children: Header
and PetPage
. The PetPage
component holds three children: NewPetForm
, Search
and PetList
. These components have some starter code in them already. The PetList
component will render all Pet
components.
All of the code to style the page has been written for you, meaning that you should be adding to the code rather than editing it; however, if your finished product has some styling issues, don't worry too much about it.
As a user, I should be able to:
- See list of pets on the page, using the
Pet
component. ThePet
component should display the pet's image, name, and conditionally render whether it is from a pet shop or from the wild. If the pet is from a pet shop, the component should say "From a Pet Shop", otherwise it should say "From the wild". - Click on the image of the pet in the
Pet
component and see the animal_type in place of the name. If I click on the image again, the animal_type should again be replaced with the name. If I click on another pet's image, it toggles that pet's name independent of any other pet's. - Submit the form in the
NewPetForm
component to add a new pet. This should add the new pet in your React app by updating the appropriate state and should additionally persist the added pet to the JSON Server database. - Type in the
Search
component and see the list of pets whose name or animal_type match the text in the search bar. If there's no text in the search bar, all the pets should be rendered.
Example Response:
[
{
"id": 1,
"name": "Fido",
"fromPetShop": true,
"image": "./images/dog.jpeg",
"animal_type": "Dog"
},
{
"id": 2,
"name": "Kitty",
"fromPetShop": true,
"image": "./images/cat.png",
"animal_type": "Cat"
}
]
Required Headers:
{
"Content-Type": "application/json"
}
Request Object:
{
"name": "string",
"fromPetShop": boolean,
"image": "string",
"animal_type": "string"
}
Example Response:
{
"id": 7,
"name": "Goldie",
"fromPetShop": true,
"image": "./images/fish.jpeg",
"animal_type": "Fish"
}
If you have the extra time, these Advanced Deliverables are a great way to stretch your skills.
You may have to add additional elements for these features. Feel free to style them however you see fit!
As a user:
- I can update the name of a pet and still see the updated name after refreshing the page.
- I can delete a pet when clicking the "Adopt Pet" button and it is still gone when I refresh the page.
Required Headers:
{
"Content-Type": "application/json"
}
Request Object:
{
"name": "string"
}
Example Response:
{
"id": 1,
"name": "Frank",
"fromPetShop": true,
"image": "./images/dog.jpeg",
"animal_type": "Dog"
}
Example Response:
{}