Desafio FrontEnd

.gitignore

@@ -0,0 +1,27 @@
+# Created by https://www.gitignore.io/api/node
+# Edit at https://www.gitignore.io/?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# dotenv environment variables file
+.env
+.env.test
+
+# next.js build output
+.next
+static/manifest.json
+
+# others
+.DS_Store

README.md

@@ -1,64 +1,23 @@
-## Loggi no Talent Fest Brasil 9ª Geração Laboratória
+# Rastreador de pacotes
 
-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 é um projeto [Next.js](https://nextjs.org/) inicializado usando [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) com o Material UI instalado.
 
-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.
+## Como usar
 
-## O desafio
+Clone este repositório:
 
-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.  
+```bash
+git clone https://github.com/indiorlei/desafio-frontend
+```
 
-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.
+Instalar e rodar:
 
+```bash
+yarn install
+yarn dev
+```
 
-## Instruções técnicas
+Abrir http://localhost:3000 com seu navegador para ver o resultado.
+Para testar, pode usar os pedidos `8431675629` ou `123456`
 
-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
+Pode visitar aqui, https://rastreador-de-pacotes-indiorlei.vercel.app/

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,22 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  modularizeImports: {
+    '@mui/icons-material': {
+      transform: '@mui/icons-material/{{member}}',
+    },
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'source.unsplash.com',
+        port: '',
+        pathname: '/random',
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "loggi-app-indiorlei",
+  "version": "5.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/cache": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/icons-material": "latest",
+    "@mui/lab": "^5.0.0-alpha.152",
+    "@mui/material": "^5.14.17",
+    "leaflet": "^1.9.4",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-leaflet": "^4.2.1"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.8",
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "eslint": "latest",
+    "eslint-config-next": "latest",
+    "typescript": "latest"
+  }
+}

public/tracking.json

@@ -0,0 +1,128 @@
+[
+  {
+    "sender": {
+      "company_name": "UCI ParkShopping Canoas",
+      "address": {
+        "zipcode": "92020-475",
+        "city": "Canoas",
+        "state": "RS",
+        "street": "Av. Farroupilha, 4545 - Loja 3004 - Mal. Rondon",
+        "latitude": -29.914886,
+        "longitude": -51.165661
+      }
+    },
+    "receiver": {
+      "address": {
+        "zipcode": "90230-220",
+        "city": "Porto Alegre",
+        "state": "RS",
+        "street": "Av. França, 1024",
+        "latitude": -30.0045328,
+        "longitude": -51.1972262
+      }
+    },
+    "delivery_deadline": "2022-12-19",
+    "freight_id": "FR221205VNHQA",
+    "order_number": "8431675629",
+    "status": [
+      {
+        "name": "Solicitado",
+        "date": "2022-12-05 03:35",
+        "condition": "done"
+      },
+      {
+        "name": "Aguardando coleta / postagem",
+        "date": "2022-12-05 03:35",
+        "condition": "done"
+      },
+      {
+        "name": "Coletado / Postado",
+        "date": "2022-12-05 05:13",
+        "condition": "done"
+      },
+      {
+        "name": "Em transferência",
+        "date": "2022-12-06 22:10",
+        "condition": "done"
+      },
+      {
+        "name": "Em trânsito",
+        "date": "2022-12-07 05:37",
+        "condition": "done"
+      },
+      {
+        "name": "Em rota para entrega",
+        "date": "2022-12-07 07:56",
+        "condition": "done"
+      },
+      {
+        "name": "Entregue",
+        "date": "2022-12-07 09:30",
+        "condition": "current"
+      }
+    ]
+  },
+  {
+    "sender": {
+      "company_name": "McDonald's",
+      "address": {
+        "zipcode": "21941-353",
+        "city": "Rio de Janeiro",
+        "state": "RJ",
+        "street": "Estrada do Galeão, 2825 - Portuguesa",
+        "latitude": -22.8069552,
+        "longitude": -43.2100537
+      }
+    },
+    "receiver": {
+      "address": {
+        "zipcode": "88062-400",
+        "city": "Florianópolis",
+        "state": "SC",
+        "street": "Av. das Rendeiras, 622 - Lagoa da Conceição",
+        "latitude": -27.6077089,
+        "longitude": -48.4584494
+      }
+    },
+    "delivery_deadline": "2022-12-19",
+    "freight_id": "FR221205VNHQA",
+    "order_number": "123456",
+    "status": [
+      {
+        "name": "Solicitado",
+        "date": "2022-12-05 03:35",
+        "condition": "done"
+      },
+      {
+        "name": "Aguardando coleta / postagem",
+        "date": "2022-12-05 03:35",
+        "condition": "done"
+      },
+      {
+        "name": "Coletado / Postado",
+        "date": "2022-12-05 05:13",
+        "condition": "done"
+      },
+      {
+        "name": "Em transferência",
+        "date": "2022-12-06 22:10",
+        "condition": "done"
+      },
+      {
+        "name": "Em trânsito",
+        "date": "2022-12-07 05:37",
+        "condition": "done"
+      },
+      {
+        "name": "Em rota para entrega",
+        "date": "2022-12-07 07:56",
+        "condition": "done"
+      },
+      {
+        "name": "Entregue",
+        "date": "2022-12-07 09:30",
+        "condition": "current"
+      }
+    ]
+  }
+]

src/app/api/tracking/route.ts

@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from "next/server";
+import Trackings from "../../lib/tracking.json";
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const trackingCode = searchParams.get("trackingCode");
+
+  if (!trackingCode) return NextResponse.json({});
+
+  const deliveryFound = Trackings.find(
+    (item: { order_number: string }) => item.order_number === trackingCode
+  );
+
+  if (!deliveryFound) {
+    return NextResponse.json({
+      hasError: true,
+      error: "delivery not found",
+      data: null,
+    });
+  }
+
+  return NextResponse.json({ data: deliveryFound });
+}

src/app/layout.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+import ThemeRegistry from "@/components/theme-registry/ThemeRegistry";
+import { Header } from "@/components";
+
+export const metadata = {
+  title: "Acompanhe suas Entregas em Tempo Real | Loggi",
+  description:
+    "Com a Loggi você consegue acompanhar sua entrega e saber exatamente quando seu pedido vai chegar. Acesse nosso rastreador e veja como é fácil!",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeRegistry>
+          <Header />
+
+          {children}
+        </ThemeRegistry>
+      </body>
+    </html>
+  );
+}