#06Rick & Morty: Double Fetching
60min

Overview

Practice fetching data from the Rick & Morty API and displaying character names along with their first episode titles.

Requirements

  • Fetch characters from the Rick & Morty API:
    https://rickandmortyapi.com/api/character/?page=${page}
  • Display the first 20 characters from page 1 when the app loads.
  • Include a Load More action to fetch and append the next page of characters.
  • For each character, perform an additional request to the character's first episode URL (character.episode[0]) and display that episode's title next to the character.
  • Render each character (with its episode title) using the provided CharacterCard component.
  • Handle loading state correctly (show a "Loading..." indicator while fetching).
  • Handle errors gracefully:
    • If fetching characters fails, display an error message.
    • If fetching any episode fails, ignore that episode and continue without breaking the app.

Notes

  • Fetch episode titles in parallel to improve performance.
  • Keep all fetched characters in a single state array to simplify pagination.
  • Make sure loading additional pages does not reset previously loaded characters.

Tests

  1. renders 20 characters from the API
  2. loads more characters when clicking Load More
  3. fetches episode titles for each character
  4. fetches episode titles in parallel
  5. shows loading indicator while fetching characters
  6. shows error message when fetching fails