O objetivo do desafio é avaliar as habilidades do candidato à vaga de front-end. Para o desafio disponibilizaremos 7 dias para o desenvolvimento da aplicação descrita abaixo.
Para que a avaliação seja realizada o candidato deverá criar um repositório na sua conta do Github (crie uma, caso não possua) em seguida implementar o projeto descrito abaixo com um deploy do mesmo. Após o desenvolvimento, envie o link do repositório e o link da aplicação publicada para o seu contato da Pedido Pago.
O candidato deverá consumir uma API mockada pela Pedido Pago, criando uma interface pixel perfect com os layouts presentes no Figma, garantindo que todas as funções da tela estejam funcionando e utilizando os dados da API.
- Implementar o react-query para a realização de requisições ao servidor.
- Responsividade na interface para diferentes tamanhos de tela.
- Fidelidade ao layout proposto no Figma, com exceção para a variação mobile que fica a critério do desenvolvedor.
- As páginas de listagem de colaboradores e cargos precisam estar totalmente funcionais, exceto a de detalhes do colaborador e de cargo que podem ser estáticas.
- Ultilizar todas as rotas e dados fornecidos pela API.
- nextjs - Biblioteca usada para o desenvolvimento da aplicação (utilizar o diretório
app
ao invés dopages
) - react-query - Consumo de rotas da API
- emotion - para a criação de componentes e estilos
- typescript - para o desenvolvimento e tipagem do código
- @pedidopago/react-icons - para o uso dos ícones presentes no layout
Para a construção do layout, você pode usar a sua biblioteca de preferência, desde que demonstre experiência em CSS com o uso do emotion, css-in-js ou arquivo de estilos padrão.
- Implementar testes na aplicação com jest e/ou cypress.
- Uso de contextos e hooks para a abstração de informações.
- Estrutura de código, com foco em legibilidade e simplicidade.
- Implementação do modo escuro.
Seu projeto será avaliado de acordo com a qualidade do seu código e sua organização de arquivos do projeto, além do conhecimento utilizado em Typescript/Nextjs para o consumo da API.