Uma aplicação web moderna e responsiva para explorar o universo Pokémon, desenvolvida com React e alimentada pela PokéAPI. Descubra pokémons, salve seus favoritos, visualize detalhes completos e teste seus conhecimentos com nosso mini-game!
- Browse de todas as 9 gerações de pokémons (1025 pokémons no total)
- Interface intuitiva com cards informativos
- Filtro por geração
- Busca de pokémons em tempo real
- Salve seus pokémons favoritos com um clique
- Gerencie sua coleção na página "Meus Pokémon"
- Dados persistidos no localStorage
- Sincronização automática entre páginas
- Visualização completa de informações
- Estatísticas (HP, Ataque, Defesa, etc.)
- Tipos e efetividades
- Cadeia evolutiva com imagens
- Descrição e dados da espécie
- Navegação entre pokémons consecutivos
- "Quem é esse Pokémon?" - adivinhe baseado na imagem
- Sistema de pontuação
- Contador de erros
- Dica com revelação automática
- Progressive Web App (PWA)
- Funciona sem internet após primeira visita
- Instalável como app nativo
- Sincronização automática de dados
- Interface mobile-first
- Compatível com todos os dispositivos
- Bootstrap 5 para estilização
- Animações suaves e fluidas
{
"frontend": {
"React": "18.3.1",
"React Router": "6.22.0",
"Axios": "1.6.7",
"Bootstrap": "5.x"
},
"build": {
"Vite": "5.4.11",
"@vitejs/plugin-react": "4.3.4"
},
"pwa": {
"vite-plugin-pwa": "0.20.5"
},
"api": {
"PokéAPI": "https://pokeapi.co/api/v2"
}
}pokeapi-react/
├── public/
│ ├── img/
│ │ ├── icons/ # Ícones de tipos
│ │ └── pokeball.png # Logo
│ └── pdf/ # Recursos adicionais
├── src/
│ ├── components/
│ │ ├── Header.jsx # Barra de navegação
│ │ ├── Header.css
│ │ ├── PokemonCard.jsx # Card individual
│ │ ├── PokemonCard.css
│ │ ├── Loading.jsx # Spinner
│ │ └── Loading.css
│ ├── pages/
│ │ ├── Home.jsx # Lista de pokémons
│ │ ├── Home.css
│ │ ├── PokemonDetalhes.jsx # Detalhes completos
│ │ ├── PokemonDetalhes.css
│ │ ├── MeusPokemon.jsx # Favoritos
│ │ ├── MeusPokemon.css
│ │ ├── MiniGame.jsx # Jogo
│ │ └── MiniGame.css
│ ├── services/
│ │ ├── pokeapi.js # API requests (Axios)
│ │ └── storage.js # LocalStorage manager
│ ├── utils/
│ │ └── helpers.js # Funções utilitárias
│ ├── App.jsx # Router principal
│ ├── App.css
│ ├── main.jsx
│ └── index.css
├── package.json
├── vite.config.js
├── index.html
├── manifest.json
└── README.md
- Node.js (versão 14 ou superior)
- npm ou yarn
-
Clone o repositório:
git clone https://github.com/paulowh/pokeapi.git cd pokeapi -
Instale as dependências:
npm install
-
Inicie o servidor de desenvolvimento:
npm run dev
A aplicação abrirá automaticamente em
http://localhost:3000
npm run buildIsso gera uma pasta dist/ otimizada para produção.
npm run preview- Selecione uma geração clicando nos botões
- Navegue pelos pokémons em grid
- Clique no card para ver detalhes completos
- Use o botão de bookmark para salvar favoritos
- Digite o nome de um pokémon na barra de busca
- Pressione Enter ou clique em Procurar
- Os resultados serão filtrados automaticamente
- Visualize informações completas do pokémon
- Veja a cadeia evolutiva
- Navegue para pokémons anteriores/próximos
- Salve como favorito
- Acesse via menu dropdown
- Veja todos os pokémons que você salvou
- Clique em qualquer um para ver detalhes
- Use "Limpar Tudo" para remover todos de uma vez
- Veja a imagem do pokémon
- Digite o nome na caixa de entrada
- Pressione Enter ou clique em "Responder"
- Ganhe pontos por acertos
- Use "Revelar" se quiser saber a resposta
- React Hooks (useState, useEffect)
- React Router para navegação
- Context API pronta para expansão
- Axios para requisições HTTP
- Tratamento de erros robusto
- Cache de dados com localStorage
- Salvamento de favoritos em localStorage
- Sincronização automática entre abas
- Limpeza de dados quando necessário
- Tradução de tipos de pokémons
- Formatação de IDs e nomes
- Geração de URLs de imagens
- Normalização de dados
A aplicação é um Progressive Web App (PWA) completo:
- 📦 Installável em dispositivos móveis
- 🔌 Funciona offline (após primeira visita)
- ⚡ Carregamento rápido com cache
- 🎨 Design responsivo mobile-first
Para instalar:
- No navegador, procure por "Instalar aplicativo" ou similar
- Em dispositivos iOS/Android, procure pelo botão de instalação
Edite src/App.css e src/components/Header.css para modificar a paleta de cores.
- Atualize o array de gerações em
src/services/pokeapi.js - Adicione novos botões em
src/pages/Home.jsx
Edite src/pages/MiniGame.jsx para adicionar novos modos de jogo.
- Total de Pokémons: 1.025
- Gerações Suportadas: 9
- Componentes React: 4 principais + 4 páginas
- Roteamento: 4 rotas principais
- API Calls: Integração completa com PokéAPI
- Verifique sua conexão com a internet
- Confirme que a PokéAPI está acessível (https://pokeapi.co)
- Verifique o console do navegador para erros
- Verifique se o localStorage está habilitado
- Limpe cookies/cache e tente novamente
- Verifique o console para mensagens de erro
- Use um navegador moderno (Chrome, Edge, Firefox)
- Acesse via HTTPS (ou localhost)
- Tente adicionar manualmente via menu do navegador
Barra de navegação com:
- Logo e marca
- Links de navegação
- Busca de pokémons
- Menu dropdown
Card exibindo:
- ID formatado
- Imagem do pokémon
- Nome
- Tipos com ícones
- Botão de favorito
Página completa com:
- Informações principais
- Estatísticas detalhadas
- Cadeia evolutiva
- Descrição da espécie
- Navegação entre pokémons
Jogo interativo com:
- Exibição aleatória de pokémon
- Sistema de pontuação
- Validação de respostas
- Contagem de erros
- Sanitização de entrada de usuário
- Proteção contra XSS via React
- Requisições seguras via HTTPS
- Sem armazenamento de dados sensíveis
Para contribuir com o projeto:
- Faça um Fork do repositório
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Este projeto é de código aberto sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Paulo Henrique
GitHub: @paulowh
- PokéAPI - API gratuita e aberta
- React - Biblioteca de UI
- Vite - Build tool moderno
- Bootstrap - Framework CSS
- Bootstrap Icons - Ícones
Se encontrar algum problema:
- Verifique a seção Troubleshooting
- Abra uma issue no GitHub
- Envie um email para suporte
Divirta-se explorando o universo Pokémon! 🎮✨