This project was bootstrapped with Create React App.
Run npm install
To get you going, we've got a backend with photos! To get these, you're going to have to do the following:
- Run
json-server --watch db.json
- Visit
http://localhost:3000/photos
to confirm the list of photos.
If the command, json-server
is not recognized, you might have to run npm install -g json-server
Let's run the app with npm run start
or npm start
. You will be asked if to use localhost:3001, consent to that.
We have a React Photo Library. We want the App to show us a collection of all photos in the database and also keep track of which photos we like and add that to a separate list. We will be fetching the collection of Photos from the json server and render each one onto the page. We want to be able to render either a collection of all photos OR a collection of favorites photos at one time.
It might help to first draw out the component hierarchy
- Fetch the data from http://localhost:3000/photos
- Render each photo with the PhotoCard component.
- Each photo card will have button that says Add to Favorites, when clicked, will add to the favorites collection (i.e it should be rendered in the FavoritePhotosContainer component). The button text should change to Already in Favorites with the button being disabled. This can accomplished by adding a
disabled
attribute to the button element.
<button disabled className="ui button blue">Already in Favorites</button>
-
In the
Header
component, we have a div (button) of "All Photos", "Favorites", and "Add New Photo". By default, when the page loads, All Photos container should render with the collection of all photos fetched from the database. When Favorites is clicked, theFavoritePhotosContainer
component should render with only the photos that were favorited. When Add New Photo is clicked, theAddNewPhotoForm
should render. -
In the
FavoritePhotosContainer
, thePhotoCard
generated should have a button with the text "Remove from Favorites". When this button is clicked, it should remove the specific photo from the favorites collection. -
In the
AddNewPhotoForm
, when the form is submitted, a new photo is stored in the collection of all photos. (You might have to get creative if you're working with the ID)
-
Incorporate a
SearchBarComponent
underPhotoContainer
. The goal is tofilter
out the photos whose author matches what is being typed. This should be dynamic. (i.e As I am typing, the photos in the container are immediately filtered) -
Notice that
PhotoContainer
andFavoritePhotosContainer
seem pretty redundant. Any way we can reuse just one component?