AmazonQA.com
E-commerce project with React
Install / Use
/learn @reinaldorossetti/AmazonQA.comREADME
🛒 AmazonQA — Loja Online
Aplicação de e-commerce completa construída com React + Vite no frontend e Next.js + PostgreSQL no backend, com design visual inspirado na Amazon. Inclui catálogo de produtos, sistema de login/cadastro de usuários, gestão de carrinho, fluxo de pedidos (orders) com idempotência e tela de pagamentos (payments) com cartão, PIX, boleto e split payment, além de internacionalização PT/EN.
🎯 Visão Executiva
Projeto completo de e-commerce com foco em qualidade de software, cobrindo todo o ciclo da compra:
- Navegação do catálogo, busca e detalhes de produtos.
- Cadastro/login com autenticação e controle de sessão.
- Carrinho persistido no backend com regras de integridade e Segurança com criptografia em hash adicionando um salt na aplicação.
- Checkout com criação de pedido (
orders) usandoIdempotency-Key. - Tela de pagamentos (
payments) com cartão de crédito, PIX, boleto e pode dividir o pagamento em duas formas de pagamentos distintas. - Página de confirmação com resumo do pedido, QR mock de PIX e boleto em PDF mock.
- API documentada e validada por múltiplas camadas de teste automatizado, ou seja temos testes dentro do sistema e fora.
🧪 Pirâmide de Testes
A estratégia de qualidade segue a pirâmide de testes: base ampla de testes unitários, camada intermediária para contratos/API e topo com E2E de interface.
flowchart BT
A["E2E UI (Playwright)<br/>Fluxos críticos de ponta a ponta"] --> B["API e Contrato (Playwright API + Pact)<br/>Integração entre serviços e contratos"]
B --> C["Unitários (Vitest)<br/>Base ampla: regras e componentes isolados"]
Relatórios públicos da pirâmide e da documentação:
- Índice geral de testes: https://reinaldorossetti.github.io/amazonQA.com/tests-report/
- Cobertura unitária (Vitest): Coverage
- Testes de API (Playwright): Playwright API
- Testes de contrato (Pact): Pact Contract Report
- E2E Frontend (Playwright / Chromium): Browser Chromium
- E2E Frontend (Playwright / WebKit): Browser WebKit
- E2E Frontend (Playwright / Edge): Browser Edge
- Swagger da API: https://reinaldorossetti.github.io/amazonQA.com/tests-report/swagger/index.html
- Guia completo de Pact: Guia de Testes de Pacto
📊 Relatórios e Dashboards (GitHub Pages)
Acompanhe os resultados diários, a cobertura e a documentação pública disponibilizada usando GH-Pages através dos nossos relatórios:
- 📑 Todos os Testes (Índice): Visualizar Relatórios Gerais
- 📘 Documentação Swagger (API): Swagger UI
- 🧪 Cobertura de Unitários/Unidade (Vitest): Unit Tests Coverage
- 🔌 Relatório de Testes de API: Playwright API Report
- 🤝 Relatório de Testes de Contrato (Pact): Pact Contract Report
- 📘 Guia dos Testes de Pacto: pact-tests-guide.md
📱 Relatórios UI E2E (Playwright por Browser):
🤝 Testes de Contrato (Pact)
Os testes de contrato validam o acordo entre frontend (consumer) e backend (provider) sem depender de uma suíte E2E completa.
- 📄 Report do contrato publicado (GH Pages): Pact Contract Report
- 📚 Guia completo (implementação + execução): Guia de Testes de Pacto
Esse fluxo garante que mudanças na API não quebrem o consumo esperado no frontend e adiciona uma camada extra de segurança na esteira de CI.
Passo a Passo para Rodar a Aplicação Localmente:
git clone https://github.com/reinaldorossetti/amazonQA.com.git
cd amazonQA.com
docker-compose -f docker-compose.yml up
# Backend
cd server
npm install
npm run seed
npm run dev
# Front-end, abra um outro terminal para não interromper o backend.
cd ..
npm install
npm run build
npm run preview
⚛️ Frontend — React + Vite
O que é e o que faz neste projeto
O React é a biblioteca de UI responsável por toda a camada visual e interativa da aplicação. O Vite é a ferramenta de build moderna que substitui o Webpack, entregando um servidor de desenvolvimento ultra-rápido com Hot Module Replacement (HMR).
No projeto, o React gerencia:
- Roteamento SPA via
react-router-dom(catálogo, detalhes do produto, carrinho, login, cadastro, checkout). - Estado global via Context API (
AuthContext,DatabaseContext,LanguageContext). - Componentes de UI com a biblioteca Material-UI (MUI v7+) replicando estética Amazon.
- Chamadas à API REST encapsuladas em
src/db/api.js, separando a camada de dados da camada de apresentação.
Vantagens do React + Vite aqui
| Vantagem | Detalhe |
|---|---|
| ⚡ HMR instantâneo | Mudanças no código refletem no browser em milissegundos, sem reload completo. |
| 📦 Bundle enxuto | Vite usa Rollup no build; entrega apenas o que é importado (tree-shaking nativo). |
| 🧩 Componentização | Cada tela (Login, Catalog, Cart) é um componente isolado, de fácil manutenção e teste. |
| 🔌 Proxy de desenvolvimento | O Vite proxy (/api → :3001) elimina problemas de CORS em desenvolvimento sem alterar o código. |
| 🌐 i18n via Context API | Internacionalização PT/EN sem dependências externas, usando apenas useState + localStorage. |
| 🧪 IDs semânticos | Todos os elementos interativos têm id descritivo, facilitando automação com Playwright. |
🟢 Backend + Banco de Dados — Next.js + PostgreSQL (Docker)
O que é e o que faz neste projeto
O Next.js 14 (App Router) atua como servidor de API REST, processando todas as operações de leitura e escrita no banco. O PostgreSQL 16 é o banco de dados relacional robusto, executado em um container Docker isolado, gerenciado pelo pg (node-postgres) via pool de conexões.
No projeto, o Next.js gerencia:
- API Routes (
/api/products,/api/users,/api/cart) que recebem requisições do frontend. - Regras de negócio como validação de unicidade de e-mail/CPF/CNPJ no cadastro.
- Conversão de tipos (ex.:
NUMERIC → floatviapg.types) antes de retornar ao cliente. - Seed do banco via
server/scripts/seed.js, criando tabelas e populando os produtos.
O PostgreSQL gerencia:
- Três tabelas relacionadas:
products,usersecart_items(com FK eON DELETE CASCADE). - Upsert no carrinho:
INSERT ... ON CONFLICT DO UPDATE SET quantity = quantity + N, garantindo integridade sem duplicações. - Isolamento de dados por usuário via
user_idnas queries de carrinho.
Vantagens do Next.js + PostgreSQL aqui
| Vantagem | Detalhe |
|---|---|
| 🚀 API Routes nativas | Sem precisar criar um servidor Express separado; as rotas ficam em app/api/ e seguem o padrão web Fetch. |
| 🔒 Segurança de dados | Lógica crítica (validação, autenticação) fica no servidor, nunca exposta ao browser. |
| 🐳 Docker portable | docker compose up -d sobe um PostgreSQL configurado e pronto; elimina instalação manual do banco. |
| 💾 Persistência real | Volume nomeado postgres_data garante que os dados sobrevivem a restarts do container. |
| 📐 Integridade relacional | FK cart_items → users e cart_items → products com ON DELETE CASCADE mantém o banco sempre consistente. |
| ⚙️ Pool de conexões | Singleton pg.Pool em lib/db.js reutiliza conexões, evitando overhead de abertura a cada request. |
| 🔄 Seed idempotente | CREATE TABLE IF NOT EXISTS + ON CONFLICT DO NOTHING garante que rodar npm run seed múltiplas vezes é seguro. |
💾 Banco de Dados — PostgreSQL (Docker)
Tabelas e Relacionamentos
-- Produtos do catálogo
products (id SERIAL PK, name, price NUMERIC(10,2), description,
category, image, manufacturer, line, model)
-- Usuários registrados
users (id SERIAL PK, person_type, first_name, last_name,
email UNIQUE NOT NULL, phone, password, cpf UNIQUE,
cnpj UNIQUE, company_name, address_zip, address_street,
address_number, address_complement, address_neighborhood,
address_city, address_state, residence_proof_filename,
created_at TIMESTAMPTZ, updated_at TIMESTAMPTZ,
is_active BOOLEAN, account_closed_at TIMESTAMPTZ)
-- Perfis de acesso por usuário
user_roles (id SERIAL PK,
user_id -> users.id ON DELETE CASCADE,
r
