Giter Club home page Giter Club logo

mandarin-pokedex's Introduction

Mandarin pokedex.

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.

Tecnologias.

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.

Requisitos.

  • Requisição de todos os pokémons.
  • Criatividade em relação da estilização

Opcionais.

  • Requisição de um pokémon em específico utilizando o parâmetro name.

Como foi feito.

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.

Como ver o resultado.

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!

mandarin-pokedex's People

Contributors

liedsonaugusto avatar

Stargazers

Costa Joseff avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.