Virtú.bio
Página de link na bio no estilo do Hopp: cada pessoa monta uma página com
blocos (links, WhatsApp, produtos, imagens, mapa, salvar contato, vídeos,
música, perguntas frequentes, contagem regressiva, captação de contatos),
escolhe o visual (layouts, temas, degradê ou imagem de fundo, ícones das
redes) e acompanha visitas e cliques.
A análise do produto de referência está em analises/hopp/ no repositório
VitaMakers/Test-rea.
Tecnologia
- Next.js 15 (App Router) + React 19 + TypeScript + Tailwind CSS 4
- Supabase: Postgres, login e regras de acesso por linha (RLS)
- Stripe Connect para pagamentos, atrás de
src/lib/payments
- dnd-kit para arrastar blocos, Zod para validar a página
Como funciona
- A página é um documento JSON (
src/lib/page/schema.ts): perfil,
redes sociais, lista de blocos tipados, tema e SEO. O editor salva um
rascunho a cada alteração. Publicar copia o rascunho para a versão
pública e guarda uma revisão.
- Página pública:
/<endereço>, montada no servidor (abre rápido e o
Google lê). O mesmo componente (PageView) faz a prévia no editor.
- Links curtos:
/l/<código> registra o clique e redireciona.
- Estatísticas: visitas, cliques por bloco, por rede social e por link
curto. Os eventos chegam por
/api/track.
- Contatos: o bloco "Captar contatos" envia para
/api/subscribe.
A lista pode ser exportada em CSV.
- Pagamentos: em Configurações, o criador conecta uma conta Stripe
Express. A venda pelos blocos ainda não foi feita.
Rodar localmente
- Crie um projeto no Supabase e rode, em ordem,
os arquivos de
supabase/migrations/ no SQL Editor.
- Em Authentication → URL Configuration, adicione
http://localhost:3000/auth/callback às URLs de redirecionamento.
- Copie
.env.example para .env.local e preencha. A
SUPABASE_SERVICE_ROLE_KEY é a chave secret (sb_secret_...) ou a
service_role (começa com eyJ), em Project Settings → API Keys. Sem
ela a página pública, os links curtos, as estatísticas e a captação não
funcionam. A STRIPE_SECRET_KEY começa com sk_test_ ou sk_live_.
- Confirmação de e-mail: o envio padrão do Supabase manda poucos e-mails
por hora. Para testar, desligue "Confirm email" em Authentication →
Sign In / Providers → Email. Em produção, configure um SMTP próprio em
Authentication → Emails → SMTP Settings.
npm install e npm run dev.
Comandos
| Comando | O que faz |
|---|
npm run dev | servidor de desenvolvimento |
npm run build | build de produção |
npm test | testes (Vitest) |
npm run typecheck | checagem de tipos |
npm run lint | ESLint |
npm run e2e | teste de ponta a ponta no navegador (com o app rodando em localhost:3000); capturas em e2e/shots/ |
Próximos passos
- Upload de foto e capa (Supabase Storage); hoje são links de imagem.
- Vendas pelos blocos (produto digital, conteúdo pago) com Stripe Checkout e webhook.
- Conteúdo trancado (inscrição, pagamento, código).
- Mais blocos: produto, agenda, contato (vCard), mapa.
- Domínio próprio, plano Pro e limite de uso por plano.
- Limite de requisições em
/api/track e /api/subscribe.
