alexandre-fb/lista-de-pokemons-com-api

Pokedex usando Poke Api

Link de acesso

👉 Pokedex

Apresentação

Este projeto faz parte do desafio final do curso DevQuest simulando um teste técnico de processo seletivo.

O projeto foi desenvolvido sem a ajuda dos professores, que deram o feedback quando finalizado.

Tecnologias e ferramentas utilizadas

• Figma;

• Poke Api;

• HTML;

• CSS;

• JavaScript;

• Fetch Api

• ReactJS;

  • Hooks (useState, useEffect, useContext);

  • Styled Components.

  • React Router DOM

    
    

Demandas

• Criar uma Home (página inicial) de listagem de alguns pokemons,utilizando a api https://pokeapi.co/
• Criar uma página interna de detalhe do pokemon.

Requisitos

• A home deve apresentar uma listagem com 10 pokemonsiniciais.
• A home deve ter um botão "Carregar mais" abaixo dessa lista,que quando clicado deve buscar mais 10 pokemons e adicionara listagem atual.
• Essa listagem deve mostrar a imagem e nome de cada pokemon. - Na listagem cada pokemon deve ser clicável e ao clicar o usuáriodeve poder acessar uma página interna desse pokemon cominformações detalhadas, nessa página de detalhes devemaparecer as seguintes informações: - Imagem do pokemon - Nome - Lista de movimentos do pokemon (moves) - Lista de habilidades do pokemon (abilities) - a lista de habilidades deve apresentar o nome e o textodescritivo da habilidade - Tipo do pokemon (type)
• Essa home deve ter um botão para que o usuário possaalternar de cor entre tema claro e tema escuro (light/dark)

Requisitos técnicos

• A aplicação deverá ser Single Page Application (SPA);
• Utilizar React.js para o desenvolvimento daaplicação;
• Utilizar Context API para criação do Theme Toggler(Alternador entre tema claro e escuro);
• Utilizar styled-components para estilização doscomponentes;
• Utilizar react-router-dom para a navegação entre aspáginas.

Layout

• A criação do layout é livre.

Desafios encontrados

Cronograma

Para organizar as ideias iniciais decidi criar um cronograma das fases do projeto. Ao longo do trabalho isso ajudou a retomar o foco algumas vezes, quando via que estava pensando em etapas mais adiantadas. O cronograma pode ser acessado 👉 aqui.

Design

O primeiro passo foi organizar as informações e o layout. No Figma criei as versões desktop, mobile, dark e light, cuidando para atender todos os requisitos.

O projeto do Figma pode ser acessado 👉 aqui.

Conexão com a Api

No início foi um pouco difícil até entender a dinâmica dos dados. Busquei informações na documentação, e, como é uma Api bastante usada, também tinha muita informação na internet. Depois de entendida a lógica dos dados foi só criar as conexões com Fetch.

Organização dos componentes

A estilização dos componentes foi feita com Styled Components, então fui buscando maneira de melhor organizar as pastaa e arquivos ao longo do projeto. Decidi usar como padrão uma pasta para cada componente com um arquivo 'index.js' e um 'styles.js' dentro.

Filtrar por tipo

A parte de desenvolver o filtro por tipo de pokemon foi um desafio grande. Precisei fazer novas conexões com a Api em novos endpoints e usei bastante os métodos de array para manipular os dados.

Alterações após o feedback dos professores

Após o feedback dos professores alterei a forma de requisição da lista dos pokemons ao clicar em "mostrar mais". Inicialmente não estava colocando o valor de 'offset', o que fazia com que toda requisição buscasse toda a lista novemente. Para corrigir isso incluí o 'offset', e fui acrescentando à lista dos Pokemons que já haviam sido buscados somente os dados novos, o que ajudou muito na performance da aplicação.