Painel de Personagens — Rick and Morty

Painel web construído em React + TypeScript que consome a Rick and Morty API para listar, filtrar e favoritar personagens da série.

Funcionalidades

• Listagem paginada de personagens com imagem, status, espécie e última localização
• Busca por nome com debounce de 400ms
• Filtro por status (todos / vivo / morto / desconhecido) via parâmetro na API
• Sistema de favoritos persistido no localStorage
• Indicador visual de status (verde / vermelho / laranja)
• Estados de carregamento e erro tratados na interface

Tecnologias

• React 19 + TypeScript
• Vite
• Context API para estado global dos favoritos
• Custom Hooks: useFetch, useDebounce, useLocalStorage
• React.memo, useMemo e useCallback para otimização de renderização

Estrutura do projeto

src/
├── components/
│   ├── BarraBusca.tsx
│   ├── BotoesStatus.tsx
│   ├── CartaoPersonagem.tsx
│   └── Paginacao.tsx
├── contexts/
│   └── FavoritosContext.tsx
├── hooks/
│   ├── useDebounce.ts
│   ├── useFetch.ts
│   └── useLocalStorage.ts
├── types/
│   └── rickandmorty.ts
├── App.tsx
└── main.tsx

Como executar

Pré-requisitos: Bun instalado.

bun install
bun dev

A aplicação ficará disponível em http://localhost:5173.

Para gerar a build de produção:

bun run build

API utilizada

https://rickandmortyapi.com/api/character