{"id":31809890,"url":"https://github.com/alanborgesdev/pokedex","last_synced_at":"2026-04-13T06:02:59.431Z","repository":{"id":286291541,"uuid":"960969168","full_name":"alanborgesdev/pokedex","owner":"alanborgesdev","description":"Pokedex feita com HTML, CSS e JavaScript que consome a PokéAPI para listar e exibir Pokémon. Possui tema escuro e claro (dark/light mode).","archived":false,"fork":false,"pushed_at":"2025-10-12T00:38:48.000Z","size":1265,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-16T08:18:31.128Z","etag":null,"topics":["api","axios","css-in-js","frontend","javascript","jest","pokeapi","pokedex","react","react-router","single-page-app","styled-components","vite"],"latest_commit_sha":null,"homepage":"https://alanborgesdev-pokedex.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alanborgesdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-05T13:20:55.000Z","updated_at":"2025-10-12T00:38:51.000Z","dependencies_parsed_at":"2025-04-05T14:39:34.550Z","dependency_job_id":null,"html_url":"https://github.com/alanborgesdev/pokedex","commit_stats":null,"previous_names":["alanborgesdev/pokedex"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alanborgesdev/pokedex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanborgesdev%2Fpokedex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanborgesdev%2Fpokedex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanborgesdev%2Fpokedex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanborgesdev%2Fpokedex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alanborgesdev","download_url":"https://codeload.github.com/alanborgesdev/pokedex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanborgesdev%2Fpokedex/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31741541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T05:13:27.074Z","status":"ssl_error","status_checked_at":"2026-04-13T05:13:25.150Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","axios","css-in-js","frontend","javascript","jest","pokeapi","pokedex","react","react-router","single-page-app","styled-components","vite"],"created_at":"2025-10-11T05:54:50.411Z","updated_at":"2026-04-13T06:02:59.426Z","avatar_url":"https://github.com/alanborgesdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎮 Pokédex React\n\nUma Pokédex interativa e moderna desenvolvida com React, permitindo explorar todos os Pokémons, filtrar por tipos, visualizar detalhes completos e alternar entre temas claro e escuro.\n\n![React](https://img.shields.io/badge/React-19.0.0-61DAFB?style=for-the-badge\u0026logo=react)\n![Vite](https://img.shields.io/badge/Vite-6.2.0-646CFF?style=for-the-badge\u0026logo=vite)\n![Styled Components](https://img.shields.io/badge/Styled_Components-6.1.16-DB7093?style=for-the-badge\u0026logo=styled-components)\n\n---\n\n## 🚀 Tecnologias Utilizadas\n\n### Core\n- **React 19.0.0** - Biblioteca JavaScript para construção de interfaces\n- **React Router DOM 7.4.1** - Roteamento e navegação\n- **Vite 6.2.0** - Build tool e dev server ultrarrápido\n\n### Estilização\n- **Styled Components 6.1.16** - CSS-in-JS com suporte a temas\n- **Design Responsivo** - Layout adaptável para diferentes dispositivos\n\n### Requisições HTTP\n- **Axios 1.8.4** - Cliente HTTP para consumir a PokéAPI\n\n### Qualidade de Código\n- **ESLint 9.23.0** - Linter JavaScript/JSX\n- **Jest 29.7.0** - Framework de testes\n- **React Testing Library 16.2.0** - Testes de componentes React\n\n---\n\n## 🎯 Funcionalidades\n\n- ✅ **Listagem Paginada** - Carregamento incremental de Pokémons (10 por vez)\n- 🔍 **Filtro por Tipo** - Filtre Pokémons por tipo (Fire, Water, Grass, etc.)\n- 📱 **Design Responsivo** - Interface adaptada para mobile, tablet e desktop\n- 🎨 **Tema Claro/Escuro** - Alternância entre temas com detecção automática de preferência do sistema\n- 📄 **Página de Detalhes** - Visualize tipos, habilidades, movimentos e estatísticas\n- ⚡ **Performance Otimizada** - Uso de useMemo, Promise.all e requisições paralelas\n- 🖼️ **Fallback de Imagens** - Placeholder automático para imagens quebradas\n- ♿ **Acessibilidade** - Atributos ARIA e navegação por teclado\n\n---\n\n## 🗂️ Estrutura do Projeto\n\n```\npokedex1/\n├── src/\n│   ├── components/\n│   │   ├── contexts/\n│   │   │   └── theme-context.jsx      # Context API para gerenciamento de tema\n│   │   ├── hook/\n│   │   │   └── use-theme.jsx          # Hook customizado para tema\n│   │   ├── pages/\n│   │   │   ├── home.jsx               # Página principal com listagem\n│   │   │   ├── pokemon-detail.jsx     # Página de detalhes do Pokémon\n│   │   │   └── routes.jsx             # Configuração de rotas\n│   │   ├── pokemon-card/\n│   │   │   ├── pokemon-card.jsx       # Card individual do Pokémon\n│   │   │   └── pokemon-card.test.jsx  # Testes do card\n│   │   ├── services/\n│   │   │   ├── api.jsx                # Cliente Axios e funções da API\n│   │   │   └── api.test.jsx           # Testes da API\n│   │   ├── styles/\n│   │   │   ├── global-styles.jsx      # Estilos globais\n│   │   │   └── theme-config.js        # Configuração de temas\n│   │   └── theme-toggle/\n│   │       ├── theme-toggle.jsx       # Botão de alternância de tema\n│   │       └── theme-toggle.test.jsx  # Testes do botão\n│   ├── App.css                        # Estilos base da aplicação\n│   ├── App.jsx                        # Componente raiz\n│   └── main.jsx                       # Ponto de entrada React\n├── index.html                         # HTML base\n├── package.json                       # Dependências e scripts\n├── eslint.config.js                   # Configuração ESLint\n└── vite.config.js                     # Configuração Vite (não fornecido)\n```\n\n---\n\n## ⚙️ Como Executar o Projeto\n\n### Pré-requisitos\n\n- Node.js (versão 16 ou superior)\n- npm ou yarn\n\n### Instalação\n\n```bash\n# Clone o repositório\ngit clone https://github.com/alanborgesdev/pokedex-react.git\n\n# Acesse a pasta do projeto\ncd pokedex-react\n\n# Instale as dependências\nnpm install\n```\n\n### Executar em Desenvolvimento\n\n```bash\nnpm run dev\n```\n\nA aplicação estará disponível em `http://localhost:5173`\n\n### Build para Produção\n\n```bash\nnpm run build\n```\n\n### Pré-visualizar Build\n\n```bash\nnpm run preview\n```\n\n### Executar Testes\n\n```bash\nnpm test\n```\n\n### Linter\n\n```bash\nnpm run lint\n```\n\n---\n\n## 🧪 Testes\n\nO projeto inclui testes unitários para os principais componentes:\n\n- **PokemonCard**: Verifica renderização de nome, imagem e links\n- **API**: Testa requisições, cache e tratamento de erros\n- **ThemeToggle**: Valida alternância de temas\n\n**Cobertura de Testes:**\n- Componentes: PokemonCard, ThemeToggle\n- Serviços: API (getPokemons, getPokemonDetails)\n- Mocks: Axios Mock Adapter para simular respostas da API\n\n---\n\n## 🎨 Sistema de Temas\n\nO projeto implementa um sistema robusto de temas com:\n\n- **Detecção Automática**: Respeita a preferência do sistema operacional\n- **Persistência**: Estado mantido durante a sessão (sem localStorage)\n- **Transições Suaves**: Animações CSS na troca de temas\n- **Theme Provider**: Context API + Styled Components Theme Provider\n\n### Cores do Tema Claro\n- Background: `#ffffff`\n- Texto: `#000000`\n- Cards: `#f5f5f5`\n- Primária: `#3b82f6`\n\n### Cores do Tema Escuro\n- Background: `#000000`\n- Texto: `#ffffff`\n- Cards: `#121212`\n- Primária: `#3b82f6`\n\n---\n\n## 🌐 API Utilizada\n\n- **PokéAPI**: https://pokeapi.co/api/v2/\n- **Endpoints**:\n  - `GET /pokemon?offset={offset}\u0026limit={limit}` - Listagem paginada\n  - `GET /pokemon/{name}` - Detalhes do Pokémon\n\n---\n\n## 🚧 Melhorias Futuras\n\n- [ ] Adicionar busca por nome do Pokémon\n- [ ] Implementar favoritos com Context API\n- [ ] Adicionar gráfico de estatísticas (Recharts)\n- [ ] Criar página de comparação entre Pokémons\n- [ ] Adicionar animações com Framer Motion\n- [ ] Implementar Infinite Scroll\n- [ ] Adicionar PWA (Service Workers)\n- [ ] Criar sistema de batalha simulada\n\n---\n\n## 📸 Demonstração\n\n### Tela Principal\n![Home](https://via.placeholder.com/800x400?text=Home+Screenshot)\n\n### Página de Detalhes\n![Details](https://via.placeholder.com/800x400?text=Details+Screenshot)\n\n### Tema Escuro\n![Dark Mode](https://via.placeholder.com/800x400?text=Dark+Mode+Screenshot)\n\n\u003e **Nota**: Substitua os placeholders acima por screenshots reais do seu projeto.\n\n---\n\n## 🛠️ Boas Práticas Implementadas\n\n- ✅ Componentização e reutilização\n- ✅ Hooks customizados (useTheme)\n- ✅ Tratamento de erros robusto\n- ✅ Loading states e feedback visual\n- ✅ PropTypes para validação\n- ✅ Código comentado em português\n- ✅ Performance otimizada (useMemo, Promise.all)\n- ✅ Acessibilidade (ARIA labels)\n- ✅ Testes unitários\n\n---\n\n## 📬 Contato\n\n**Desenvolvedor**: Alan Borges\n\n[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/alanborgesdev)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://linkedin.com/in/alanborgesdev)\n\n---\n\n## 📄 Licença\n\nEste projeto está sob a licença **MIT**. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.\n\n---\n\n## 🙏 Agradecimentos\n\n- [PokéAPI](https://pokeapi.co/) - API gratuita e completa de Pokémons\n- [Vite](https://vitejs.dev/) - Build tool incrível\n- [Styled Components](https://styled-components.com/) - CSS-in-JS poderoso\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  Feito com ❤️ e ☕ por Alan Borges\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanborgesdev%2Fpokedex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falanborgesdev%2Fpokedex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanborgesdev%2Fpokedex/lists"}