Pedido Pago Challenge

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.

Instruções para a entrega

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.

Descrição do projeto

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.

Funcionalidades Requeridas

• 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.

Tecnologias Requeridas

• nextjs - Biblioteca usada para o desenvolvimento da aplicação (utilizar o diretório app ao invés do pages)
• 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.

Diferenciais

• 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.

Critérios de avaliação

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.