Let's build a React app that allows the user to search images and star some as a favorite.
To build this app we are going to use the Imsea API.
The endpoint you should use is this one:
California -> https://imsea.herokuapp.com/api/1?q=california
White Cat -> https://imsea.herokuapp.com/api/1?q=white%20cat
And it returns JSON with a following schema:
Write an app that contains a text input and a search button. Every time the user clicks the button you should call the API endpoint with the search query and show a list of all the images.
Implement a loading state with the text
Loading... for when the app is waiting for the API request.
Refactor your app to use components. You should have the following:
<SearchBar /> component, containing the text input and the search button.
<ImageCard /> component, containing a returned image
<ImageList /> component, containing a list of
<ImageCard /> components
Add a button with a star icon to every image on the
<ImageCard /> component that adds the image to a favorite list. Use the following icons:
Show the message "There are no results for that query, try with another one" if the returned images list is empty.
Persist the favorite images using the localStorage web API, so that our favorite selection is not erased every time the page is refreshed.
Refactor your app to use multiple pages. You should have a
homepage, where the search input and button are shown next to the results, and a
favorites page where the user can see the favorite images list.
/: Homepage containing the input and search button.
/favorites: Page showing the list of images the user has favorited.
Add a cookie banner component saying that your app doesn't store any user data. Besides some text, your
<CookieBanner /> should have a button to accept. You should show the cookie banner to every user who hasn't clicked the accept button yet. To persist if a user has clicked it yet or not