Challenge - Jonatas Pinto

.dockerignore

@@ -0,0 +1,6 @@
+Dockerfile
+.dockerignore
+node_modules
+README.md
+.next
+.git

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:@next/next/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "react"],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.nvmrc

@@ -0,0 +1 @@
+v18.17.1

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.format": true
+  },
+}

Dockerfile

@@ -0,0 +1,26 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
+  # Allow install without lockfile, so example works even without Node.js installed locally
+  else echo "Warning: Lockfile not found. It is recommended to commit lockfiles to version control." && yarn install; \
+  fi
+
+COPY src ./src
+COPY public ./public
+COPY next.config.js .
+COPY tsconfig.json .
+
+# Start Next.js in development mode based on the preferred package manager
+CMD \
+  if [ -f yarn.lock ]; then yarn dev; \
+  elif [ -f package-lock.json ]; then npm run dev; \
+  elif [ -f pnpm-lock.yaml ]; then pnpm dev; \
+  else yarn dev; \
+  fi

README.md

@@ -1,64 +1,182 @@
-## Loggi no Talent Fest Brasil 9ª Geração Laboratória
+## Live at:
 
-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/)?"**.
+https://challenge-tracker-frontend.vercel.app/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.
+Códigos de ratreio dos pedidos mocados.
+| ID | Status |
+| --- | --- |
+| ABCD12345 | Em trânsito |
+| EFGH67890 | Entregue |
+| IJKL34567 | Em trânsito |
 
-## 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.  
+## Descrição do desafio e requisitos técnicos:
 
-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.
+Leia a descrição do desafio e os requisitos técnicos no [challenge.md](challenge.md) para obter mais detalhes.
 
+---
 
-## Instruções técnicas
+## Como rodar o projeto:
 
-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.
+#### Clone o repositório:
 
-Importante: Use o README.md do seu repositório para nos mostrar as instruções de como rodar seu projeto.
+```shell
+  git clone git@github.com:jonataspinto/challenge-tracker-frontend.git
+```
 
-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
+#### Requisitos:
 
-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.
+```
+  Nodejs versão 18
+```
 
-Sugerimos que para a parte de backend (retorno de dados) você use (ou implemente) algum mock para que consiga focar apenas no front-end.
+> **Note**
+> A versão sugerida já está configurada no `.nvmrc` basta executar `$ nvm use`
 
+#### Instalação de dependências:
 
-## 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.
+- Navegue para a raiz do projeto.
 
-### 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
+```shell
+  cd challenge-tracker-frontend
+```
 
-### 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
+- Instalando as dependências.
 
-### Nível Avançado:
-- Docker - projeto rodando em um container para desenvolvimento local
-- Testes e2e
-- Estrutura de dados
-- Desenho da arquitetura da solução
+```shell
+  yarn
+```
 
-## 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
+ou
+
+```shell
+  npm run install
+```
+
+#### Iniciar servidor de desenvolvimento:
+
+```shell
+  yarn dev
+```
+
+ou
+
+```shell
+  npm run dev
+```
+
+Acesse [localhost:3000](http://localhost:3000) para visualizar em seu navegador. :tada:
+
+#### Build de produção:
+
+```shell
+  yarn build
+```
+
+ou
+
+```shell
+  npm run build
+```
+
+#### Iniciar servidor após Build:
+
+```shell
+  yarn start
+```
+
+ou
+
+```shell
+  npm run start
+```
+
+Acesse [localhost:3000](http://localhost:3000) para visualizar em seu navegador. :tada:
+
+### Rodando com Docker
+
+#### Requisitos
+
+Instale o [Docker Desktop](https://docs.docker.com/get-docker/) para Mac, Windows ou Linux. `Docker Desktop` inclui `Docker Compose`` como parte da instalação.
+
+#### Iniciar servidor de desenvolvimento:
+
+Build da imagem:
+
+```shell
+  docker compose build
+```
+
+Rodando o container da aplicação:
+
+```shell
+  docker compose up -d
+```
+
+Acesse [localhost:3000](http://localhost:3000) para visualizar em seu navegador. :tada:
+
+---
+
+## Testes automatizados.
+
+### Testes unitários/integração:
+
+Rodando os testes:
+
+```sell
+  yarn test
+```
+
+ou
+
+```shell
+  npm run test
+```
+
+### Testes e2e:
+
+> **Note**
+> O cypress está configurado para acessar o ambiente http://localhost:3000, então o projeto deve estar rodando antes de executar o comando de testes.
+
+Rodando os testes:
+
+```sell
+  yarn test:cypress
+```
+
+ou
+
+```shell
+  npm run test:cypress
+```
+
+---
+
+## Explicando algumas decisões:
+
+#### Nextjs + Material UI
+
+Segui o que foi proposto [desafio](challenge.md).
+
+#### Typescript
+
+Embora o boilerplate sugerido ainda não esteja configurado, optei pelo TypeScript devido à minha familiaridade com a linguagem.
+
+#### Corbetura de testes
+
+Testes de unidade e integração, implementados com o uso do Jest e do RTL, desempenham um papel crucial na garantia de que os componentes reutilizáveis em uma aplicação se comportem de maneira consistente em diversos cenários. Entretanto, é inegável que escrever uma quantidade substancial de testes para abranger toda a aplicação pode ser um processo demorado.
+
+Diante dessa realidade, embora tenha desenvolvido alguns testes com Jest e RTL como demonstrações de boas práticas, tomei a decisão estratégica de dar ênfase aos testes end-to-end (E2E) em uma parte significativa da cobertura. Essa decisão se fundamenta na eficiência da implementação e na minha aspiração de demonstrar competência em uma ferramenta menos convencional.
+
+Vale ressaltar que um dos fatores que contribuíram para essa escolha foi a utilização do Material-UI, uma vez que todos os componentes já são submetidos a testes abrangentes, o que aumenta a confiabilidade do sistema como um todo.
+
+#### Layout
+
+No modelo original, o cabeçalho era visível somente na visualização para desktop. Optei por manter o cabeçalho visível em ambas as visualizações, desktop e mobile, enquanto reorganizava os elementos de navegação, separando-os em links de páginas e links de autenticação.
+
+No formulário, mantive a estrutura geral, com foco na melhoria da consistência dos espaçamentos, bordas e na paleta de cores. Além disso, acrescentei informações detalhadas sobre os serviços disponíveis no catálogo da Loggi.
+
+No rodapé, a estrutura permaneceu a mesma, com uma exceção: um bloco adicional que inclui os links para as redes sociais e os termos. A exclusão desse último bloco ocorreu devido ao prazo de entrega do desafio.
+
+Na tela de detalhes, mantive a estrutura principal, concentrando-me na aprimoração da consistência dos espaçamentos, bordas e paleta de cores.