## Development server
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Fala, dev! Tudo bem?
Não estamos em busca de uma estrela (que você seja o pik4 das galáxias). Queremos pessoas que saibam trabalhar em equipe e que possam colaborar e ajudar seus colegas ao longo das tarefas (que são MUITAS).
Este teste tem como objetivo avaliar e desafiar você. Não é obrigatório realizá-lo completamente (nem manjar de todos os frameworks), queremos apenas reconhecer seu esforço e potencial para aprender, se adaptar e tomar decisões.
Sua missão é criar uma landing page (página estática) para buscar, listar e detalhar pokémons, usando a API Pokeapi.co
O layout inteiro é livre, mas a lista deverá conter no mínimo nome e imagem do pokémon.
Sobre a busca, ela poderá ser feita de 2 formas: digitando o nome do pokémon ou listando todos de uma vez (se você fizer a paginação, será um PLUS muito bem-vindo).
Seria interessante ordenar a lista também. Pensamos em pelo menos dois tipos: por ID do Pokémon (padrão) ou por nome (ordem alfabética).
Mas nossa listagem não seria muito útil só com nome e foto de cada Pokémon. Então sugerimos que, ao clicar em um item da lista, abra um modal, com mais detalhes e características dele (fica a seu critério se será um modal ou qualquer outro layout para exibir esses detalhes, inclusive os dados que serão exibidos são de sua escolha também).
Consegue sim! Só precisa saber (ou aprender agora) um pouco sobre as seguintes tecnologias:
-
HTML
-
CSS
-
Javascript
-
Git
-
Consumo de APIs Rest
Você está livre para usar bibliotecas css como Ant Design <3, Boostrap, Material e etc..
Nem tudo são flores e, por conta disso, esse desafio possui algumas regras básicas:
-
Na parte de JS, deve utilizar algum framework (ex.: VueJS, ReactJS ou Angular). Lembrando que VueJS é diferencial, pois o utilizamos aqui na Binds. Você não precisa saber todos, escolha um e seja feliz!
-
Utilizar pelo menos uma função assíncrona nessas requisições da API.
-
Pelo menos uma chamada na PokeApi deve ser armazenada no localStorage, assim você pode utilizar os dados que a chamada à API te retornou, sem ter que chamar várias vezes a mesma rota.
Ex: É feita uma requisição para pegar a listagem inicial dos Pokemóns; coloca-se o resultado em cache e posteriormente quando entrar nessa mesma tela ela não deve fazer a requisição outra vez, e deve então utilizar o que está armazenado no nosso querido localStorage).
PLUS: Pesquise sobre os gerenciadores de estado ─ o VueJS possui o Vuex, assim como o React possui o Redux. Se você conhecê-los, pode usar.
Primeiramente, você pode fazer um fork desse repositório aqui, para sua conta do Github, depois disso crie uma branch nova com o seu nome (ex: nome_sobrenome), para podermos identificá-lo.
Após terminar o desafio, você pode solicitar um pull request para a branch 'main' do nosso repositório. Vamos receber e fazer a avaliação de todos.
Só! Seria um Plus que o código seja devidamente documentado para o facil entendimento.
É isso e boa sorte!