Pokédex
Este projeto é uma Pokedex completa e interativa, desenvolvida para oferecer uma experiência de usuário rápida, intuitiva e visualmente agradável. Utilizando um stack tecnológico moderno com React, Next.Js, TypeScript e Tailwind CSS, a aplicação consome a PokeAPI para fornecer dados detalhados sobre o universo Pokémon.
O foco foi criar não apenas uma ferramenta funcional, mas também um showcase de boas práticas de desenvolvimento front-end, incluindo gerenciamento de estado eficiente com React Query, design responsivo e uma arquitetura baseada em componentes.
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.
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.
Arquitetura e Stack Tecnológico
O projeto foi construído sobre uma base de tecnologias modernas, escolhidas para garantir performance, escalabilidade e uma ótima experiência de desenvolvimento.
| Categoria | Tecnologia | Propósito |
|---|---|---|
| Framework Principal | React | Construção da interface de usuário de forma declarativa e baseada em componentes. |
| Linguagem | TypeScript | Adiciona tipagem estática ao JavaScript para maior robustez e manutenibilidade do código. |
| Build Tool | Next.Js | Oferece um ambiente de desenvolvimento extremamente rápido com Hot Module Replacement (HMR). |
| Estilização | Tailwind CSS | Framework CSS utility-first para a criação de designs customizados de forma rápida e eficiente. |
| Gerenciamento de Estado | React Query | Gerenciamento de estado do servidor, caching, e paginação de dados da API (scroll infinito). |
| Cliente HTTP | Axios | Realização das chamadas para a PokeAPI de forma simplificada. |
| Linting | ESLint | Análise estática do código para encontrar e corrigir problemas. |
| Hospedagem | Vercel | Plataforma de deploy para garantir a entrega contínua e a performance da aplicação. |
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.