dziul / je-delivery

challenge Zé Delivery

Jé Delivery

Jé, a irmã gêmea do Zé na área!

O desafio: https://github.com/.../frontend-mobile_pt.md

base: Zé delivery

observações:

• Um dos requisitos: "Evite usar scaffolds (Create React App etc.), nós queremos ver como você cria a estrutura do projeto"; meio que é contraditório com: "Mantenha simples, não há necessidade de coisas extravagantes"; se a ideia é manter simplicidade, faz todo sentido usarmos o create-react-app, ou até mesmo createapp.dev. Não vamos desperdiçar nosso engov logo aqui.

• usei um tempo acima do esperado em procura de um Geocoding API "grátis" que atendia o desejado. A primeira tentativa foi o uso do próprio API Google Maps. Tentei usar a apiKey__ que há em _ze.delivery (imaginei q pelo menos poderia funcionar no localhost 😅), mas sem sucesso. Então tentei gerar uma chave, porém desisti por ser pago 💸.

  Geocoding API - Google Maps

  Depois de muita investigação, encontrei o MapBox, e nele "brindei" 🍻.

  Geocoding API - Mapbox

Visualizar no navegador

1. instale as dependências: npm i; na pasta raiz do projeto
2. é necessário adicionar a apikey do MapBox. Crie um arquivo, .env.local e adicione:

    REACT_APP_MAPBOX_API_KEY="SUA CHAVE"
   

3. Execute o projeto: npm start
4. busque pelo endereço: Rua Américo Brasiliense, São Paulo

Uso no desenvolvimento

React

• create-react-app

  Sei que foi mencionado em não usar, mas também pediram simplicidade. Há algo mais simples e agradável em começar um projeto com apenas 1 comando? Sim!!! Pedir sua bebida gelada no Jé Delivery.

• Custom Environment Variables
• @craco/craco

  no momento apenas para poder usar alias

• apollo graphql
• react-icons
• react-router-dom
  • history,
• axios
• Redux Toolkit
  • redux; react-redux

  Como o React Context API não possui algo como o useSelector do redux. Além da simplicidade e um padrão estabelecido do uso do redux, aqui está nosso amigo.

Design

• photopea para editar o logo Zé para Jé

  ótima alternativa ao Photoshop

APIs

• Geocoding API - Mapbox

Petiscos, pensado em usar mais deixamos para próxima rodada:

• styled-component
• eslint 💛
• lint-staged 💛
• husky + commitlint 💛

Comandos relevantes

comando	descrição
npm run start	sobe o projeto local em localhost:3000
npm run test	executa os testes

Extras

Bugs encontrados no Zé Delivery (web)

1. ao acessar diretamente um produto, por exemplo Skol300ml, o botão voltar não funciona como desejado. Dá entender que está usando o goBack do history do navegador.

   Por que acho? Ao acessar a página de produto e selecionar (click) o produto segurando o CTRL, na aba aberta o voltar não funciona. Ao pegar a url e colar em outra aba, o voltar é acaba sendo a página anterior da aba.

2. o breadcrumb não está funcionando, pelo menos ná página do produto.