OBS: Essa é a branch main, ela usa o com o localStorage para consumir e persistir os dados e é essa versão que foi publicada no Netlify. Mas temos outra branch que se chama feature/json-server em que simulamos uma API REST com json-server e consumimos os dados a partir desse servidor, para acessá-la, vá na branch feature/json-server.

• O projeto tem o intuito de simular um site de entrega de café, onde podemos escolher o tipo de café, a quantidade, adicionar no carrinho, adicionar e selecionar endereços e buscá-lo via CEP usando a api brasilapi. Além disso, podemos ver o total da compra e finalizar o pedido.

• Outro objetivo foi aprender a criar interfaces com Chakra UI e consumir os dados via com React Query e axios.

• O site foi publicado com CI/CD por meio da plataforma Netlify.

• Acesse e teste o projeto em: https://coffee-delivery-aszurar.netlify.app

  Coffee Delivery

• O projeto tem o intuito de simular um marketplace de café, onde podemos escolher o tipo de café, a quantidade, adicionar no carrinho, adicionar e selecionar endereços e buscá-lo via CEP usando a api brasilapi. Além disso, podemos ver o total da compra e finalizar o pedido.

• O objetivo desse projeto é praticar o gerenciamento e manipulação de Estados via Zustand, além de construir uma estrutura em que criamos 4 store simulando o que seriam 4 slices de um Redux, cada um responsável por um recurso e suas funções de manipulação, cada um com seu hook de seletor próprio. Assim conseguimos usar cada Estado em seu componente sem afetar outro recurso ou provocar a renderização desnecessária de outros componentes.

• A acessibilidade foi levada em consideração, com o uso da lib axe-core para testes e correções, assim como leitor de tela ChromeVox.

• Esse projeto é derivado da formação React da Rocketseat, sendo o 2º desafio dessa trilha.

• Tela inicial

_ _

• O objetivo do projeto é aprender a usar o Chakra UI para criar interfaces, praticar o uso do Zustand para o gerenciamento e manipulação do Estado e praticamos o uso do Vitest para testes unitários nas funções de manipulação de dados. Além disso, praticamos o consumo de dados com React Query e axios.

1. Gerenciamento e manipulação de Estados com Zustand;
   • Criação de 4 stores simulando slices de um Redux:
     • Um para o carrinho;
     • Um para os pedidos;
     • Um para os endereços;
     • Um para o de pagamentos;
2. Consumo de dados com React Query e axios melhorando o cache e a performance;
3. Criação de interfaces com Chakra UI;
4. Criação de testes unitários com Vitest;
5. Animação com Framer Motion;
6. Preenchimento automático de endereço por de busca via CEP com a API BrasilAPI;
7. Conseguimos adicionar, remover e editar itens no carrinho;
8. Conseguimos adicionar, remover e editar endereços;
9. Conseguimos adicionar um pedido já realizado anteriormente ao carrinho;
10. Buscamos endereços via CEP;

1. Criação de interfaces com Chakra UI;
2. Animações com Framer Motion
3. Simluação de Slices com Zustand

• Carrinho

_

• O Design foi disponibilizado pela Rocketseat, e pode ser acessado no link abaixo:

1. NodeJS
2. ReactJS
3. Vite
4. PNPM

• Adição do endereço e método de pagamento

_ _

• O projeto foi desenvolvido utilizando as seguintes tecnologias:

  1. axios
  2. axe-core/react
  3. Chakra UI
  4. Framer Motion
  5. JavaScript
  6. Json Server
  7. Netlify
  8. NodeJS
  9. Phosphor Icons
  10. React
  11. React Hook Form
  12. Sonner
  13. PNPM
  14. TypeScript
  15. Vite
  16. Vitest
  17. zod

• Tela de finalização

_

https://coffee-delivery-aszurar.netlify.app

• Para a publicação da aplicação foi por meio da plataforma Netlify onde é possível publicar de forma rápida, fácil e simples projetos React que estão hospedados no GitHub, GitLab, dentre outras plataformas de repositório remoto de graça.
• Com isso, o CI/CD já é aplicado automaticamente por meio dessa plataforma definindo a branch de produção, sempre que houver uma atualização nela, será gerado uma nova versão do projeto e já publicado.
• Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.

• Meus Pedidos

_ _

• Clonar o projeto:

   git clone https://github.com/Aszurar/coffeeDelivery.git

• É necessário ter o Node.js e um gerenciador de pacotes, como o Yarn, instalados em seu sistema. Se você ainda não os tem, siga estas instruções:

  • Instalação do NodeJS
  • Instalação do PNPM

• Instalação das dependências:

  • Execute o comando abaixo dentro da pasta do projeto

      pnpm i

• Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:

• Caso esteja na branch feature/json-server:

  • Terminal 1: Executando front-end

      pnpm dev

  • Terminal 2: Executando servidor json

      pnpm dev:server

• Caso esteja na branch main:

    pnpm dev