Desafio de front-end

Olá! Estamos felizes em te apresentar o desafio de front-end da Loggi. A partir de agora, você está recebendo o desafio de construir, com a sua visão, "como deveria ser a interface do rastreador de pacotes da Loggi?".

Este desafio pode ser usado para avaliar tecnicamente todas as pessoas interessadas em nossas vagas de desenvolvimento de Frontend. O que muda, basicamente, são os critérios de avaliação.

O desafio

Quando fazemos uma compra online, ou enviamos uma encomenda para um amigo ou cliente, gostamos de acompanhar e saber o que está acontecendo com nosso pacote. Esta experiência é muito importante tanto para quem envia quanto para quem está aguardando recebimento.

Neste desafio, te convidamos a pensar como "dono da Loggi". É você quem vai definir (e implementar) como será a experiência de uso deste "rastreador". Você pode usar como inspiração o rastreador atual do site da Loggi ou de outros sites que você use e goste de acompanhar suas encomendas.

Instruções técnicas

Você deverá criar um fork deste repositório e desenvolver no seu espaço no GitHub. Ao final do desenvolvimento, você deverá abrir um Pull Request para o repositório do desafio (este repositório) ou enviar o link do seu repositório para um de nossos recrutadores.

Importante: Use o README.md do seu repositório para nos mostrar as instruções de como rodar seu projeto.

Para este desafio, temos algumas ferramentas que gostaríamos que fossem utilizadas:

• Next.js - Para desenvolvimento do front-end e backend (use a rota /api)
• Material UI - Para componentes visuais de front-end
• GitHub - para versionamento de código

Para não perder tempo configurando projeto, você pode usar este template pronto que usa as ferramentas acima.

Sugerimos que para a parte de backend (retorno de dados) você use (ou implemente) algum mock para que consiga focar apenas no front-end.

O mínimo que esperamos

• Que você seja a pessoa que fez o projeto - ficaríamos bem desapontados se outra pessoa fizesse o desafio por você.
• Que os commits sejam pequenos, com poucas alterações, mostrando seu raciocínio de construção nos comentários

Separamos alguns níveis de avaliação.

Nivel Básico:

• Documentação - precisamos conseguir rodar o projeto apenas lendo a documentação, sem perguntar nada para ninguém.
• Documentação - além de entender o projeto, é importante estarem documentadas as decisões (principalmente de experiência do usuário)
• Organização do código
• Componentes React (HTML) escrito da maneira mais semântica possível
• Mobile first e layout responsivo
• Parte visual da experiência proposta

Nível Médio:

• Testes unitários
• BEM (css)
• Aplicação de animações (sem degradar a performance)
• Ver o projeto rodando online em algum lugar (Bucket estático S3, Heroku, Netlify, Vercel)
• Pull request criado neste repositório a partir do fork

Nível Avançado:

• Docker - projeto rodando em um container para desenvolvimento local
• Testes e2e
• Estrutura de dados
• Desenho da arquitetura da solução

O que será avaliado em todos os níveis

• Criatividade (da solução proposta)
• Experiência de uso do serviço
• Histórico de commits
• Documentação de como rodar o projeto
• Organização do seu código
• Adaptação mobile (layout responsivo)
• Componentização e extensibilidade dos componentes Javascript