WOD Fotos

Marketplace de fotos de corridas e eventos esportivos. O fotógrafo sobe o álbum, o atleta acha as fotos pelo número de peito, paga no Pix e baixa em alta resolução, sem marca d'água.

Tecnologia: Next.js 15 · Supabase (banco, login e armazenamento) · Asaas (Pix) · hospedagem na Vercel.

---

Colocar no ar: passo a passo

Faça na ordem. Tempo total: uns 40 minutos.

1. Supabase (banco de dados e fotos)

1. Em https://supabase.com/dashboard clique em New project.
   • Nome: flagra-run
   • Região: South America (São Paulo)
   • Anote a senha do banco num lugar seguro.
2. Quando o projeto terminar de criar, vá em SQL Editor > New query, cole todo o conteúdo do arquivo supabase/schema.sql e clique em Run. Isso cria as tabelas, as regras de segurança e as duas pastas de fotos (previews pública, originals privada).
3. Vá em Project Settings > API e copie três valores:
   • Project URL → vai em NEXT_PUBLIC_SUPABASE_URL
   • anon public → vai em NEXT_PUBLIC_SUPABASE_ANON_KEY
   • service_role → vai em SUPABASE_SERVICE_ROLE_KEY (secreta, nunca compartilhe)
4. Vá em Authentication > URL Configuration:
   • Site URL: o endereço do site (ex.: https://wodfotos.com.br)
   • Redirect URLs: adicione https://wodfotos.com.br/auth/callback e também o endereço provisório da Vercel, ex.: https://flagra-run.vercel.app/auth/callback

2. Asaas (receber no Pix)

1. Crie a conta em https://www.asaas.com e complete o cadastro (documentos). Em Pix > Minhas chaves, cadastre uma chave Pix.
2. Teste (sandbox): crie uma conta em https://sandbox.asaas.com, vá em Integrações > API, gere a chave → ASAAS_API_KEY, com ASAAS_ENV=sandbox.
3. Produção (dinheiro de verdade): na conta real, Integrações > API → ASAAS_API_KEY, com ASAAS_ENV=production.
4. Aviso de pagamento (webhook): em Integrações > Webhooks > Criar Webhook, URL https://SEU-DOMINIO/api/webhooks/asaas, clique em "Gerar token", cole o mesmo token em ASAAS_WEBHOOK_TOKEN na Vercel e marque os eventos de cobrança (pelo menos PAYMENT_RECEIVED e PAYMENT_CONFIRMED). Use envio sequencial.
5. O site pede o CPF de quem compra, porque o Asaas exige para gerar a cobrança. O CPF vai só para o Asaas, o WOD Fotos não guarda.

Já tinha rodado o schema.sql antigo (da versão com Mercado Pago)? Rode uma vez o supabase/migracao-pagbank.sql no SQL Editor.

3. Vercel (o site no ar)

1. Suba este código para o repositório flagra-run no seu GitHub.
2. Na Vercel: Add New > Project > Import o repositório flagra-run.
3. Antes de clicar em Deploy, abra Environment Variables e cadastre todas as variáveis do arquivo .env.example:

Variável	Valor
NEXT_PUBLIC_SUPABASE_URL	do passo 1.3
NEXT_PUBLIC_SUPABASE_ANON_KEY	do passo 1.3
SUPABASE_SERVICE_ROLE_KEY	do passo 1.3
NEXT_PUBLIC_SITE_URL	https://wodfotos.com.br (sem barra no final)
ASAAS_API_KEY	do passo 2 ou 3
ASAAS_ENV	sandbox para testar, production para valer
ASAAS_WEBHOOK_TOKEN	o token do passo 4
PHOTOGRAPHER_EMAILS	seu e-mail (só quem estiver aqui entra no painel)
ADMIN_EMAILS	seu e-mail (vê os pedidos e o WhatsApp dos clientes)
PLATFORM_FEE_PCT	12 (só reserva; a comissão real fica no banco)
PIX_FEE_CENTS	199 (taxa do Pix do Asaas por pedido, em centavos; descontada do repasse dos fotógrafos. Se não existir, vale 199)
PAYMENTS_FAKE	0

4. Clique em Deploy. Em 2 minutos o site está no ar num endereço .vercel.app.

4. Domínio

1. Na Vercel: projeto > Settings > Domains > Add e digite o seu domínio.
2. A Vercel mostra os registros DNS. No Registro.br: Domínio > DNS > Editar zona e crie os registros que a Vercel pediu (normalmente um A para o domínio e um CNAME para o www).
3. Pode levar de alguns minutos até algumas horas para propagar. O SSL (cadeado) é automático.
4. Depois que o domínio funcionar, confira se NEXT_PUBLIC_SITE_URL, e o Site URL do Supabase estão com o domínio final (o endereço do webhook do Asaas é cadastrado à mão no painel).

5. Primeiro teste

1. Abra /painel, entre com o e-mail cadastrado em PHOTOGRAPHER_EMAILS e clique no link que chegar.
2. Crie um álbum, suba umas fotos, marque os números de peito e clique em Publicar álbum.
3. Na página inicial, busque um número de peito, adicione ao carrinho e pague com o Pix de teste.
4. A página do pedido atualiza sozinha quando o pagamento é aprovado e libera os downloads.

Para testar o fluxo sem gateway, coloque PAYMENTS_FAKE=1: o pedido é aprovado na hora. Volte para 0 antes de abrir para o público.

---

Rodar no seu computador

Precisa do Node.js 20 ou mais novo.

npm install
cp .env.example .env.local   # e preencha
npm run dev                  # abre em http://localhost:3000

---

Como o sistema funciona

• Fotos originais ficam no bucket privado originals. Ninguém acessa sem pagar.
• Prévias com marca d'água são geradas no servidor (lib/watermark.ts) e ficam no bucket público previews.
• Preço é sempre recalculado no servidor. O carrinho do navegador só serve para mostrar.
• Desconto: 3 fotos ou mais no mesmo pedido = 20% off (lib/pricing.ts).
• Pagamento: o checkout cria o Pix no Asaas. O pedido é aprovado por dois caminhos: o webhook do Asaas (com o token conferido) e a própria página do pedido, que consulta a cada 5 segundos.
• Entrega: a página do pedido gera links assinados de 24h para as originais. O link da página (com o código ?t=) é o comprovante do cliente.
• Repasse: cada item vendido guarda o fotógrafo e o valor já com desconto. O painel mostra o repasse já descontada a comissão e a taxa do Pix (PIX_FEE_CENTS, padrão R$ 1,99 por pedido, dividida entre os itens do pedido proporcional ao valor; cada item guarda a sua parte em order_items.pix_fee_cents). O pagamento ao fotógrafo é feito por você, manualmente, por enquanto.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗