#10 - React: https://coffee-delivery-aszurar.netlify.app
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.Rocketseat.mp4
Sobre | Motivo | Design | Requisitos | Tecnologias | CI/CD | Baixar e Executar
-
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.
- 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;
- Criação de 4 stores simulando slices de um Redux:
- Consumo de dados com React Query e axios melhorando o cache e a performance;
- Criação de interfaces com Chakra UI;
- Criação de testes unitários com Vitest;
- Animação com Framer Motion;
- Preenchimento automático de endereço por de busca via CEP com a API BrasilAPI;
- Conseguimos adicionar, remover e editar itens no carrinho;
- Conseguimos adicionar, remover e editar endereços;
- Conseguimos adicionar um pedido já realizado anteriormente ao carrinho;
- Buscamos endereços via CEP;
- Criação de interfaces com Chakra UI;
- Animações com Framer Motion
- Simluação de Slices com Zustand
- Carrinho
_
- O Design foi disponibilizado pela Rocketseat, e pode ser acessado no link abaixo:
- NodeJS
- ReactJS
- Vite
- PNPM
- Adição do endereço e método de pagamento
_
_
-
O projeto foi desenvolvido utilizando as seguintes tecnologias:
-
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 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
Desenvolvido por 🌟 Lucas de Lima Martins de Souza.