Ignite Café — Coffee Delivery

README bilingue: Português e English

---

🇧🇷 Português

Visão geral

Ignite Café é uma aplicação React (Vite + TypeScript) construída como parte do desafio "Coffee Delivery" da trilha ReactJS do Ignite (Rocketseat). O app simula uma cafeteria online, permitindo adicionar cafés ao carrinho, ajustar quantidades, preencher o endereço, escolher forma de pagamento e confirmar o pedido, exibindo um resumo na página de sucesso.

Funcionalidades

• Listagem de produtos (cafés) com nome, descrição, preço e tags.
• Adicionar ao carrinho e controlar quantidade de cada item.
• Remover item do carrinho.
• Cálculo automático:
  • Total de itens (somatório dos preços x quantidades)
  • Taxa de entrega fixa (R$ 3,50 quando há itens)
  • Total geral (itens + entrega)
• Formulário de endereço com React Hook Form + Zod.
• Seleção de forma de pagamento.
• Contador de produtos no carrinho exibido no Header.
• Página de sucesso com resumo do pedido (endereço, previsão, forma de pagamento).

Stack e bibliotecas

• React 18 + Vite 4 + TypeScript 5
• styled-components (tema, GlobalStyle e componentes estilizados)
• react-router-dom (rotas: Home, Checkout, Success)
• react-hook-form + zod (formulários e validação)
• Context API + useReducer + immer (estado global e imutabilidade do carrinho)
• phosphor-react (ícones)
• uuid (IDs únicos)
• ESLint com @rocketseat/eslint-config

Scripts

• npm run dev — inicia o servidor de desenvolvimento (Vite)
• npm run build — compila o projeto (TypeScript + Vite)
• npm run preview — pré-visualiza a versão de produção
• npm run lint — executa o ESLint na pasta src

Pré-requisitos

• Node.js 18+ (recomendado)
• npm 9+ ou outro gerenciador de pacotes equivalente

Como rodar

1. Instale as dependências:

   npm install

2. Execute em modo desenvolvimento:

   npm run dev

3. Build de produção:

   npm run build

4. Pré-visualização do build:

   npm run preview

Estrutura do projeto (resumo)

ignite-cafe/
├─ public/
│  └─ assets/ (imagens dos produtos e ilustrações)
├─ src/
│  ├─ components/
│  │  └─ Header/ (logo, localização, botão de carrinho)
│  ├─ contexts/
│  │  ├─ Cart/ (CartContextProvider)
│  │  └─ Order/ (OrderContext)
│  ├─ layouts/
│  │  └─ DefaultLayout/ (Header + Outlet)
│  ├─ pages/
│  │  ├─ Home/ (listagem de cafés)
│  │  ├─ Checkout/ (endereço, pagamento, carrinho)
│  │  └─ Success/ (resumo do pedido)
│  ├─ reducers/
│  │  └─ cart/ (actions + reducer com immer)
│  ├─ mocks/
│  │  └─ products.ts (dados mockados dos cafés)
│  ├─ styles/ (GlobalStyle, tema default)
│  ├─ utils/
│  │  └─ formatPrice.ts (formatação BRL)
│  ├─ App.tsx, Router.tsx, main.tsx
└─ package.json

Arquitetura e detalhes

• GlobalProvider: envolve o app com OrderContextProvider e CartContextProvider.
• CartContext (estado global do carrinho):
  • Estado: cart[], productsTotalPrice, deliveryPrice, cartTotalPrice.
  • Ações: addInCart, removeFromCart, increaseQuantity, decreaseQuantity, cleanCart.
  • Reducer: calcula totais e aplica imutabilidade com immer.
• OrderContext: armazena pedidos confirmados e permite setInOrders(order).
• Router: rotas "/" (Home), "/checkout" (Checkout) e "/success/:orderId" (Success), dentro do DefaultLayout (Header + Outlet).
• Estilização: styled-components com tema (styles/themes/default.ts) e GlobalStyle (styles/global.ts).
• Dados: src/mocks/products.ts define a interface IProduct e uma lista mockada de cafés.
• Utilitário: formatPrice.ts formata valores no padrão pt-BR com moeda BRL.

Fluxo de uso

1. Na Home, selecione cafés e adicione ao carrinho.
2. No Checkout, ajuste quantidades, preencha o endereço e selecione o pagamento.
3. Confirme o pedido para limpar o carrinho e ser redirecionado para a página de sucesso, que exibe o resumo.

Observações técnicas

• O badge do carrinho no Header exibe a quantidade de produtos distintos (cart.length). Se desejar exibir o total de unidades, some quantity dos itens.
• A taxa de entrega é fixa (R$ 3,50) quando o carrinho possui itens.
• A validação com Zod está básica (string()); regras mais rígidas (min length, padrões) podem ser adicionadas conforme necessidade.
• No estado atual, não há persistência em localStorage. Caso deseje persistir o carrinho/pedido entre recargas, é possível integrar localStorage ou outra estratégia.

Referências do desafio

• Notion: https://efficient-sloth-d85.notion.site/Desafio-02-Coffee-Delivery-30e42a21fdb44b09a85244fc2c3dbdf9
• Figma: https://www.figma.com/file/5yT9ZzZmRQRS4yivGGB3pl/Coffee-Delivery/duplicate

Licença

Este repositório não declara uma licença explícita.

---

🇺🇸 English

Overview

Ignite Café is a React application (Vite + TypeScript) built as part of the "Coffee Delivery" challenge from the Ignite ReactJS track (Rocketseat). It simulates an online coffee shop: add coffees to the cart, adjust quantities, fill in the address, choose a payment method, confirm the order, and see a summary on the success page.

Features

• Products listing with name, description, price, and tags.
• Add to cart and control item quantity.
• Remove items from cart.
• Automatic calculation:
  • Items subtotal (sum of price × quantity)
  • Fixed delivery fee (R$ 3.50 when there are items)
  • Grand total (subtotal + delivery)
• Address form powered by React Hook Form + Zod.
• Payment method selection.
• Cart count badge displayed in the Header.
• Success page with order summary (address, ETA, payment method).

Tech stack

• React 18 + Vite 4 + TypeScript 5
• styled-components (theme, GlobalStyle, styled components)
• react-router-dom (routing: Home, Checkout, Success)
• react-hook-form + zod (forms and validation)
• Context API + useReducer + immer (global state and immutability)
• phosphor-react (icons)
• uuid (unique IDs)
• ESLint with @rocketseat/eslint-config

Scripts

• npm run dev — start the development server (Vite)
• npm run build — build the project (TypeScript + Vite)
• npm run preview — preview the production build
• npm run lint — run ESLint on src

Prerequisites

• Node.js 18+ (recommended)
• npm 9+ or equivalent package manager

Getting started

1. Install dependencies:

   npm install

2. Run in development mode:

   npm run dev

3. Production build:

   npm run build

4. Preview the build:

   npm run preview

Project structure (summary)

ignite-cafe/
├─ public/
│  └─ assets/ (product images and illustrations)
├─ src/
│  ├─ components/
│  │  └─ Header/ (logo, location tag, cart button)
│  ├─ contexts/
│  │  ├─ Cart/ (CartContextProvider)
│  │  └─ Order/ (OrderContext)
│  ├─ layouts/
│  │  └─ DefaultLayout/ (Header + Outlet)
│  ├─ pages/
│  │  ├─ Home/
│  │  ├─ Checkout/
│  │  └─ Success/
│  ├─ reducers/
│  │  └─ cart/ (actions + reducer with immer)
│  ├─ mocks/
│  │  └─ products.ts (mocked products data)
│  ├─ styles/ (GlobalStyle, default theme)
│  ├─ utils/
│  │  └─ formatPrice.ts (BRL formatting)
│  ├─ App.tsx, Router.tsx, main.tsx
└─ package.json

Architecture & details

• GlobalProvider: wraps the app with OrderContextProvider and CartContextProvider.
• CartContext (global cart state):
  • State: cart[], productsTotalPrice, deliveryPrice, cartTotalPrice.
  • Actions: addInCart, removeFromCart, increaseQuantity, decreaseQuantity, cleanCart.
  • Reducer: computes totals and uses immer to ensure immutability.
• OrderContext: stores confirmed orders and exposes setInOrders(order).
• Router: routes "/" (Home), "/checkout" (Checkout), "/success/:orderId" (Success) inside DefaultLayout (Header + Outlet).
• Styling: styled-components with theme (styles/themes/default.ts) and GlobalStyle (styles/global.ts).
• Data: src/mocks/products.ts defines IProduct and a mocked list.
• Utility: formatPrice.ts formats currency in pt-BR and BRL.

Usage flow

1. On Home, select coffees and add them to the cart.
2. On Checkout, adjust quantities, fill in the address and select the payment method.
3. Confirm the order to clear the cart and be redirected to the success page, which shows the order summary.

Technical notes

• The cart badge in the Header shows the number of distinct products (cart.length). If you want the total of units, sum the quantity of the items.
• The delivery fee is fixed (R$ 3.50) when the cart has items.
• Current Zod validation is basic (string()); stricter rules (min length, patterns) can be added.
• As of now, there is no localStorage persistence. If desired, add persistence for cart/order across reloads.

Challenge references

• Notion: https://efficient-sloth-d85.notion.site/Desafio-02-Coffee-Delivery-30e42a21fdb44b09a85244fc2c3dbdf9
• Figma: https://www.figma.com/file/5yT9ZzZmRQRS4yivGGB3pl/Coffee-Delivery/duplicate

License

No explicit license declared in this repository.