Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aszurar/coffeedelivery
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 brasilap. Além disso, podemos ver o total da compra e finalizar o pedido.
https://github.com/aszurar/coffeedelivery
axios chakra-ui css framer-motion html javascript json-server phosphoricons react react-hook-form react-query typescript vitest zod zustand
Last synced: about 1 month ago
JSON representation
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 brasilap. Além disso, podemos ver o total da compra e finalizar o pedido.
- Host: GitHub
- URL: https://github.com/aszurar/coffeedelivery
- Owner: Aszurar
- Created: 2024-04-17T18:32:10.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-08-23T14:02:43.000Z (5 months ago)
- Last Synced: 2024-08-23T23:54:52.646Z (5 months ago)
- Topics: axios, chakra-ui, css, framer-motion, html, javascript, json-server, phosphoricons, react, react-hook-form, react-query, typescript, vitest, zod, zustand
- Language: TypeScript
- Homepage:
- Size: 717 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# #10 - React: ****
**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](https://github.com/Aszurar/coffeeDelivery/tree/feature/json-server)**.
## Coffee Delivery
- 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](https://v2.chakra-ui.com/)** e consumir os dados via com **[React Query](https://tanstack.com/query/latest/docs/framework/react/overview)** e **[axios](https://axios-http.com/ptbr/)**.
- O site foi publicado com CI/CD por meio da plataforma **[Netlify](https://www.netlify.com/)**.
- Acesse e teste o projeto em: ****
[](https://app.netlify.com/sites/coffee-delivery-aszurar/deploys) [](https://vitejs.dev/) [](https://vitest.dev/) [](https://react.dev/) [](https://v2.chakra-ui.com/) [](https://tanstack.com/query/latest/docs/framework/react/overview) [](https://tanstack.com/query/latest/docs/framework/react/overview) [](https://axios-http.com/ptbr/) [](https://www.typescriptlang.org/) [](https://www.javascript.com/) [](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [](https://www.w3schools.com/css/) [](https://pnpm.io/pt/)
---
**[Vídeo no Youtube](https://www.youtube.com/watch?v=aPFtSG2kzC0)**
---
## :information_source: Sobre
- 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](https://zustand-demo.pmnd.rs/)**, 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](https://www.npmjs.com/package/@axe-core/react)** para testes e correções, assim como leitor de tela ChromeVox.
- Esse projeto é derivado da formação React da **[Rocketseat](https://www.rocketseat.com.br/)**, sendo o 2º desafio dessa trilha.
- **Tela inicial**
_
_
---
## :interrobang: Motivo
- 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**.
### Funcionalidades:
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](https://brasilapi.com.br/)**;
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;
### O que aprendi de novo?
1. Criação de interfaces com Chakra UI;
2. Animações com Framer Motion
3. Simluação de Slices com Zustand
- **Carrinho**
_
---
## :art: Design
- O Design foi disponibilizado pela Rocketseat, e pode ser acessado no link abaixo:
Coffee Delivery
[](https://www.figma.com/design/FIDFR5OxDBrvAq22KIOzcZ/Coffee-Delivery-%E2%9C%85?node-id=13024-770&t=bIhOVvJmb952GAIm-0)
---
## :seedling: Requisitos Mínimos
1. NodeJS
2. ReactJS
3. Vite
4. PNPM
- **Adição do endereço e método de pagamento**
_
_
---
## :rocket: Tecnologias Utilizadas
- O projeto foi desenvolvido utilizando as seguintes tecnologias:
1. **[axios](https://axios-http.com/ptbr/docs/intro)**
2. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**
3. **[Chakra UI](https://v2.chakra-ui.com/)**
4. **[Framer Motion](https://www.framer.com/motion/)**
5. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**
6. **[Json Server](https://github.com/typicode/json-server)**
7. **[Netlify](https://www.netlify.com/)**
8. **[NodeJS](https://nodejs.org/en/)**
9. **[Phosphor Icons](https://phosphoricons.com/)**
10. **[React](https://pt1.br.react.dev/)**
11. **[React Hook Form](https://react-hook-form.com/)**
12. **[Sonner](https://sonner.emilkowal.ski/)**
13. **[PNPM](https://pnpm.io/pt/)**
14. **[TypeScript](https://www.typescriptlang.org/)**
15. **[Vite](https://vitejs.dev/)**
16. **[Vitest](https://vitest.dev/)**
17. **[zod](https://zod.dev/)**
- **Tela de finalização**
_
---
## :truck: Entrega e distribuição continua
****
- Para a publicação da aplicação foi por meio da plataforma **[Netlify](https://www.netlify.com/)** 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**
_
_
---
## :package: Como baixar e executar o projeto
### Baixar
- Clonar o projeto:
```bash
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](https://nodejs.org/en/)
- [Instalação do PNPM](https://pnpm.io/pt/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
pnpm i
```
### Execução
- 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
```bash
pnpm dev
```
- Terminal 2: Executando servidor json
```bash
pnpm dev:server
```
- Caso esteja na branch **```main```**:
```bash
pnpm dev
```
Desenvolvido por :star2: Lucas de Lima Martins de Souza.