orders-web

Front-end full-stack em React + Vite + TypeScript: uma UI de loja que consome a API do event-driven-orders — você coloca um pedido e vê a saga (pagamento → estoque → envio) resolver, com o status final e a linha do tempo dos eventos que o pedido percorreu. Arquitetura em camadas no front e cobertura de testes 100%.

[ React SPA ] ──/api/orders──▶ [ nginx (proxy) ] ──▶ [ event-driven-orders API ]
     ▲                                                          │
     └───────────  status + histórico de eventos  ◀────────────┘

Destaques

• Full-stack de verdade — docker compose up sobe a API (buildada direto do repositório do backend) e a SPA servida por nginx, já conectadas.
• Camadas no front — api/ (cliente HTTP tipado) · lib/ (regras puras de status/formatação) · components/ (apresentação) · App (estado). A lógica pura fica fora dos componentes, o que deixa tudo testável.
• Cobertura 100% — verificada na CI (Vitest + Testing Library), incluindo os caminhos de erro da API. O cliente HTTP é testado com fetch mockado.
• Feedback de estados — formulário desabilita durante o envio, erros da API aparecem para o usuário, e cada pedido vira um card com badge de status e a timeline dos eventos.
• Tipagem ponta a ponta — os tipos do pedido espelham o contrato da API.

Stack

• UI: React 18 + Vite + TypeScript
• Testes/cobertura: Vitest + Testing Library + jsdom (gate de 100% via v8)
• Entrega: build estático servido por nginx, com proxy para a API

Arquitetura

src/
├── api/          # cliente HTTP tipado (placeOrder, getOrder)
├── lib/          # regras puras: rótulo/tom de status, formatação de valor
├── components/   # OrderForm, OrderCard (apresentação)
├── App.tsx       # composição + estado (lista de pedidos, erro, loading)
└── main.tsx      # bootstrap

Como rodar

Full-stack (UI + API) com um comando

docker compose up --build
# UI:  http://localhost:8088
# (a API sobe junto e é acessada via /api pelo proxy do nginx)

Coloque um pedido de SKU-1 (em estoque) e veja-o chegar a Enviado; peça SKU-3 (sem estoque) para ver Sem estoque; passe do limite de pagamento para ver Pagamento recusado.

Só o front (dev)

npm install
npm run dev        # http://localhost:5173
# aponte para uma API rodando:
#   VITE_API_URL=http://localhost:8080 npm run dev

Testes e cobertura

npm install
npm test           # Vitest com gate de 100% (lines/branches/functions/statements)
npm run typecheck  # tsc --noEmit

Licença

MIT.