Bolt.new + Supabase: Banco de Dados e Autenticação Completa

O Bolt.new é excelente para criar o frontend e a lógica de servidor, mas para persistência de dados você precisa de um banco. O Supabase é a combinação perfeita — rápido de configurar, poderoso e com client npm que o Bolt instala facilmente.

Configuração inicial

Integre o Supabase ao projeto:
- Instale @supabase/supabase-js
- Configure as variáveis de ambiente:
  VITE_SUPABASE_URL=sua_url
  VITE_SUPABASE_ANON_KEY=sua_chave_anon
  SUPABASE_SERVICE_KEY=chave_de_servico (apenas no backend)
- Crie src/lib/supabase.ts com o cliente:
  import { createClient } from "@supabase/supabase-js"
  export const supabase = createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_ANON_KEY)

Autenticação com Supabase Auth

Implemente autenticação completa:
- Página de login com e-mail e senha
- Página de cadastro com confirmação de e-mail
- Página de reset de senha
- Hook useAuth() que retorna o usuário atual e funções signIn, signOut, signUp
- Redirecionamento automático para /login quando não autenticado
- Redirecionamento para /dashboard após login bem-sucedido

Criando tabelas e relacionamentos

Crie as seguintes tabelas no Supabase (via migrations SQL):

TABELA profiles:
- id UUID REFERENCES auth.users PRIMARY KEY
- full_name TEXT
- avatar_url TEXT
- plan TEXT DEFAULT free
- created_at TIMESTAMPTZ DEFAULT NOW()

TABELA projects:
- id UUID DEFAULT gen_random_uuid() PRIMARY KEY
- user_id UUID REFERENCES profiles(id) ON DELETE CASCADE
- name TEXT NOT NULL
- description TEXT
- status TEXT DEFAULT active
- created_at TIMESTAMPTZ DEFAULT NOW()

Configure RLS:
- profiles: usuário só acessa seu próprio perfil
- projects: usuário só acessa seus próprios projetos

CRUD com React Query

Implemente CRUD para projects usando React Query:
- useProjects(): lista projetos do usuário logado
- useCreateProject(): mutation para criar projeto
- useUpdateProject(): mutation para atualizar
- useDeleteProject(): mutation para deletar
Adicione invalidateQueries após mutations para atualizar a lista

Realtime: atualizações ao vivo

Uma das features mais poderosas do Supabase é o Realtime — subscriptions que atualizam o frontend automaticamente quando o banco muda:

Adicioneve subscription Realtime à tabela projects:
- Quando um projeto é criado, atualizado ou deletado, refaça o fetch automaticamente
- Use supabase.channel() com on("postgres_changes") para se inscrever
- Cancele a subscription no cleanup do useEffect
Isso permite que múltiplas abas ou usuários vejam mudanças em tempo real.

Storage para upload de arquivos

Integre o Supabase Storage para upload de avatar:
- Crie um bucket público chamado "avatars"
- Na página de perfil, adicione campo de upload de imagem
- Ao selecionar imagem, faça upload para Supabase Storage
- Salve a URL pública no campo avatar_url do perfil
- Exiba o avatar no header do app

TypeScript types do Supabase

Para TypeScript safety nas queries:

Instale supabase CLI e rode: supabase gen types typescript > src/types/supabase.ts
Use os tipos gerados no cliente Supabase:
const supabase = createClient<Database>(url, key)

Com essa integração completa, seu app Bolt tem toda a infraestrutura de backend necessária para um produto de produção.