>_
Modo Build
// Build com IA
⚡

// Build com IA

tutorialBuild com IA

Supabase para builders: banco de dados sem ser desenvolvedor

Todo projeto real precisa persistir dados — usuários, compras, progresso, formulários. Supabase é o banco de dados que qualquer builder consegue usar sem saber SQL avançado.

23 de junho de 202611 min de leitura

Quando você cria um site ou app com vibe coding, em algum momento você vai precisar de dados persistentes.

Usuários que se cadastram. Compras realizadas. Progresso em cursos. Formulários preenchidos. Favoritos salvos. Qualquer funcionalidade que precise lembrar algo além da sessão atual precisa de banco de dados.

Supabase é a plataforma que resolve isso para builders — sem precisar configurar servidor, sem precisar saber SQL avançado, e sem custo para começar.

O que é Supabase

Supabase é um banco de dados PostgreSQL hospedado na nuvem com:

  • Banco de dados relacional (PostgreSQL) com interface visual
  • Autenticação pronta: email/senha, Google, GitHub, magic link
  • Storage para arquivos (imagens, PDFs, vídeos)
  • API automática — cada tabela que você cria automaticamente vira um endpoint REST e GraphQL
  • Realtime — ouvir mudanças no banco em tempo real (necessário para chat, notificações)
  • Edge Functions — código serverless quando precisar de lógica

Plano gratuito: 2 projetos, 500MB de banco, 1GB de storage, 50.000 usuários cadastrados. Suficiente para qualquer MVP ou projeto pequeno.

Quando usar Supabase (e quando não usar)

Use Supabase quando:

  • Você precisa salvar dados que persistem entre sessões
  • Seu projeto tem usuários que se cadastram
  • Você precisa de permissões (alguns usuários veem coisas que outros não veem)
  • Você trabalha com Lovable, V0, ou Claude Code para construir o projeto

Não precisa de Supabase quando:

  • Seu site é completamente estático (blog, portfólio, landing page)
  • Os dados vêm todos de API externa (não precisa guardar nada)
  • Você só precisa de formulário de contato (use Formspree ou similar)

Criando o projeto

  1. Acesse supabase.com e crie uma conta (gratuito)
  2. "New Project" — escolha o nome e a região (Brazil é "South America East 1")
  3. Defina uma senha forte para o banco (anote — você vai usar depois)
  4. Aguarde ~2 minutos para o projeto provisionar

Depois de criado, você vai para o dashboard do projeto. Guarde:

  • Project URL: https://xxxxx.supabase.co
  • Anon Key: a chave pública para uso no frontend
  • Service Key: a chave privada para uso no servidor (nunca expor no frontend)

Criando sua primeira tabela

No menu lateral: Table Editor → New Table.

Para um exemplo prático, vamos criar uma tabela de leads de uma isca digital:

| Campo | Tipo | Padrão | |---|---|---| | id | uuid | auto | | email | text | obrigatório | | nome | text | opcional | | criado_em | timestamp | now() | | isca | text | qual isca baixou |

Configurações importantes:

  • Ative "Row Level Security (RLS)" — proteção básica de segurança
  • O campo id deve ser gerado automaticamente (uuid_generate_v4())

Depois de criar a tabela, vá em Authentication → Policies para configurar quem pode inserir e ler dados.

Usando com Claude Code (vibe coding)

A forma mais eficiente de integrar Supabase ao seu projeto é via Claude Code. O Supabase tem um MCP oficial que o Claude usa diretamente.

Configurando o MCP do Supabase no Claude Code:

  1. Acesse supabase.com → Settings → Access Tokens → "Generate new token"
  2. No terminal, configure o MCP:
claude mcp add supabase -- npx -y @supabase/mcp-server-supabase@latest --access-token SEU_TOKEN

Depois disso, você pode pedir diretamente ao Claude Code:

"Crie uma tabela de usuários no Supabase com campos: id, email, nome, plano (free/pro), criado_em. Configure Row Level Security para que usuários só vejam seus próprios dados."

O Claude vai criar a tabela, configurar as políticas de segurança, e gerar o código de integração.

Integração no código: o básico

Para projetos Next.js (como o Modo Build):

npm install @supabase/supabase-js

Crie o arquivo lib/supabase.ts:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseKey)

No .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...

Operações básicas que você vai usar

Inserir dados (salvar um lead)

const { data, error } = await supabase
  .from('leads')
  .insert([
    { email: 'usuario@email.com', nome: 'João', isca: 'checklist-seo' }
  ])

Buscar dados

// Todos os registros
const { data } = await supabase
  .from('leads')
  .select('*')
  .order('criado_em', { ascending: false })

// Com filtro
const { data } = await supabase
  .from('leads')
  .select('email, nome')
  .eq('isca', 'checklist-seo')

Atualizar

const { error } = await supabase
  .from('leads')
  .update({ plano: 'pro' })
  .eq('email', 'usuario@email.com')

Deletar

const { error } = await supabase
  .from('leads')
  .delete()
  .eq('id', registroId)

Autenticação em 15 minutos

Um dos maiores valores do Supabase é a autenticação pronta. Sem configurar servidor, sem JWT manual.

Login com email e senha:

// Cadastro
const { data, error } = await supabase.auth.signUp({
  email: 'usuario@email.com',
  password: 'senha123'
})

// Login
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'usuario@email.com',
  password: 'senha123'
})

// Usuário atual
const { data: { user } } = await supabase.auth.getUser()

// Logout
await supabase.auth.signOut()

Login com Google (OAuth):

No dashboard do Supabase: Authentication → Providers → Google → habilitar.

await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: { redirectTo: window.location.origin }
})

Pronto. Autenticação social funcionando sem configurar OAuth manualmente.

Como usar IA para gerar o schema do banco

Em vez de pensar em tabelas, colunas e tipos do zero:

Estou construindo [descrição do projeto].

Funcionalidades que preciso:
- [listar funcionalidades]

Crie o schema do banco de dados para este projeto usando Supabase/PostgreSQL:
1. Quais tabelas criar
2. Campos de cada tabela com tipos
3. Relacionamentos entre tabelas (foreign keys)
4. Políticas de Row Level Security básicas

Mantenha simples — só o que é necessário para as funcionalidades listadas.

Claude ou ChatGPT com esse prompt vai gerar o schema completo que você copia para o Table Editor do Supabase ou envia via MCP.

O que vem a seguir: projetos reais com Supabase

Com Supabase configurado, você consegue construir:

  • Formulário de captura de leads com banco real (não Google Sheets)
  • Área de membros com autenticação e conteúdo protegido por plano
  • Painel de admin para ver e gerenciar dados do projeto
  • Progresso de usuário em curso ou programa (XP, módulos concluídos)
  • Sistema de comentários em blog
  • Notificações em tempo real com Realtime

Todos esses são projetos que um builder com Claude Code consegue construir em horas — tendo Supabase como backend.

// próximo artigo

Repurposing de conteúdo com IA: como multiplicar 1 artigo em 5 formatos

Escrever do zero todo dia é insustentável. Repurposing é a habilidade de pegar um conteúdo que já funciona e extrair dele 5 formatos diferentes — com IA fazendo a maior parte.

9 min de leitura

#supabase#banco de dados#postgresql#builder#vibe coding#ia#backend