🔴 Pokédex React

Uma Pokédex inspirada no visual dos jogos, com os 1025 Pokémon,
estatísticas em gráfico e cálculo automático de fraquezas e resistências.

▶ Abrir a Pokédex

---

✨ Funcionalidades

• 📖 Todos os 1025 Pokémon, de Bulbasaur a Pecharunt. A navegação dá a volta: depois do último vem o primeiro.
• 📊 Gráfico de estatísticas (PS, Ataque, Defesa, Ataque Especial, Defesa Especial e Velocidade) com Chart.js.
• 🛡️ Fraquezas, resistências e imunidades calculadas a partir dos tipos. Pokémon com dois tipos combinam os multiplicadores dos dois.
• 🎨 Cores por tipo: cada tipo tem o seu degradê, como nos jogos.
• 📝 Descrição da Pokédex vinda direto da PokéAPI.
• 🔊 Som de interface ao trocar de Pokémon.

🎨 Do protótipo ao projeto

O layout foi desenhado antes de ir para o código:

Protótipo	Resultado

⚙️ Como funciona

A cada troca de Pokémon, o app faz duas chamadas à PokéAPI:

Endpoint	O que traz
/pokemon/{id}	Imagem, nome, tipos e estatísticas
/pokemon-species/{id}	Descrição da Pokédex (em inglês)

As fraquezas e resistências não vêm da API. Elas são calculadas no front com uma tabela de tipos: para cada tipo do Pokémon, o multiplicador é ×2 nas fraquezas, ×0,5 nas resistências e ×0 nas imunidades.

🚀 Rodando localmente

npm install
npm start

O app abre em http://localhost:3000.

Para publicar no GitHub Pages:

npm run deploy

🧩 Estrutura

src/
├── App.js                    # Estado do Pokémon atual, chamadas à PokéAPI e navegação
├── assets/                   # Imagens de fundo e som de interface
└── components/
    ├── containerLeft/        # Lado esquerdo: imagem e estatísticas
    ├── containerRight/       # Lado direito: navegação e informações
    ├── navBar/               # Botões Anterior / Próximo
    ├── pokemonPicture/       # Imagem e nome do Pokémon
    ├── pokemonDescription/   # Descrição, tipos, fraquezas, resistências e imunidades
    ├── statsChart/           # Gráfico de estatísticas (Chart.js)
    ├── typeMarker/           # Etiqueta colorida de cada tipo
    ├── interactionBtn/
    └── rectangle/

🛠️ Como alterar o projeto

Cada componente fica numa pasta em src/components/, com o .jsx e um style.js feito com styled-components:

// style.js
import styled from "styled-components";

export const Container = styled.div`
  /* regras de css */
`;

export const StyledBtn = styled.button`
  /* regras de css */
`;

// ComponenteExemplo.jsx
import { Container, StyledBtn } from "./style";

function ComponenteExemplo() {
  return (
    <Container>
      <StyledBtn />
    </Container>
  );
}

export default ComponenteExemplo;

Depois, é só importar o componente no App.js:

import ComponenteExemplo from "./components/componenteExemplo/ComponenteExemplo";

function App() {
  return <ComponenteExemplo />;
}

🙏 Créditos

• Dados e imagens: PokéAPI.
• Pokémon e nomes relacionados são marcas de Nintendo, Game Freak e The Pokémon Company. Projeto feito para estudo, sem fins comerciais.

---

Feito por Leandro Custódio · Se curtiu, deixa uma ⭐