Um site com pokemons para você capturar na sua pokedex.
Explore o documento »

O Projeto React e APIs é um site de pokémons que possui três páginas: Home, Pokedex e Detalhes. O projeto está subdivido em temas de acordo com os conteúdos estudados durante o Módulo 2 - Frontend no bootcamp da Labenu.

Este projeto terá como fonte de dados para a sua criação a Poke Api, uma Api pública, muito usada para aplicações focadas em aprendizado de programação e também usada em cases de processos seletivos.

Os conteúdos principais a serem utilizados são:

• Integração de APIs
• React Router
• Design Systems
• Estado Global

(back to top)

O objetivo deste projeto é criar um site com três páginas usando a PokeApi - API com as seguintes ferramentas:

• ReactJs
• React Router
• Styled-components
• React Context
• Axios

(back to top)

• 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;

  • Criar um readme para o projeto.

    (back to top)

(back to top)

Versel: https://projeto-react-apis-chi.vercel.app/

Esse é um exemplo das intruções de como você configura o projeto localmente. Para ter uma copia local, siga os passos abaixo:

• npm

  npm install npm@latest -g

1. Clone do repositório

   git clone https://github.com/marinajaudy/projeto-frontendreact.git

2. Install NPM packages

   npm install

(back to top)

Site onde você pode capturar seus pokemons para sua própria Pokedex. Além disso, é possível ver informações detalhadas do pokemon da sua escolha.

(back to top)

• HomePage
  • Página com 21 pokemons da API PokeAPI.
• Pokedex Page
  • Página todos os pokemons que você capturar para sua pokedex.
• Details Page
  • Informações detalhadas sobre o pokemon selecionado.

(back to top)

Marina Jaudy - marinarrjaudy@hotmail.com

Project Link: https://github.com/marinajaudy/projeto-react-apis.git

(back to top)

• PokeApi - API
• Aos professores da Labenu
• Meus colegas de sala que me ajudaram no processo do projeto

(back to top)