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.
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.
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.
- 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.
- 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
- 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
- Docker - projeto rodando em um container para desenvolvimento local
- Testes e2e
- Estrutura de dados
- Desenho da arquitetura da solução
- 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