Rick&Morty API

Using TanStack Query (formerly react-query) and the open Rick&Morty API to test clearer data flow without useEffect().

A character browser built with TanStack Query and the Rick and Morty API, a demo of cleaner data flow without useEffect(). Browse, search and filter characters, then open detail pages with full info and images.

Features

• TanStack Query: Server state via useQuery; caching, loading and error handling
• List page: Search by name; filters for status, gender, species and type; pagination
• Character detail: Dedicated page per character (image, species, gender, origin, location, status, type)
• Custom hooks: useFilter, usePagination, useSearch, useToggle for URL-friendly state

Architecture

• Server state vs UI state: TanStack Query owns remote data (characters, pages); local hooks sync filters and pagination to the URL for shareable list views.
• Route-driven details: Dynamic segments load a single character by id with query-backed prefetch or cache reuse from the list.
• No effect-heavy fetching: Data dependencies are declared through query keys instead of manual useEffect fetch chains.

Tech Stack

• React: Pages, layout, and controlled inputs for search and filters.
• TanStack Query: Async state, deduplication, background refetch, and cache policies for REST responses.
• REST API: Rick and Morty HTTP API for characters, episodes metadata, and pagination metadata.
• Pagination: Cursor/page navigation aligned with API info.next / page parameters.
• Search: Name search wired into query keys so results invalidate cleanly.
• Filter: Status, gender, species, and type filters encoded in state and requests.