https://github.com/joschonarth/coffee-delivery
☕ A coffee delivery web app to browse, select, and order coffees, built with React, TypeScript, and Vite.
https://github.com/joschonarth/coffee-delivery
eslint immer phosphor-icons phosphor-react react react-hook-form react-router react-router-dom reactjs styled-components typescript vite zod
Last synced: about 1 month ago
JSON representation
☕ A coffee delivery web app to browse, select, and order coffees, built with React, TypeScript, and Vite.
- Host: GitHub
- URL: https://github.com/joschonarth/coffee-delivery
- Owner: joschonarth
- Created: 2025-05-03T20:55:27.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-06-16T23:06:39.000Z (8 months ago)
- Last Synced: 2025-06-17T00:19:31.592Z (8 months ago)
- Topics: eslint, immer, phosphor-icons, phosphor-react, react, react-hook-form, react-router, react-router-dom, reactjs, styled-components, typescript, vite, zod
- Language: TypeScript
- Homepage: https://coffee-delivery-mu-rosy.vercel.app
- Size: 939 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Coffee Delivery
Aplicação de delivery de cafés desenvolvida com React, TypeScript e Vite.
## 📖 Visão Geral
**Coffee Delivery** é uma aplicação web para compra e entrega de cafés artesanais. O usuário pode selecionar produtos, configurar o carrinho, preencher o endereço de entrega e finalizar a compra de forma prática e rápida.
## 🛠️ Tecnologias Utilizadas
- ⚛️ **React** – Biblioteca para construção da interface.
- 🟦 **TypeScript** – Tipagem estática para maior segurança.
- ⚡ **Vite** – Ferramenta de build e dev server ultra rápida.
- 📋 **React Hook Form** – Manipulação eficiente de formulários.
- 🌐 **React Router DOM** – Controle de rotas da aplicação.
- 💅 **Styled-Components** – Estilização com CSS-in-JS.
- 🎨 **Phosphor Icons** – Conjunto de ícones com design consistente.
- 💎 **Zod** – Validação de dados com schema.
- 🧊 **Immer** – Manipulação de estados imutáveis de forma simples.
- 🧹 **ESLint** – Linter para padronização e qualidade de código.
## ⚙️ Funcionalidades
- ☕ **Listagem de cafés**: Exibe os produtos disponíveis para compra com imagem, descrição e preço.
- ➕ **Carrinho dinâmico**: Adição e remoção de quantidades específicas por produto.
- 🧾 **Formulário de entrega**: Coleta os dados do endereço do usuário com validação.
- 🧺 **Resumo do pedido**: Valor total calculado com base nas quantidades e preços dos itens.
- 📦 **Persistência local**: Os dados do carrinho permanecem salvos no `localStorage`.
- 📍 **Quantidade total no Header**: Visualização imediata da quantidade de itens adicionados.
## 🧠 Conceitos Aplicados
- Estado e imutabilidade com **Immer**
- Gerenciamento global de dados com **Context API**
- Armazenamento local com **LocalStorage**
- Validação de formulário com **Zod**
- Componentização e reuso de componentes
- Navegação com rotas dinâmicas
## 🚀 Como Executar o Projeto
### 📋 Pré-requisitos
- 🟩 [Node.js 20+](https://nodejs.org/)
- 📦 [npm 10+](https://www.npmjs.com/)
### 🔧 Instalação
1. Clone o repositório:
```bash
git clone https://github.com/joschonarth/coffee-delivery.git
```
2. Acesse a pasta do projeto:
```bash
cd coffee-delivery
```
3. Instale as dependências:
```bash
npm install
```
### ▶️ Execução
Inicie o projeto com:
```bash
npm run dev
```
Acesse o projeto em: [http://localhost:5173](http://localhost:5173)
## 🌐 Acesse a Aplicação Online
A aplicação já está disponível online! Você pode testá-la acessando o link abaixo:
🔗 [https://coffee-delivery-mu-rosy.vercel.app/](https://coffee-delivery-mu-rosy.vercel.app/)
## 🤝 Contribuições
Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou pull requests com melhorias ou correções. 💡
## ⭐ Apoie este Projeto
Se curtiu o projeto, deixe uma ⭐ aqui no GitHub!
## 📞 Contato
[](https://www.linkedin.com/in/joschonarth/)
[](mailto:joschonarth@gmail.com)