Favorite image search

  • React
  • Exercises
  • Favorite image search

React exercise number 11

  • Async Requests
  • Components
  • JSX
  • Lists
  • Router
  • useState

Let's build a React app that allows the user to search images and star some as a favorite.

Details

To build this app we are going to use the Imsea API.

The endpoint you should use is this one:

GET https://imsea.herokuapp.com/api/1?q=${encodeURIComponent(query)}

Examples:
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:

{
  "image_name": "california",
  "results": [
    "https://tse1.mm.bing.net/th?id=OIP.IWw-KoS5F8Ndyei2CZEjtgHaE6&amp",
    "https://tse1.mm.bing.net/th?id=OIP.IWw-KoS5F8Ndyei2CZEjtgHaE6&amp",
    "https://tse4.mm.bing.net/th?id=OIP.Ed4KrR6abSjqUxuws9najAHaE7&amp",
    "https://tse4.mm.bing.net/th?id=OIP.Ed4KrR6abSjqUxuws9najAHaE7&amp",
    "https://tse3.mm.bing.net/th?id=OIP.lToKd1xjFyfWhkFMuVNCnQHaE8&amp"
  ]
}

Exercise

Step 1

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.

Step 2

Implement a loading state with the text Loading... for when the app is waiting for the API request.

Step 3

Refactor your app to use components. You should have the following:

  • A <SearchBar /> component, containing the text input and the search button.
  • A <ImageCard /> component, containing a returned image
  • A <ImageList /> component, containing a list of <ImageCard /> components

Step 4

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:

Step 5

Show the message "There are no results for that query, try with another one" if the returned images list is empty.

Extra

Step 1

Persist the favorite images using the localStorage web API, so that our favorite selection is not erased every time the page is refreshed.

Step 2

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.

Step 3

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