Projeto 1 — Autenticação segura com Supabase Auth

Objetivo: compreender o fluxo de autenticação com e-mail/senha, gestão de sessão e recuperação de senha usando o Supabase Auth. Ao final, você terá um cadastro/login funcionando, com persistência de sessão entre recarregamentos.

• Configurar o projeto no painel do Supabase e ativar a autenticação por e-mail/senha.
• Instalar o client-side library @supabase/supabase-js e inicializar o cliente.
• Implementar cadastro, login e recuperação de senha no frontend.
• Gerenciar a sessão do usuário (persistência e sinalização de login).

Exemplo de inicialização do cliente e fluxo de signup (exemplo simples, adaptável ao seu app):

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

const SUPABASE_URL = 'https://SEU-PROYECTO.supabase.co'
const SUPABASE_ANON_KEY = 'SUA-CHAVE-ANON'

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

export async function signUp(email, password) {
  const { user, error } = await supabase.auth.signUp({ email, password })
  if (error) throw error
  return user
}
      

Projeto 2 — Blog simples com CRUD de posts

Objetivo: criar uma base de posts com operações de Create, Read, Update e Delete, exercitando integrações com Postgres via Supabase e regras de acesso básicas.

• Definir uma tabela posts com campos como id, title, content, author_id e created_at.
• Habilitar Row Level Security (RLS) e políticas simples para leitura pública e edição por autores.
• Consumir a API via supabase-js para listar, criar e gerenciar posts no frontend.

Exemplos de chamadas com supabase-js (use conforme seu estado de autenticação):

Listar posts ordenados por data de criação (recente): supabase.from('posts').select('*').order('created_at', { ascending: false })

Criar post (titâlo, conteúdo) com author_id obtido do usuário atual: supabase.from('posts').insert([{ title, content, author_id: user.id }])

Projeto 3 — Armazenamento de arquivos com Storage

Objetivo: entender como salvar arquivos (imagens, documentos) e expor URLs públicas quando necessário, usando o Storage do Supabase.

• Criar bucket (por exemplo, avatars) e configurar acesso público conforme seu caso de uso.
• Fazer upload de um arquivo e obter a URL pública para exibição no frontend.

Exemplos de operações comuns (inline code):

Upload de arquivo: supabase.storage.from('avatars').upload('public/avatar.png', file)

Gerar URL pública: supabase.storage.from('avatars').getPublicUrl('public/avatar.png')

Observação: trate de forma segura a permissão de leitura de arquivos; para produção, avalie políticas de acesso, expiração de URLs e proteção de recursos sensíveis.

Projeto 4 — Realtime com mensagens

Objetivo: explorar recursos de Realtime do Supabase para receber eventos em tempo real, ideal para chats simples ou feeds ao vivo.

• Configurar uma fonte de dados (ex.: tabela messages com campos id, content, created_at, user_id).
• Assinar eventos de INSERT para renderizar mensagens assim que chegam.

Exemplo de assinatura em frontend (supabase-js):

supabase.from('messages').on('INSERT', payload => { /* atualizar UI com payload.new */ }).subscribe()