Entrega teste Pokemon-Go

[jhmoraes]

Para Rodar a aplicação:

Acessar: https://ragged-middle.surge.sh/

O que foi implementado?

-> Backend

• A tabela em excel foi convertida para arquivo JSON.

-> Frontend

• O projeto foi escrito em React.js, css e java script
• Composto por 3 paginas: Página inicial, Detalhes do Pokemon e Página de Erro

Página Inicial:

• A página inicial é composta por um header criado como componente, uma tabela em bootstrap e um barra de paginação ao final da tela.
• A tabela busca as informações do arquivo JSON e exibe 80 pokemons, em uma lista com numeração, nome e tipo do pokemon.
• A tabela é clicável e cada linha leva para o detalhe daquele pokemon.
• Na barra de paginação é possível passar as páginas clicando nos números ou em previous ou next.
• A paginação foi totalmente implementada do zero sem nenhum recurso framework.

Página de Detalhes

• É possível ver as principais informações do pokemon selecionado.
• Possui um botão de voltar para a lista de pokemon e a Logo também volta para a página inicial.

Página de Erro

• Foi implementado uma página de erro caso o usuário digite uma URL não existente.

Detalhes Técnicos

• Páginas para as trocar as de páginas foi utilizado o router e passado como propriedade o número do pokemon, ao ir para o detalhe é exibido na URL o número daquele pokemon
• Também foi utilizado, recursos de useEffect, useState, styled-components, renderização condicional, processos de loop e recursos de javaScript.
• Página responsiva, busquei utilizar unidades de medidas adequadas para responsividade e media queries.

O que ficou faltando?

• Filtro de busca

Melhorias:

• Para melhorar o projeto irei utilizar o estado global para distribuir melhor o código e reduzir as passagens de props. Optei por reduzir as passagens de props nesse projeto.
• Implementar custons hooks para melhorar a manutenção e organização do código.
• Card organizado com recurso de grid(css) para melhor visualização dos detalhes dos pokemons.
• input com opções de quantidade para delimitar a quantidade de pokemons exibidos na lista.
• O layout já é responsivo, mas irei melhorar este quesito e torna-lo mais atrativo.

Obs: Algumas opções de buscas e filtros foram implementadas, mas por conta do tempo para resolver os bugs achei melhor retirar e implementar como melhoria.

Precisei aprender coisas que não sabia, e isso foi maravilhoso, nunca havia usado um arquivo JSON para fazer busca, nem utilizado Node. A prendi bastante com esse projeto e adorei o contato com node, agora vou estudar e me aprofundar na linguagem.