Este é um repositório dedicado ao último estágio do processo seletivo do programa MandaBem!
O teste se baseia no consumo da API Pokémon, baseada na PokéAPI , e apresentá-la de maneira criativa.
Diante isso, pensei em criar uma PokéDex que consome os dados devolvidos pela a API e apresenta na tela.
Tive a liberdade de escolher a tecnologia que me sentia mais a vontade para desenvolver
Portanto, utilizei as que possuía maior afinidade para maior agilidade e performance.
Segue abaixo uma tabela com as principais tecnologias utilizadas:
REACTJS | JAVASCRIPT | BOOTSTRAP | CSS | HTML |
---|---|---|---|---|
Além disso, outras dependências foram utilizadas para a construção da página, como:
- React Icons -> Utilizar ícones prontos, visando um melhor design.
- Axios -> Biblioteca open source com o objetivo de realizar requisições HTTP.
- Requisição de todos os pokémons.
- Criatividade em relação da estilização
- Requisição de um pokémon em específico utilizando o parâmetro name.
Quando a página for inicializada, ela fará uso da API para requisitar os dados de todos os pokémons.
Quando a resposta à requisição estiver pronta, todos os pokémons serão retornados em um objeto, e o primeiro pokémon contido no objeto será exibido na tela.
No entanto, para evitar fazer uma requisição cada vez que o usuário desejar trocar de pokémon na tela, optei por armazenar os dados de todos os pokémons no SessionStorage.
Dessa forma, mantenho os dados em cache no momento em que a página for aberta, pego os dados no SessionStorage quando necessitar, e quando a página for fechada, os dados serão apagados do SessionStorage.
Assim, utilizo de uma boa prática de programação e não preciso ficar requisitando toda vez que um novo pokémon aparecer na tela.
Entretanto, para a busca por nome de um pokémon, optei por realizar a requisição toda vez que essa funcionalidade for usada, para que, dessa maneira, eu possa mostrar que tenho entendimento tanto de realizar requisições HTTP, quanto de buscar informações em cache.
Caso deseje ver o resultado deste teste, é necessário que você tenha o Node instalado em seu computador.
Após a instalação, siga os seguintes passos:
Primeiro é necessário clonar esse repositório para dentro de sua máquina.
Você pode fazer isso com o seguinte comando:
git clone https://github.com/LiedsonAugusto/Mandarin-pokedex.git
Após esse comando, entre no repositório clonado para as seguintes etapas.
Quando estiver dentro, é necessário instalar as dependências do projeto. Utilize o comando abaixo para realizar essa ação:
npm install
Feito isso, abra um servidor localhost e acesse a página pelo navegador, utilize este comando:
npm run preview
Dessa forma, ele dispobilizará uma prévia de como a página ficaria caso fosse postada em produção, no endereço localhost:4173,
Pronto! Feito isso é apenas necessário entrar em seu navegador na porta indicada e ver o resultado, espero que goste!