Pokédex

Índice

• Funcionalidades do projeto
• Layout
• Demonstração
• Tecnologias Utilizadas
• Como Rodar este projeto

Funcionalidades do Projeto

Geral:

• 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
• Há uma função de paginação

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.

Layout

Home Page

Adicionar na Pokédex

Remover da Pokédex

Pokédex

Detalhes Page

Demonstração

Link de demonstração: Aqui

Tecnologias Utilizadas

• React.js
• React Router
• Styled-components
• React Context
• Hooks
• Axios
• React Icons
• Chakra-ui
• Mui-Material

Como Rodar este projeto

Clone este repositório:
git clone https://github.com/celio-cleiton/projeto-pokemon-api

Acesse a pasta do seu projeto no seu terminal

cd projeto-pokemon-api

Instale as dependências

npm install

Execute a aplicação

npm run start A aplicação sera iniciada na porta 5173, acesse pelo navegador

Autor

Célio Cleiton do Vale Rodrigues

Linkedin
GitHub