Projeto Pokedex

Deploy: https://wylchayer.github.io/projeto-react-apis/

Tecnologias utilizadas:

Índice

• 1. Resumo do Projeto
• 2. Definição do Projeto
• 3. Instalações
• 4. Iniciando
• 5. Tecnologias utilizadas
• 6. Lista de Requisitos do Projeto
• 7. Desenvolvedor

---

1. Resumo do Projeto

A Pokedex foi o último projeto do módulo de front-end bootcamp da Labenu. O principal objetivo era desenvolver uma plataforma que fosse possível capturar e excluir os pokemons, utilizando os seguintes conteúdos:

• integração com a pokeapi;
• paginação;
• custom hooks;
• react router;
• estado global;

Com esses conteúdos foi desenvolvido a Pokedex.

---

2. Definição do Projeto

A Pokedex é uma plataforma utilizada para capturar, excluir e ver detalhes dos Pokemons, utilizando a pokeapi.

A página inicial apresenta aos usuários os pokemons, mostrando o nome e algumas informações básicas. Nesta tela é possível, em cada cartão, capturar o pokemon e/ou ver os detalhes deste.

Ao clicar em capturar o pokemon, é informado que ele foi capturado e é transferido para a página da Pokedex, onde consta todos os pokemons capturados e também é possível excluí-los da pokedex.

Em qualquer página que apresente um card de pokemon, é possível clicar em detalhes e, assim, será apresentada uma nova página mostrando mais detalhes desse pokemon, como as estatísticas básicas e os golpes.

---

3. Instalações

Pré-requisitos:

• node.js
• npm

---

4. Iniciando

• Para instalar as dependências no diretório do seu projeto execute:

npm install

• Para iniciar o aplicativo execute:

npm run dev

---

5. Tecnologias utilizadas

Esse programa foi construído com:

• JavaScript
• React
• Styled-Components

---

6. Lista de Requisitos do Projeto

• Gerais
  • ✅ O site deve ter 3 páginas: Home, Pokedex e Detalhes;
  • ✅ Projeto deve seguir o design proposto;
  • ✅ O fluxo de trocas de páginas devem ser semelhante ao fluxograma;
• Página Home:
  • ✅ Mostrar uma lista de Pokemons, contendo ao menos 20 Pokemons;
  • ✅ Cada Pokemon será representado por um Card;
  • ✅ Em cada card de Pokemon tem um botão para adicioná-lo à Pokedex e um outro botão para acessar os detalhes do Pokemon;
  • ✅ Header dessa página terá um botão para acessar a página da Pokedex
• Página Pokédex
  • ✅ Renderizar a lista de pokémons adicionados na pokedex;
  • ✅ Em cada card de Pokemon deve ter um botão para removê-lo da Pokedex e um outro botão para acessar os detalhes do Pokemon.
  • ✅ Header deve ter um botão para voltar para a Home
  • ✅ Não deve ser possível adicionar o mesmo Pokemon duas vezes na Pokedex
• Página de Detalhes
  • ✅ Mostrar os detalhes do Pokemon selecionado, com informações descritas
  • ✅ Header deve ter um botão para adicionar ou remover da Pokedex e outro para voltar a página home.

---

7. Desenvolvedor

Este projeto foi desenvolvido por:

• Wylchayer Cruz : Linkedin | GitHub