saveinmed/docs/MARKETPLACE.md

Marketplace Frontend - Documentação

Visão Geral

Frontend React do marketplace B2B SaveInMed para busca, compra e gestão de pedidos entre farmácias.

Tecnologias

• React 18 + TypeScript
• Vite 5 - Build tool
• TailwindCSS - Estilização
• Zustand - State management
• React Router - Navegação

Estrutura

src/
├── components/      → Componentes reutilizáveis
├── hooks/           → Custom hooks
├── layouts/         → Layouts (Shell, AuthLayout)
├── pages/           → Páginas/rotas
├── services/        → Chamadas API
├── stores/          → Zustand stores
├── types/           → TypeScript types
└── utils/           → Utilitários (format, jwt, logger)

Funcionalidades

Catálogo

• Busca de produtos por nome/medicamento
• Filtros por preço, distância, validade
• Ordenação por menor preço

Carrinho

• Agrupamento por fornecedor
• Preços em centavos (formatCents)
• Cálculo de subtotais

Checkout

• Endereço de entrega
• Métodos de pagamento (Pix, Cartão)
• Cálculo de frete

Dashboard

• Pedidos realizados
• Pedidos recebidos
• Métricas

Stores

Store	Arquivo	Descrição
Auth	authStore.ts	Token, usuário logado
Cart	cartStore.ts	Itens do carrinho

Utils

Util	Função	Exemplo
formatCents	Converte centavos	819 → "R$ 8,19"
formatCurrency	Formata decimal	8.19 → "8,19"
decodeJwtPayload	Decodifica JWT	Extrai claims

Executar

cd marketplace
npm install
npm run dev

Testes

npm run test

Para matriz completa (com/sem banco e Playwright), veja: docs/TESTES.md

Build

npm run build