/poke-gallery

Projeto para listagem de pokemons com o uso da API pokeapi.

Primary LanguageJavaScript

PokeGallery

ObjetivoPreviewFuncionalidadesTecnologias utilizadasInstalação

🔖 Objetivo


🚀 Projeto desenvolvido para fins de estudo da biblioteca React JS com o consumo de uma API REST (PokeAPI).

Screenshots das telas

📸 Desktop



📱 Mobile

Você pode conferir o resultado final em: PokeGallery

✅ Funcionalidades


  • Listagem dos pokémons: Listar os pokémons com o uso da API REST.

  • Ampliar a listagem dos pokémons: Criar um button, para ampliar a quantia de pokémons mostrada ao usuário.

  • Buscar pokémons: Método para filtrar os pokémons a partir do seu nome ou ID.

  • Efeito no cartão do pokémon: Criar uma animação ao usuário com efeito hover no cartão do pokémon.

  • Selecionar pokémon: Criar uma página na aplicação com mais detalhes sobre o pokémon escolhido. Essa página mudará de cor, conforme o tipo do pokemon selecionado. Exemplo: pokemon do type Fire, sua página será vermelha.

  • NavTabs para navegar entre as seções: - [Stats] - [Biografy] - [Evolution].

  • Criar seções do pokémon: Separar as informações do pokémon em três seções: [Stats], [Biografy], [Evolution].

  • Seção Stats: Pontos de batalha do pokémon, como vida, ataque, defesa, velocidade, especial ataque e especial defesa.

  • Seção Biografy: Dados básicos sobre o pokémon, como altura, peso, habilidades, biografia e a parte do treinamento desse pokemon.

  • Seção Evolution: Construir a árvore de evolução do pokémon.

  • Transformar em responsivo: Fazer a responsividade do site.

🎲 Rodando o projeto


Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js.

#### Clone este repositório

`$ git clone <https://github.com/Ariane-Brum/poke-gallery.git>`

#### Acesse a pasta do projeto no terminal/cmd

`$ cd poke-gallery`

#### Instale as dependências

`$ npm install`

#### Execute a aplicação em modo de desenvolvimento

`$ npm start`

⚡ Tecnologias utilizadas

  • React JS
  • CSS Modules
  • Sass
  • Axios
  • React-Icons
  • React Router Dom

Made with ♥️ by Ariane Brum.