Loading repository data…
Loading repository data…
eduardoflorenciano / repository
Pokédex interativa que consome a PokéAPI em tempo real para exibir todos os 1.025 Pokémons, com paginação dinâmica, busca com debounce, filtro por tipo, modal de detalhes com stats, sistema de favoritos persistido em localStorage e sincronização entre abas. Desenvolvido com metodologias ágeis — do levantamento de requisitos ao protótipo no Figma.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Pokédex interativa que consome a PokéAPI em tempo real para exibir todos os 1.025 Pokémons, com paginação dinâmica, busca com debounce, filtro por tipo, modal de detalhes com stats, sistema de favoritos persistido em
localStoragee sincronização entre abas. Desenvolvido com metodologias ágeis — do levantamento de requisitos ao protótipo no Figma.
Pokéland é uma Pokédex interativa que carrega dados diretamente da PokéAPI em tempo real. Sem back-end e sem banco de dados próprio, toda a persistência é feita via localStorage do navegador — favoritos salvos, filtros combinados e sincronização entre abas incluídos.
O projeto foi desenvolvido em equipe seguindo práticas reais de mercado: gestão de tarefas com Scrum/Kanban no Trello, prototipação em Balsamiq e Figma, e versionamento com Git e GitHub.
"Bem-vindo à PokéLand, onde cada treinador encontra sua próxima aventura!"
pokemons.html)| Funcionalidade | Detalhe técnico |
|---|---|
| Catálogo completo | Todos os 1.025 Pokémons carregados em lotes de 20 via fetchPokemonBatch + Promise.all |
| Paginação dinâmica | 20 por página, numeração com reticências para grandes intervalos, scroll suave ao topo ao trocar de página |
| Busca em tempo real | Campo <input type="search"> com debounce de 300ms para evitar requisições excessivas à API |
| Filtro por tipo | Dropdown com os 18 tipos oficiais (com emojis), combinável com a busca ativa sem resetar o outro |
| Modal de detalhes | Artwork oficial, tipos com badge colorido, altura, peso, habilidades e barras de stats; fecha com ESC, clique fora ou botão × |
| Descrição da espécie | Buscada em paralelo no endpoint /pokemon-species, com prioridade para pt-BR e fallback para inglês |
| Lazy loading | Imagens dos cards carregam com loading="lazy" nativo do HTML5 |
| Cards coloridos | Cor da borda de cada card gerada dinamicamente a partir do tipo principal via CSS custom property --card-border-color |
| Favoritar | Coração (🤍/❤️) com animação de pulso (scale 1.5 → 1) ao clicar; estado persistido em localStorage |
salvos.html)| Funcionalidade | Detalhe técnico |
|---|---|
| Carregamento | Busca os IDs salvos no localStorage e chama a API em paralelo com Promise.all |
| Contador dinâmico | Exibe Quantidade: N para "Todos" ou Quantidade: X de N (tipo) ao filtrar |
| Busca instantânea | Filtragem visual por nome ou número sem nova requisição à API |
| Filtro por tipo | Mesmo sistema de dropdown da Pokédex, com atualização do contador |
| Remover favorito | Clique no coração abre confirm() antes de remover; recarrega a lista automaticamente |
| Sincronização entre abas | Evento window.storage detecta mudanças no localStorage e recarrega os favoritos em tempo real |
| Voltar ao topo | Botão flutuante ↑ aparece após 500px de scroll com animação suave |
| Estado vazio | Mensagem amigável com link direto para a Pokédex quando não há favoritos |
index.html)erro.html)| Arquivo | Descrição | JS |
|---|---|---|
index.html | Landing page de apresentação | script.js |
pokemons.html | Pokédex com busca, filtro e paginação | pokemons.js |
salvos.html | Favoritos com busca, filtro e sincronização | salvos.js |
erro.html | Página 404 com o Gengar | — |
O código de pokemons.js é organizado em módulos funcionais bem definidos:
pokemons.js
│
├── CONFIG → Constantes globais (1025 pokémons, URL da API, 20/página)
├── typeColors → Mapa de tipo → cor hexadecimal (18 tipos)
│
├── Estado da aplicação
│ ├── allPokemons[] → Cache de todos os pokémons carregados
│ ├── filteredPokemons[] → Subconjunto atual após busca + filtro
│ ├── currentPage → Página atual da paginação
│ ├── currentFilter → Tipo selecionado ('all' ou nome do tipo)
│ └── isLoading → Flag de carregamento
│
├── Funções auxiliares
│ ├── formatPokemonNumber() → Formata ID com zeros à esquerda (ex: "Nº 025")
│ ├── capitalize() → Capitaliza primeira letra
│ └── getTypeColor() → Retorna cor do tipo principal
│
├── Paginação
│ ├── getTotalPages() → Calcula total de páginas
│ ├── getPaginatedPokemons()→ Fatia o array filtrado pela página atual
│ ├── renderPagination() → Gera HTML da paginação com reticências
│ └── goToPage() → Muda página + renderiza + scroll ao topo
│
├── Filtros
│ ├── toggleFilterDropdown()→ Abre/fecha dropdown
│ ├── filterByType() → Filtra por tipo + mantém busca ativa
│ └── filterPokemons() → Filtra por termo de busca + mantém tipo ativo
│
├── Modal
│ └── showPokemonDetails() → Cria e injeta modal dinâmico no DOM
│
├── API (async/await)
│ ├── getPokemonSpecies() → GET /pokemon-species/:id (descrição)
│ ├── fetchPokemon() → GET /pokemon/:id + busca espécie em paralelo
│ ├── fetchPokemonBatch() → Promise.all para lote de pokémons
│ └── loadAllPokemons() → Loop de lotes com atualização incremental da UI
│
├── Renderização
│ ├── createPokemonCard() → Cria elemento <article> com toda a lógica de eventos
│ ├── renderPokemons() → Usa DocumentFragment para performance
│ └── showLoading() → Estado de carregamento
│
└── localStorage (favoritos)
├── getFavorites() → Lê array de IDs do localStorage
├── saveFavorites() → Persiste array no localStorage
├── addToFavorites() → Adiciona ID se não existir
├── removeFromFavorites() → Remove ID por filtro
├── isFavorite() → Checa se ID está no array
└── toggleFavorite() → Alterna estado e retorna bool
O projeto consome dois endpoints da PokéAPI v2:
| Endpoint | Uso |
|---|---|
GET /pokemon/:id | Dados principais: nome, tipos, sprites (artwork oficial), altura, peso, habilidades, estatísticas base |
GET /pokemon-species/:id | Descrição da espécie (flavor_text_entries), com prioridade para pt-BR e fallback para en |
Estratégia de carregamento:
fetchPokemonBatchPromise.all para paralelizar as requisiçõesfetchPokemonA chave pokemonsFavoritos no localStorage armazena um array de IDs numéricos:
[25, 1, 133, 6, 150]
Fluxo completo:
Usuário clica no coração (pokemons.html)
└── toggleFavorite(id)
├── isFavorite? → removeFromFavorites(id) → saveFavorites()
└── !isFavorite? → addToFavorites(id) → saveFavorites()
└── Animação de pulso no ícone ❤️
Usuário abre salvos.html
└── loadFavoritePokemons()
├── getFavorites() → array de IDs
├── Promise.all(ids.map(fetchPokemon)) → dados da API
└── renderiza cards + atualiza contador
Usuário favorita em outra aba
└── window.addEventListener('storage', ...)
└── loadFavoritePokemons() → atualiza automaticamente
Pokeland/
│
├── index.html # Landing page
├── pokemons.html # Pokédex principal
├── salvos.html # Favoritos
├── erro.html # Página 404
├── LICENSE # Licença MIT
│
└── assets/
├── css/
│ ├── style.css # Landing page: layout adaptativo desktop/mobile
│ ├── pokemons.css # Pokédex: cards, modal, filtros, paginação
│ ├── salvos.css # Favoritos: cards, contador, botão voltar ao topo
│ └── erro.css # Página 404: layout centralizado com Gengar
│
├── js/
│ ├── script.js # Landing page: toggle do menu hamburger
│ ├── pokemons.js # Pokédex: toda a lógica de API, filtros, paginação e favoritos
│ └── salvos.js # Favoritos: carregamento, filtros, sincronização entre abas
│
└── img/
├── logo.png # Logo da Pokéland (header)
├── favicon.png # Favicon (ícone da aba)
├── imagem-landingPage.png # Imagem da landing page (Pokédex ilustrada)
└── gengar.png # Gengar para a página 404
| Tecnologia | Versão | Uso |
|---|---|---|
| HTML5 | — | Semântica, atributos ARIA, meta tags Open Graph, lazy loading nativo |
| CSS3 | — | Flexbox, Grid, variáveis CSS, media queries, animações |
| JavaScript ES6+ | — | async/await, Promise.all, fetch, localStorage, IntersectionObserver, evento storage |
| PokéAPI | v2 | Dados de pokémons (/pokemon) e descrições (/pokemon-species) |
| Google Fonts | — | Tipografia Inter (CDN) |
| Conceito | Aplicação |
|---|---|
async/await | Todas as funções de consumo da API |
Promise.all | Paralelização das requisições em cada lote de 20 pokémons |
try/catch/finally | Tratamento de erros em todas as chamadas à API com fallback de mensagem |
| Debounce (300ms) | setTimeout no evento input da busca para reduzir chamadas desnecessárias |
DocumentFragment | Inserção em lote de cards no DOM para minimizar reflows |
| Conceito | Aplicação |
|---|---|
| Estado global | Variáveis allPokemons, filteredPokemons, currentPage, currentFilter |
| Filtros combinados | Busca e filtro por tipo operam sobre o mesmo array, mantendo ambos ativos simultaneamente |
| Atualização incremental | UI renderiza o primeiro lote enquanto os demais ainda carregam |
| Sincronização entre abas | window.addEventListener('storage') detecta mudanças no localStorage de outras abas |
| Conceito | Aplicação |
|---|---|
| CSS Custom Properties | --card-border-color definida dinamicamente por JavaScript por tipo de pokémon |
| Flexbox + Grid | Layout responsivo da grade de cards e da paginação |
| Media queries | Breakpoints para mobile e desktop na landing page |
| Transições | Animações de escala no coração, abertura do dropdown, aparecimento do botão de voltar ao topo |
| Recurso | Implementação |
|---|---|
lang="pt-BR" | Declarado em todas as páginas |
aria-label | Botões de favoritar, filtrar e menu hamburger |
aria-live="polite" | Containers de pokémons anunciam atualizações para leitores de tela |
role="region" | Seções de lista com papel semântico definido |
alt descritivo | Todas as imagens com texto alternativo |
Meta description + keywords | Pr |