Supabase Real-time Notifications React 2025: Sistema Completo com Database Triggers
Implemente sistema de notificações real-time profissional: Supabase database triggers, React hooks, Edge Functions, push notifications. Tutorial prático com código completo e architecture patterns.
Por que isso é importante
Notificações são essenciais para manter os usuários engajados e informados. Um sistema eficiente garante interações contínuas com a plataforma e melhora significativamente a experiência, além de permitir rápida resolução de dúvidas em ambientes educacionais.
MVP: Comece pelo essencial
Antes de escalar ou pensar em automatizações complexas, é fundamental lançar um MVP funcional, validando seu produto com usuários reais. Isso evita desperdício de tempo e direciona o foco para o que realmente importa: resolver problemas reais.
Entendendo o cenário do projeto
A plataforma em questão possui uma área de membros onde usuários assistem aulas e comentam suas dúvidas. Essas dúvidas são respondidas, mas até então, sem avisar o usuário, criando ruído na comunicação. Surge aí a necessidade de um sistema de notificações que informe sempre que alguém interagir com um comentário do usuário.
Estrutura preliminar visual do sistema
Inicialmente, foi implementado um protótipo visual com um sino que exibe notificações não lidas e uma lista de mensagens. Essa interface ainda não estava conectada ao sistema final, mas ajudou a planejar os componentes e arquitetura que seriam adotados.
Componentização da interface
A construção foi feita com três componentes React principais: NotificationDropdown (janela pop-up), NotificationList (lista de notificações) e NotificationItem (exibição de cada item). Tudo foi estruturado de forma reutilizável, seguindo boas práticas e separação de responsabilidades.
Tipos, interfaces e estrutura de dados
O sistema utiliza arquivos de tipos no front-end para garantir consistência entre os dados recebidos do back-end e o que é renderizado. Interfaces foram criadas para representar notificações, definindo campos como título, mensagem, link, e status de leitura.
Criando o back-end com Supabase
Toda lógica de persistência foi feita com Supabase, criando duas tabelas: notificações e notificações lidas. Essa separação é essencial para permitir notificações globais - por exemplo, avisos de novas aulas que se aplicam a todos os usuários.
Trigger: automatizando notificações
Para reduzir dependência do front-end, foi utilizada uma trigger na tabela de comentários. Sempre que um novo comentário é inserido em resposta a outro, uma função é acionada e salva a notificação de forma automática no banco de dados.
⚠️Atenção
Todo o processo exige domínio de SQL, especialmente para escrita da função que será disparada pela trigger dentro do Supabase. Faça testes controlados antes de publicar em produção.
Estrutura da tabela de notificações
A tabela inclui os campos: userId (quem recebe), frontUserId (quem gerou), tipo, título, mensagem, link e timestamp. Esses dados permitem identificar e direcionar a notificação corretamente.
Lógica para notificações lidas
Criar um campo “lido” diretamente na tabela de notificações não atenderia adequadamente notificações globais. Assim, foi feita uma tabela separada de notificações lidas, registrando individualmente qual usuário leu qual notificação.
Renderizando no front-end
Após a trigger preencher os dados automaticamente, uma consulta agregada junta as informações da tabela de notificações com as lidas para o front-end renderizar a quantidade de novas notificações e suas respectivas mensagens.
Criação da função no Supabase
Com a ajuda da IA, foi gerada uma função SQL que extrai dados do comentário inserido e alimenta corretamente a tabela de notificações. Essa função considera o userId do autor original do comentário e a estrutura completa do curso e aula envolvidos.
Definição dinâmica do link
Cada notificação carrega um link personalizado que direciona o usuário para a aula correspondente. Essa URL é montada dinamicamente com base no ID do curso e no número da aula, proporcionando uma navegação fluída.
ℹ️Importante
Permissões RLS devem ser configuradas após os testes para garantir segurança. Não deixe a tabela aberta em produção.
Testando a trigger
Ao comentar uma resposta no front-end, o sistema já insere a entrada na tabela de comentários. Imediatamente, a trigger executa a função e a notificação aparece na tabela do Supabase. Isso garante que o fluxo esteja funcional antes de integrar visualmente.
✅Dica
Utilize IA para escrever SQL em ambientes complexos. Explique suas tabelas, campos e lógica de negócio. Ela retorna funções bem formadas que exigem apenas testes e ajustes mínimos.
Integrando: do banco ao front
Após validar as tabelas e gatilhos, basta utilizar a função agregadora via API para entregar a lista de notificações e contabilizar o número de não lidas. O front pode então renderizar tudo dinamicamente com responsividade.
Refinando a experiência do usuário
Com o sistema funcionando, novos recursos podem ser adicionados: marcação como lida ao clicar, filtros, agrupamento por tipo e tempo, entre outros. Isso aprimora a experiência e aumenta a retenção de alunos.