https://github.com/loggi/desafio-frontend
This is desafio-frontend
https://github.com/loggi/desafio-frontend
Last synced: 2 months ago
JSON representation
This is desafio-frontend
- Host: GitHub
- URL: https://github.com/loggi/desafio-frontend
- Owner: loggi
- Created: 2023-07-12T19:17:51.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-11T11:44:46.000Z (over 1 year ago)
- Last Synced: 2025-01-20T22:52:44.295Z (4 months ago)
- Size: 10.7 KB
- Stars: 4
- Watchers: 54
- Forks: 24
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
## Loggi no Talent Fest Brasil 9ª Geração Laboratória
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](https://www.loggi.com/rastreador/)?"**.
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](https://www.loggi.com/rastreador/) 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](https://github.com/joseluizcoe/desafio-loggi-front-end/pulls) 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](https://nextjs.org/) - Para desenvolvimento do front-end e backend (use a rota /api)
* [Material UI](https://mui.com/) - 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](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs) 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