Ember
Uma loja de café com checkout e painel do lojista.
A loja online de uma torrefação artesanal de Portland, no Oregon, em inglês e em dólares: catálogo, carrinho, frete calculado pelo ZIP code, imposto estadual, checkout em três passos com cartão e carteira digital simulados, rastreio de pedido e um painel com vendas, pedidos, estoque e cupons.
Pagamentos simulados: o cartão 4242 4242 4242 4242 aprova, 4000 0000 0000 0002 recusa, a Ember Pay confirma em segundos. O cupom WELCOME10 dá 10% de desconto. Painel em /admin com a senha demo (somente leitura).
- Tempo de construção
- 1 h 27 min
- Agentes
- 5 agentes
- Testes passando
- 144
- Linhas de código
- 14.020
- Dependências em produção
- 5
Construído por um squad App Factory de 5 agentes Claude Code dentro do Cadrix: um líder no Opus que planejou, revisou e entregou, e quatro especialistas (Backend, Data, Frontend e QA) trabalhando em paralelo a partir do sexto minuto. 1 h 27 min do início do squad ao relatório final do líder, sem nenhuma linha de código escrita por uma pessoa. Os tempos vêm do registro de construção, do histórico do git e da gravação do canvas.
Veja o squad trabalhando
Time-lapse do canvas do Cadrix, um quadro a cada 30 segundos, em 21 segundos. No começo, o modo foco mostra todos os agentes de uma vez.
O que ele faz
- Catálogo com 24 cafés, cápsulas e utensílios, com busca, filtros e grade de duas colunas no celular
- Páginas de produto com seletores de tamanho e moagem, estoque ao vivo, notas de sabor, origem e arte do produto desenhada em SVG
- Carrinho com cupons, frete pelo ZIP code a partir de uma tabela local de zonas, frete grátis acima de US$ 50 e imposto estadual
- Checkout em três passos (contato, endereço com preenchimento pelo ZIP, pagamento) com cartão simulado (validação de Luhn, validade e CVC) e uma carteira digital simulada, a Ember Pay
- Confirmação e rastreio do pedido por número e e-mail
- Painel: vendas de hoje comparadas com ontem no mesmo horário, ticket médio, receita de 30 dias, pedidos com mudança de status e linha do tempo, produtos com variações, estoque baixo e cupons; cerca de 650 pedidos de demonstração em 90 dias, refeitos a cada 15 minutos mantendo os pedidos dos visitantes
Como foi construído
- 0–6 minLíder: plano, modelo de dados e contrato da API na nota do time, projeto montado, os quatro especialistas acionados de uma vez
- 6–30 minEm paralelo: o Backend escreveu preços, validação de cartão e todas as rotas da API; o Frontend construiu a loja, o checkout e o painel; o QA montou o Playwright e os testes de contrato
- 6–33 minData: schema, migrações, 24 produtos com textos próprios e os pedidos de demonstração, retomado depois que a primeira sessão caiu
- 33–49 minIntegração: o Backend passou a usar o banco do Data, a produção entrou no ar no preview público e o QA começou a verificação
- 49–82 minO QA achou um bloqueio de página em branco e dois defeitos; entrega de arquivos corrigida e uma rodada de acabamento em 390 e 1440 px
- 82–87 minCorreções finais aceitas e produção publicada de novo: 135 testes de unidade e API e 9 testes de ponta a ponta passando
Problemas que os agentes resolveram
- A primeira sessão do Data caiu com um erro da API por volta dos 14 minutos. O trabalho inacabado estava intacto na pasta compartilhada, então o líder reenviou a tarefa com uma nota de retomada e nada se perdeu.
- Um rebuild na pasta compartilhada deixou o site no ar em branco: o servidor rodando não conhecia os novos arquivos. O líder passou a produção para uma cópia de release separada, e o Backend corrigiu a entrega de arquivos na raiz.
- Perto do fim, um comando de limpeza, provavelmente de um colega, derrubou o servidor de produção. O líder colocou o servidor num loop de reinício e pediu ao time que parasse só os próprios processos.
- A verificação do QA achou dois defeitos: a demo somente leitura ainda deixava digitar nos formulários do painel, e o título da confirmação não tinha o número do pedido. O Frontend corrigiu os dois no último lote.
Tecnologias
Node 22Fastifynode:sqliteReactReact RouterViteVitestPlaywright
Mais telas
Construa o seu do mesmo jeito.
Uma máquina privada com Claude Code, Codex e Pi num só canvas.