Pokédex com PokeAPI

Role para baixo
Jan 2024
HTML5 / CSS3 / JavaScript / API REST
Pokédex - Lista de Pokémon
Pokédex - Busca Flexível
Pokédex - Mobile View

Sobre o Projeto

Objetivo

Uma Pokédex interativa que consome dados da PokeAPI, exibindo informações de diversos Pokémon em tempo real com sistema de busca flexível e otimizado. Projeto desenvolvido como prática de front-end vanilla focado em consumo de API REST pública, manipulação assíncrona de dados e otimizações de performance.

Tools & Technologies

HTML5, CSS3, JavaScript ES6+, Bootstrap 5, PokeAPI, Fetch API, Async/Await, Debounce Pattern, Cache Strategy, Normalize.css

Deploy

Funcionalidades e Otimizações

Busca Flexível em Tempo Real: Sistema de pesquisa com correspondência parcial do nome (case-insensitive), buscando substrings para encontrar Pokémon mesmo com digitação parcial. Exemplo: digitando 'pika' encontra 'pikachu', digitando 'char' encontra 'charmander', 'charmeleon' e 'charizard'. Implementado com limite de 20 resultados para otimização.

Cache Inteligente: Sistema de cache em memória para melhorar performance, armazenando a lista completa de Pokémon após a primeira busca. Reduz requisições desnecessárias à API e melhora significativamente a velocidade das buscas subsequentes. Cache persiste durante toda a sessão do usuário.

Debounce Implementation: Sistema de debounce com delay de 300ms para otimizar requisições. Aguarda o usuário parar de digitar por 300ms antes de processar a busca, cancela requisições pendentes se o usuário continuar digitando e restaura a lista imediatamente quando o campo é limpo.

Paginação e Carregamento Progressivo: Listagem paginada de Pokémon com carregamento inicial de 5 itens e botão 'Carregar +' para carregamento incremental sob demanda. Interface responsiva adaptável com Bootstrap e CSS customizado. Lazy loading de detalhes - busca informações completas apenas dos Pokémon filtrados, reduzindo tráfego de rede.