Pokédex completa em Angular, consumindo a PokéAPI em tempo real - sem backend próprio
Sobre • Stack • Como Usar • Arquitetura • Decisões • Guia de Estilo
Pokédex é um projeto de estudo em Angular 20 + TypeScript, construído para praticar arquitetura de componentes standalone, gerenciamento de estado com Signals (sem NgRx) e consumo de uma API REST pública, a PokéAPI.
- Listagem de pokémons com scroll infinito sobre os ~1300 pokémons da PokéAPI
- Busca por nome sobre a lista completa, não só os já carregados na tela
- Filtro por tipo com múltipla seleção (ex: fogo + voador)
- Detalhes do pokémon: sprite, tipos, altura, peso, stats, habilidades, movimentos e cadeia de evolução
- Favoritos persistidos em
localStorage, com tela dedicada - Comparação lado a lado entre 2 pokémons, escolhidos por busca com autocomplete
- Meu Time: monte um time de até 6 pokémons (drag-and-drop pra reordenar), com análise de cobertura de tipos - fraquezas, resistências e sugestão de contra-picks
- Traduções pt-BR sob demanda: nomes de habilidades e movimentos sem tradução oficial na PokéAPI são traduzidos via MyMemory e cacheados em
localStorage - Instalável como PWA (service worker + manifest), com tema claro/escuro persistido localmente
- Angular 20 - standalone components, sem NgModules
- TypeScript 5.8 (modo
strict) - Angular Material - ícones e componentes de UI
- Signals para todo o estado da aplicação (sem NgRx, sem
Subject/BehaviorSubject) - RxJS apenas para orquestrar chamadas HTTP (
switchMap,forkJoin,takeUntilDestroyed) - PokéAPI - API pública, sem necessidade de chave/autenticação
HTTP (PokéAPI)
↓
PokemonService (cache em memória + mapeamento DTO → modelo de domínio)
↓
Componentes standalone (Signals: pokemon, extras, loading, activeTab, ...)
↓
Template (Angular control flow: @if / @for / @switch)
core/services-PokemonService(toda a integração com a PokéAPI, incluindo cache e montagem da cadeia de evolução),FavoritesServiceeTeamService(persistidos emlocalStorage) eTranslationService(traduções sob demanda, com cache)core/models- interfaces de domínio (PokemonDetail,PokemonExtras,PokemonListItem, ...), desacopladas do formato bruto da APIcore/interceptors- interceptor HTTP global de errosshared/components- componentes reutilizáveis (card, skeleton do card, badge de tipo, spinner, seletor de pokémon, gráfico de radar de stats, botão-ícone) — tokens de design, breakpoints e convenções desses componentes ficam documentados no Guia de Estiloshared/*.ts- helpers puros reutilizados entre features (formatação, cores/tradução de tipos, cálculo de efetividade, storage JSON, efeito de digitação do placeholder)features- uma pasta por tela (pokemon-list,pokemon-detail,favorites,compare,team), cada uma isolada e lazy-loaded via rotas
Para o tamanho deste projeto, um gerenciador de estado externo seria over-engineering: o estado inteiro cabe em dois services (PokemonService, FavoritesService) usando Signals nativos do Angular, sem o boilerplate de actions/reducers/selectors. Se a aplicação crescesse (múltiplas fontes de estado compartilhado, undo/redo, dev tools de time-travel), aí valeria reavaliar.
- Node.js 18+
- Angular CLI (
npm install -g @angular/cli, opcional - onpx ngtambém funciona)
# Clone o repositório
git clone https://github.com/mapompeo/pokedex.git
cd pokedex
# Instale as dependências
npm install
# Rode a aplicação
npm startAcesse http://localhost:4200.
npm run buildOs artefatos ficam em dist/pokedex. As URLs da PokéAPI usadas em cada ambiente vêm de src/environments/environment.ts (dev) e environment.prod.ts (produção), trocados automaticamente pelo Angular CLI via fileReplacements.
src/app/
├── core/
│ ├── models/ # Interfaces de domínio (PokemonDetail, PokemonExtras, ...)
│ ├── services/ # PokemonService (PokéAPI), FavoritesService/TeamService
│ │ # (localStorage) e TranslationService (MyMemory, com cache)
│ └── interceptors/ # Interceptor global de erros HTTP
├── shared/
│ ├── components/ # Componentes reutilizáveis (card, skeleton-card, type-badge, spinner, picker, radar-chart)
│ └── *.ts # Helpers de formatação, tradução (pt-BR) e storage
├── features/
│ ├── pokemon-list/ # Tela principal: listagem, busca e filtro por tipo
│ ├── pokemon-detail/ # Detalhes, stats, evolução e movimentos
│ ├── favorites/ # Tela de favoritos
│ ├── compare/ # Comparação entre 2 pokémons
│ └── team/ # Monte seu time (drag-and-drop) e análise de cobertura
└── app.routes.ts # Rotas lazy-loaded por feature
Cada feature é isolada e se comunica com as demais apenas através dos services e do roteamento - sem acoplamento direto entre telas.
- Sem gerenciador de estado externo (NgRx): estado vive em Signals dentro de
PokemonService/FavoritesService. Suficiente para o tamanho do projeto, evita boilerplate. - Sprites sem chamadas extras: a URL do sprite de cada pokémon na listagem é construída direto a partir do ID (
raw.githubusercontent.com/PokeAPI/sprites), sem buscar o detalhe completo só para exibir uma imagem. - Busca com dataset completo: como a PokéAPI não oferece busca textual parcial, a busca por nome carrega uma vez a lista completa (uma chamada leve, sem sprites/detalhes) e filtra localmente - encontra qualquer pokémon, mesmo sem ele já ter sido carregado pelo scroll infinito.
- Cancelamento de requisições em cascata: navegação entre pokémons e alternância de favoritos usam
switchMap, cancelando automaticamente uma requisição em andamento se uma nova começar antes dela responder - evita que uma resposta lenta e antiga sobrescreva dados mais recentes na tela. - Sem testes automatizados nesta versão: decisão consciente para focar no aprendizado de Angular em si; validação é feita via
ng builde testes manuais no navegador.
- Testes automatizados (unitários e e2e)
- Cache com invalidação/expiração no
PokemonService - Paginação/scroll infinito também no filtro por tipo combinado com busca
Matheus Pompeo
⭐ Se este projeto te ajudou, considere dar uma estrela!
Made with ❤️ and Angular