Pokédex React

Clique aqui para acessar a PokéDex.

💻 Projeto

Desenvolver um programa web para a visualização de pokémons e alguns atributos, como nome, tipo e habilidades. Para criar esse projeto foi utilizado o framework React. Além disso, os dados de cada pokémon são requisitados por meio da API Rest PokéApi.

O desing do projeto foi desenhado por mim, aqui vocês podem ver o site funcionando.

Funcionalidades

• Listagem dos pokémons: Listar os pokémons com o uso da API REST.
• Listagem dos últimos pokémons vistos: Gerar cards com os últimos 3 pokémons vistos.
• Buscar pokémons: Método para filtrar os pokémons a partir do seu nome ou id.
• Botões para trocar de pokémon: Botões funcionais para passar entre os pokémons usando o ID de cada um. Os botões só funcionam entre os IDs 1 e 898, e assim que chegam entre os limites os botões para de funcionar.
• Pokémons aleatórios: Cada vez que a página é atualizada um pokémon aleatório aparece na Card príncipal.
• Tratamento de valores inválidos no input: O programa apresenta uma sinalização caso um valor inválido seja inserido e não realiza a pesquisa.
• Cor do card personalizada: As cores do card variam conforme o(s) tipo(s) do pokémon.
• Layout responsivo: A plataforma adapta o layout em vários dispositivos com tamanhos e resoluções diferentes.

Conceitos abordados

• Uso de flexbox para alinhar e ajustar elementos na página.
• Consumo de api com o uso da lib axios.
• Uso de hooks para controlar os pokémons pesquisados.
• Controle na listagem dos últimos pokémons visto por meio de um array.
• Controle dos cards com a cor dos pokémons por meio de um array de constantes.

Notas

• O maior ID na listado é 898, pois a partir desse número a API apresenta alguns erros nas informações do pokémon, como imagem, caracteríscas e outros.

🚀 Tecnologias

• React
• Axios
• React Router