Pokédex – Projeto em Next.js

em



Este projeto é uma Pokédex interativa, desenvolvida como parte do meu aprendizado em desenvolvimento web com React e Next.js e hospedado no Netlify, a URL é pokemondmi.netlify.app

O objetivo foi consumir a PokéAPI uma API pública com dados de todos os Pokémon, e construir uma aplicação que listasse, buscasse e exibisse detalhes de cada criatura.

Tecnologias utilizadas

  • Next.js (React com renderização híbrida SSR/CSR)

  • TypeScript (tipagem estática para maior segurança)

  • TailwindCSS (estilização rápida e responsiva)

  • PokéAPI (fonte de dados em JSON)


Funcionalidades principais

  • Listagem de Pokémon com paginação
    Exibe os Pokémon em forma de cards, com botões de navegação para explorar toda a coleção.

  • Barra de busca
    Permite procurar um Pokémon pelo nome e visualizar seus detalhes.

  • Página de detalhes
    Mostra informações completas como:

    • Sprite oficial

    • Tipos com cores personalizadas

    • Altura e peso

    • Habilidades

    • Stats base

  • UI responsiva e centralizada
    Layout adaptado para diferentes tamanhos de tela, mantendo boa legibilidade em dispositivos móveis e desktops wide screen.

  • Navegação intuitiva
    O título no topo funciona como link de retorno à página inicial, facilitando a experiência do usuário.


Aprendizados

Durante o desenvolvimento, pratiquei:

  • Estruturação de rotas dinâmicas no Next.js (/pokemon/[name])

  • Integração com API REST usando fetch assíncrono

  • Tipagem de dados externos com TypeScript (interfaces para responses da PokéAPI)

  • Criação de componentes reutilizáveis (cards, badges de tipos, barra de busca)

  • Organização do layout e boas práticas de usabilidade