💻 Projeto Pokédex

🎯 Objetivo do projeto:

A ideia é usar a Poke Api como fonte de dados para o projeto. Ela é uma API pública, bastante utilizada como fonte de dados para aplicações focadas em aprendizado de programação. Assim o objetivo é criar um site sobre Pokémon com o intuito de aplicar os conhcemintos adquiridos ao longo da décima primeira semana do bootcamp de desenvolvimento web fullstack da Labenu. O foco principal desse projeto foi aplicar os conhecimentos sobre: Estado Global, React Context, Providers e Consumers, Hook useContext, Organização dos dados e do componente de Estado Global. Consequentemente contribuiu para fixar conhcecimentos anteriores sobre o desenvolvimento com React.

🔹 Requisitos do projeto:

• Home

  • Receber uma lista de Pokémon vinda da API;
  • Poder adicionar o Pokémon em sua Pokédex;
  • Poder acessar os detalhes clicando naquele Pokémon;
  • Não conseguir adicionar o mesmo Pokémon duas vezes na Pokédex;
  • Ao adicionar o Pokémon, o botão deve mudar para remover da Pokédex;
  • Poder acessar a Pokédex.

• Pokédex

  • Ver os Pokémon adicionados;
  • Poder remover o Pokémon da Pokédex;
  • Poder acessar os detalhes clicando naquele Pokémon;
  • Poder voltar pra Home.

• Detalhes do Pokemon

  • Ver imagens do Pokémon;
  • Ver o tipo do Pokémon;
  • Ver as estatísticas do Pokémon;
  • Ver uma tabela de movimentos do Pokémon;
  • Poder voltar para as outras páginas.

✍️ Wireframe:

Wireframe (protótipo das páginas).

⚙️ Funcionalidades:

• Header dinâmico: Botões para transitar entre as páginas de batalha, pokédex, home e um botão de voltar de acordo com a página na qual ele está sendo renderizado;
• Páginação: São renderizados ao todo 898 pokémon, sendo 21 por página;
• Cards: Ao clicar na imagem do pokémon o usuário é redirecionado para a tela de detalhes do mesmo, além disso ele pode adicionar ou remover um pokémon da pokédex ao clicar na pokebola;
• Pokédex: Renderiza todos os pokémon que foram capturados e permite que o usuário os remova da mesma, também permitindo acessar a página de detalhes do respectivo pokémon;
• Página de Detalhes: Rederiza os detalhes do pokémon que o usuário clicou na home ou na pokédex, além disso ele consegue transitar entre os detalhes de todos os pokémon ao clicar nas setas de próximo e anterior.

📚 Bibliotecas utilizadas:

• styled-components
• axios
• react-icons
• react-router-dom
• chackra ui
• ajna/pagination

🔗 Link Surge:

Acesse nosso site Pokédex clicando aqui!!!

📸 Imagens:

DESKTOP

👨‍💻 Desenvolvedores:

Layane Bastos Juvito	Lis Fernanda Ribeiro dos Santos	Matheus Martinelle Barros