Site de Pokémons - Projeto de Front End com API

Esse projeto teve como fonte de dados para sua criação a Poke API, uma API pública. Esse projeto possui três páginas: Home, Pokedex e Detalhes. E nele pratiquei os conteúdos: Integração de APIs, React Router, Design Systems e Estado Global.

Índice

• Tecnologias utilizadas
• Funcionalidades
• Deploy
• Demonstração

Tecnologias utilizadas

ReactJS | Axios | React Context | Hooks | React Router | Styled Components | Chakra UI

Funcionalidades

Home

• ✅ O usuário consegue visualizar uma lista de pokémons.
• ✅ Em cada card do Pokémon, tem um botão para adicioná-lo à Pokédex e um outro botão para acessar os detalhes do Pokémon.
• ✅ O usuário não consegue adicionar o mesmo Pokémon duas vezes na Pokédex.
• ✅ E no header, tem um botão que dá acesso à Pokédex.

Pokédex

• ✅ O usuário consegue visualizar os Pokémons que ele adicionou na Pokédex.
• ✅ E em cada card, vai ter um botão para o usuário excluir o Pokémon.
• ✅ No header, vai ter uma opção pra voltar para Home.

Página de detalhes

• ✅ O usuário consegue visualizar as informações do Pokémon selecionado.
• ✅ No header, vai ter uma opção pra adicionar ou remover o Pokémon da Pokédex, e também um botão pra voltar para Home.

Deploy

https://projeto-pokeapi.vercel.app/

Demonstração