Para nerds

Os bastidores
deste site.

Oi, eu sou o André — noivo da Lívia e a pessoa que escreveu esse código (algumas partes às 2h da manhã, confesso). Como sou dev, quis fazer nosso próprio site de presentes em vez de usar um pronto. Aqui vai o que tem por baixo do capô, pra quem curte.

Next.js 16 + React 19

App Router, React Server Components, React Compiler e Turbopack. Quase tudo é renderizado no servidor — a página de presentes, o checkout, o admin. Só vira componente de cliente o que precisa de interação de verdade.

TypeScript + Biome

Tipado de ponta a ponta, com Biome cuidando de lint e formatação. Build e lint passam limpos — eu sou meio chato com isso.

Design vindo do Claude Design

A cara do site (essa paleta creme com terracota, as fontes Cormorant Garamond + DM Sans + JetBrains Mono) foi prototipada no Claude Design e eu recriei fiel em CSS — somando Tailwind v4 e componentes do shadcn/ui (sobre Base UI), retematizados pra combinar.

MongoDB com Mongoose

Os presentes e as contribuições ficam no MongoDB, via Mongoose. O Better Auth usa o mesmo banco pras coleções de autenticação — um banco só, sem firula.

Better Auth + better-invite

A área dos noivos é protegida pelo Better Auth (plugin admin). Cadastro público está desligado: só entra quem é convidado por um admin, via o plugin better-invite — o convidado recebe um link e cria a conta lá.

Pagamentos com Asaas

Checkout “invisível” — você presenteia sem criar conta. PIX gera QR Code + copia-e-cola e confirma sozinho (webhook + polling); cartão é embutido na página e cobrado à vista (não trabalhamos com parcelamento). Tudo idempotente, pra não contar a mesma cota duas vezes.

WhatsApp com Kapso

Quando o Asaas confirma o pagamento, um disparo via Kapso (@kapso/whatsapp-cloud-api) manda um obrigado no WhatsApp pra quem presenteou. É melhor-esforço — se falhar, não trava nada.

Imagens do Unsplash

No admin dá pra buscar qualquer foto no Unsplash (via API), com crédito do fotógrafo guardado e linkado — atendendo direitinho o checklist deles pra produção. Sem chave, cai num conjunto curado.

Formulários com TanStack Form

Todos os formulários usam @tanstack/react-form com validação por Zod, e o telefone usa react-phone-number-input (com DDI e bandeira) — temos convidado fora do Brasil, então o número fica em formato internacional.

Por que tanto trabalho?

Porque eu queria que dar um presente fosse rápido e sem login chato pra vocês, e que a gente — eu e a Lívia — conseguíssemos administrar tudo num painel decente, vendo cada cota pingar em tempo real. E, sendo sincero, porque escrever isso foi divertido.

Com carinho,

André.

noivo, dev nas horas vagas — instagram.com/andrebrito.dev

← Voltar para a lista de presentes