Skip to content

falcaomm/pokedex-react-api

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 

Repository files navigation

Projeto Pokedex - React e API's

Imagem de demonstração do projeto

Clique aqui para abrir no navegador

O Projeto React e APIs é um site de pokémons que possui três páginas: Home, Pokedex e Detalhes, tendo como fonte de dados para a sua criação a Poke Api, foi desenvolvido com React a partir de gerenciamento de estado global (context) e lógica de rotas, com design pré definido no Figma.

💻 Tecnologias e Recursos Utilizados :

  • React;
  • React Router;
  • React Context;
  • React Hooks;
  • Axios;
  • Integração com API;
  • JavaScript, CSS e HTML;
  • Styled-components;

📝 Lista de Requisitos:

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

🧪 Testando Localmente:

# Com o Node.js instalado clone o repositório do projeto
git clone [URL do repositório]

# Navegue até a pasta do projeto e instale as dependências e 
cd [nome da pasta do projeto]
npm install

# Para iniciar a aplicação, execute o script start
# A aplicação estará disponível na porta padrão 3000.
npm run start

About

Projeto React com consumo de API

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 96.1%
  • HTML 3.6%
  • CSS 0.3%