amandapolari / projeto-react-apis

Pokedex - Utilização de API

Pokedex

Clique aqui para conferir o resultado final!

Status do Projeto:
Concluído ✔

Tecnologias e Ferramentas utilizadas:

Índice

• 1. Resumo do Projeto
• 2. Definição de Produto
• 3. Protótipo
• 4. Instalação
• 5. Inicialização
• 6. Tecnologias e Ferramentas Utilizadas
• 7. Requisitos do Projeto
• 8. Desenvolvedora

1. Resumo do Projeto

A Pokedex é uma aplicação web que permite aos usuários explorar dados da API dos pokémons. O site exibe informações sobre vários pokémons e possibilita criar uma pokédex personalizada. Desenvolvido com tecnologias como JavaScript, React e Styled Components, o projeto oferece uma experiência interativa. Os usuários podem ver cards de pokémons na página inicial, onde podem acessar detalhes e adicionar pokémons à sua pokédex. A funcionalidade de paginação permite navegar por diferentes páginas de pokémons.

2. Definição de Produto

O Projeto Pokedex três páginas: Home, Pokedex e Detalhes.

Home

Na Home é possível visualizar cards de todos os pokémons recebidos da Poke Api, cada card de pokémon possui um botão para visualizar mais detalhes e outro botão capaz capturar este pokémon para a sua própria pokedex. A Home também possui um sistema de paginação, onde você pode navegar por mais páginas e escolher mais pokémons para a sua pokedex.

Detalhes

O acesso a página de Detalhes pode ser feita tanto da Home quanto da Pokedex. Esta página conta com gifs de visualização do pokémon selecionado, informações sobre atritutos e movimentos. Ainda nesta página é possível adicionar o pokémon em questão na pokedex, bem como excluí-lo caso ele já esteja na sua pokedex.

Pokedex

A página de Pokedex armazena todos os pokémons escolhidos pelo usuário. Caso o usuário atualize sua página os dados não serão perdidos, o usuário poderá visualizar seus pokémons capturados, e em sua home estará apenas os pokémons que ainda não foram escolhidos, permitindo que o usuário continue sua busca e captura de onde parou da última vez.

3. Protótipo

O protótipo de alta fidelidade foi fornecido pela Labenu, se preferir acessar direto pelo Figma, clique aqui, caso contrário acompanhe as imagens a seguir.

Home

Pokedex

Detalhes

4. Instalação

Pré-requisitos:

• Node.js
• npm

Para instalar as dependências no diretório do seu projeto, execute o seguinte comando:

npm install

5. Inicialização

Para iniciar o aplicativo, execute o seguinte comando:

npm run start

6. Tecnologias e Ferramentas Utilizadas

Este site foi construído com:

• JavaScript
• React
• Styled-Components
• Axios
• API
• Chakra-UI
• Figma

7. 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;
  • [✔] Criar um readme para o projeto;
• 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.

8. Desenvolvedora

Este projeto foi desenvolvido por:

Amanda Polari : LinkedIn | GitHub