Pokédex
Este projeto é uma Pokedex completa e interativa... O foco foi criar não apenas uma ferramenta funcional, mas também um showcase de boas práticas...
O Desafio
Devido a algumas limitações da PokeApi, as traduções não estão disponíveis para todos os Pokémon em seus respectivos idiomas. Como por exemplo (Português do Brasil), o idioma é selecionado automaticamente com base na região do navegador do usuário e na disponibilidade da tradução.
Foco em experiência do usuário e performance.
A Jornada
Começou como um desafio de fim de semana para explorar as novas features do Next.js App Router. Eu queria ir além do básico "fetch e display" e criar algo que parecesse um produto nativo. A nostalgia de Pokémon foi o combustível perfeito para iterar sobre animações complexas e transições de página fluidas.
Arquitetura e Stack Tecnológico
Performance e Escalabilidade
O projeto foi construído sobre uma base de tecnologias modernas, escolhidas para garantir performance, escalabilidade e uma ótima experiência de desenvolvimento.
A arquitetura é baseada em componentes, onde cada parte da interface é um bloco isolado e reutilizável, facilitando a manutenção e o desenvolvimento de novas funcionalidades. O estado global da aplicação, especialmente os dados vindos da API, é gerenciado de forma eficiente pelo React Query, que simplifica o fetching, caching e a atualização de dados remotos.
| Categoria | Tecnologia | Propósito |
|---|---|---|
| Framework | Next.js | SSR e Roteamento |
| Linguagem | Typescript | Tipagem estática e segurança |
| Estilização | Tailwind CSS | Estilização utilitária e responsiva |
Hook de Virtualização
Implementação de uma virtualização customizada para renderizar listas de milhares de itens mantendo 60fps.
// Hook customizado para lidar com scroll infinito virtualizado
export function useVirtualizer(items, containerRef) {
const [virtualItems, setVirtualItems] = useState([]);
useEffect(() => {
const handleScroll = () => {
// Lógica de cálculo de itens visíveis
// Apenas renderiza o que está na viewport
};
containerRef.current.addEventListener('scroll', handleScroll);
return () => containerRef.current.removeEventListener('scroll', handleScroll);
}, [items]);
return virtualItems;
}💡 O syntax highlighting com Shiki será implementado na próxima etapa
Design System e UI
Para as cores, utilizei a paleta oficial de "types" de Pokémon, garantindo familiaridade aos fãs. A tipografia (Inter) traz modernidade, enquanto os cards com efeito de "glassmorphism" adicionam profundidade à interface sem sobrecarregar a visão.
Funcionalidades Principais
A aplicação foi desenvolvida com foco na experiência do usuário e na performance. Abaixo estão os destaques:
- Listagem com D-Pad: A página inicial apresenta os Pokémon com um sistema de D-Pad para uma navegação fluida e contínua também acessível pelo teclado.
- Busca e Filtragem em Tempo Real: Encontre Pokémon rapidamente através da busca por nome ou número e refine os resultados com o filtro por tipo.
- Página de Detalhes Imersiva: Cada Pokémon possui uma página dedicada com informações completas, incluindo status base, habilidades e cadeia evolutiva.
- Background Dinâmico: A cor de fundo da página de detalhes se adapta dinamicamente ao pokedex da primeira geração.
- Tema Claro e Escuro (Dark/Light Mode): Alterne entre os temas para uma visualização mais confortável em diferentes ambientes.
- Design Totalmente Responsivo: A interface se adapta perfeitamente a qualquer tamanho de tela, de desktops a dispositivos móveis.
- Design Inspirado em Pokémon: A interface foi inspirada na pokedex da primeira geração, e no mobile foi inspirada no design do clássico gameboy.