coodesh / kotas-front-challenge

Front Challenge - Pokémons

Introdução

Este é um teste para que possamos ver as suas habilidades como Front Developer.

Nesse teste você deverá desenvolver um projeto para listar pokémons, utilizando como base a API https://pokeapi.co/. O projeto a ser desenvolvido por você tem como objetivo exibir uma listagem, buscar e mais detalhes conforme indicado nos casos de uso que estão logo abaixo.

[SPOILER] As instruções de entrega e apresentação do teste estão no final deste Readme (=

Antes de começar

• O projeto deve utilizar a Linguagem específica na avaliação. Por exempo: Vue.js, Nuxt.js
• Considere como deadline da avaliação a partir do início do teste. Caso tenha sido convidado a realizar o teste e não seja possível concluir dentro deste período, avise a pessoa que o convidou para receber instruções sobre o que fazer.
• Documentar todo o processo de investigação para o desenvolvimento da atividade (README.md no seu repositório); os resultados destas tarefas são tão importantes do que o seu processo de pensamento e decisões à medida que as completa, por isso tente documentar e apresentar os seus hipóteses e decisões na medida do possível.

Front-end

• Consumir a API (https://pokeapi.co/) e construir uma aplicação em Vue 3 ou Nuxt 3
• Aplicação de Design System para estruturação de CSS.
• Figma com os arquivos do desenho da plataforma: https://www.figma.com/file/7s6fPACcLCmef4JZ8cM35v/Teste-FrontEnd---Pokemon?node-id=0%3A1

Requisitos

1 - Tela de listagem Pokémons, sendo 24 registros por página com paginação em Scroll (Infinita). 2 - Pesquisa de um Pokémon específico por ID ou Nome. 3 - Exibir o detalhe de um Pokémon ao clicar em um card, mostrando os seus efeitos. Exibir o detalhe de um Pokémon ao clicar em um card, mostrando os seus efeitos. (Deve ser redirecionado para um página nova, sendo possível também pesquisar um pokémon específico via parâmetro na url) 4 - Responsividade para visualização em dispositivos Móveis. 5 - Aplicação de Clean Code no projeto. Não é necessário listar todos os dados, somente alguns básicos.

Diferencial

Você irá se destacar mais ainda!

1- Utilização de Nuxt 3 com diferentes estratégias de renderização (static, ssr etc). 2- Utilização de Tailwindcss. 3- Em caso do Vue 3 a utilização de Typescript. 5- Utilização do Pinia para gerenciamento de estado. 6- Utilização do Tanstack Query.

Readme do Repositório

• Deve conter o título do projeto
• Uma descrição sobre o projeto em frase
• Deve conter uma lista com linguagem, framework e/ou tecnologias usadas
• Como instalar e usar o projeto (instruções)
• Não esqueça o .gitignore
• Se está usando github pessoal, referencie que é um challenge by coodesh:

This is a challenge by Coodesh

Finalização e Instruções para a Apresentação

1. Adicione o link do repositório com a sua solução no teste
2. Adicione o link da apresentação do seu projeto no README.md.
3. Verifique se o Readme está bom e faça o commit final em seu repositório;
4. Envie e aguarde as instruções para seguir. Sucesso e boa sorte. =)

Suporte

Use a nossa comunidade para tirar dúvidas sobre o processo ou envie uma mensagem diretamente a um especialista no chat da plataforma.