Rick And Morty Characters Viewer

Build a React component that fetches and displays a list of Rick and Morty characters from the API.

This project teaches working with real APIs, React state, filtering, sorting, and memoization, while also practicing dynamic UI updates.

Things to do

• Fetch character data from https://rickandmortyapi.com/api/character using fetch or axios.
• Display each character in a card with: Image, Name, Status (Alive/Dead/unknown), Species
• Add a search input to filter characters by name.
• Add a status dropdown to filter characters by status.
• Add a sort dropdown to sort characters A-Z or Z-A.
• Display loading and error states while fetching.
• Display a "No Characters found" message when filters return no results.
• Style the grid and cards with CSS for a responsive layout.

ClassNames

Use the Classnames in your project

• Container → container
• Controls → controls
• Character card → card
• Name → char-name
• Status → char-status
• Species → char-species
• Testing Instructions

Use the following data-testid attributes in your component:

• loading → for the loading message
• error-message → for API errors
• search-input → for the search input
• status-filter → for the status filter dropdown
• sort-order → for sort dropdown
• character-{id} → for each character card