Sistema de Notificações: Como Criar
Sistema de notificações: canais, preferências e o que não spammar o usuário.
Por que isso é importante
Criar um sistema de notificações exige canal certo, preferência do usuário e regra de silêncio. Mais volume sem relevância só gera opt-out.
MVP: Comece pelo básico
Antes de escalar ou pensar em automatizações complexas, lança um MVP funcional e valida com usuários reais. Isso evita desperdício de tempo e foca no que importa: resolver problemas de verdade.
Entendendo o cenário do projeto
A plataforma tem uma área de membros onde usuários assistem aulas e comentam dúvidas. Essas dúvidas são respondidas, mas sem avisar o usuário — criando ruído na comunicação. Daí surge a necessidade de um sistema de notificações que informe sempre que alguém interagir com um comentário.
Estrutura visual inicial
Primeiro veio um protótipo visual com um sino mostrando notificações não lidas e uma lista de mensagens. Essa interface ainda não estava conectada ao sistema final, mas ajudou a planejar componentes e arquitetura.
Componentização da interface
A construção usou três componentes React: NotificationDropdown (janela pop-up), NotificationList (lista de notificações) e NotificationItem (cada item). Tudo estruturado de forma reutilizável, seguindo boas práticas e separação de responsabilidades.
Tipos e estrutura de dados
O sistema usa arquivos de tipos no front pra garantir consistência entre dados do back e o que é renderizado. Interfaces foram criadas pra 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 usa Supabase, com duas tabelas: notificações e notificações lidas. Essa separação é chave pra permitir notificações globais — tipo avisos de novas aulas que valem pra todos os usuários.
Trigger: automatizando notificações
Pra reduzir dependência do front, usamos uma trigger na tabela de comentários. Sempre que um comentário novo é inserido como resposta a outro, uma função dispara e salva a notificação automática no banco.
Atenção
Todo o processo exige domínio de SQL, principalmente pra escrever a função que a trigger vai disparar no Supabase. Faz testes controlados antes de publicar em produção.
Estrutura da tabela de notificações
A tabela tem os campos: userId (quem recebe), frontUserId (quem gerou), tipo, título, mensagem, link e timestamp. Esses dados deixam você identificar e direcionar a notificação corretamente.
Lógica para notificações lidas
Criar um campo "lido" direto na tabela de notificações não ia atender notificações globais. Por isso criamos uma tabela separada de notificações lidas, registrando individualmente qual usuário leu qual notificação.
Renderizando no front-end
Depois que a trigger preenche os dados automático, uma consulta agregada junta as infos da tabela de notificações com as lidas pro front renderizar a quantidade de novas notificações e suas mensagens.
Criação da função no Supabase
Com ajuda da IA, geramos uma função SQL que extrai dados do comentário inserido e alimenta a tabela de notificações corretamente. 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 pra aula correspondente. Essa URL é montada dinamicamente com base no ID do curso e no número da aula, deixando a navegação fluida.
Importante
Configura as permissões RLS depois dos testes pra garantir segurança. Não deixa a tabela aberta em produção.
Testando a trigger
Ao comentar uma resposta no front, o sistema já insere a entrada na tabela de comentários. Na hora, a trigger executa a função e a notificação aparece na tabela do Supabase. Isso garante que o fluxo tá funcional antes de integrar visualmente.
Dica
Usa IA pra escrever SQL em ambientes complexos. Explica suas tabelas, campos e lógica de negócio. Ela retorna funções bem formadas que precisam só de testes e ajustes mínimos.
Integrando: do banco ao front
Depois de validar tabelas e gatilhos, basta usar a função agregadora via API pra entregar a lista de notificações e contar as não lidas. O front renderiza tudo dinamicamente com responsividade.
Refinando a experiência do usuário
Com o sistema rodando, dá pra adicionar novos recursos: marcação como lida ao clicar, filtros, agrupamento por tipo e tempo, entre outros. Isso melhora a experiência e aumenta a retenção de alunos.
Checklist de Implementação
Continue lendo
Supabase Tutorial: Backend Completo em 15 Minutos
Domine Supabase do zero: authentication robusta, database PostgreSQL, APIs automáticas e real-time subscriptions....
Como criar um gerador de imagens com IA, ChatGPT API, React e Supabase (passo a passo 2026)
O passo a passo definitivo para criar um aplicativo web que gera imagens com IA, faz autenticação e...
Convex vs Supabase em 2026: O Guia Completo para Bancos, AI e Dev Experience
A real diferença entre Convex e Supabase para quem constrói rápido, forte e SEM travas. Descubra custos, limites que...
Como Monetizar Hobbies Usando Supabase, IA e React: Guia Prático SideBling
Transforme suas habilidades em fontes de renda através de uma aplicação moderna com React, Supabase e integração de...