How to Build a Notification System with Lovable

1Create a multi-channel notification system schema. Tables:
2
31. notifications: id, user_id (references auth.users), type (text), channel (text: in_app|email|sms|push), title (text), body (text), metadata (jsonb default '{}'), is_read (bool default false), created_at
4
52. notification_preferences: id, user_id (references auth.users), event_type (text), in_app_enabled (bool default true), email_enabled (bool default true), sms_enabled (bool default false), push_enabled (bool default false), UNIQUE(user_id, event_type)
6
73. notification_templates: id, event_type (text unique), subject_template (text), body_template (text), sms_template (text), created_at
8
94. notification_queue: id, user_id, event_type, variables (jsonb), status (text default 'pending': pending|processing|done|failed), error_text (text), created_at, processed_at
10
11RLS policies:
12- notifications: users can SELECT and UPDATE (is_read) their own rows only
13- notification_preferences: users can SELECT, INSERT, UPDATE their own rows
14- notification_templates: public SELECT, service role only for mutations
15- notification_queue: service role only
16
17Create an index on notifications(user_id, is_read, created_at DESC) for fast unread counts.

1// src/components/NotificationBell.tsx
2import { useEffect, useState } from 'react'
3import { Bell } from 'lucide-react'
4import { Button } from '@/components/ui/button'
5import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
6import { Badge } from '@/components/ui/badge'
7import { ScrollArea } from '@/components/ui/scroll-area'
8import { supabase } from '@/lib/supabase'
9import { useAuth } from '@/hooks/useAuth'
10
11type Notification = {
12  id: string
13  title: string
14  body: string
15  is_read: boolean
16  created_at: string
17}
18
19export function NotificationBell() {
20  const { user } = useAuth()
21  const [notifications, setNotifications] = useState<Notification[]>([])
22  const [open, setOpen] = useState(false)
23
24  useEffect(() => {
25    if (!user?.id) return
26
27    supabase
28      .from('notifications')
29      .select('*')
30      .eq('user_id', user.id)
31      .eq('channel', 'in_app')
32      .order('created_at', { ascending: false })
33      .limit(20)
34      .then(({ data }) => setNotifications(data ?? []))
35
36    const channel = supabase
37      .channel(`notifications:${user.id}`)
38      .on(
39        'postgres_changes',
40        { event: 'INSERT', schema: 'public', table: 'notifications', filter: `user_id=eq.${user.id}` },
41        (payload) => {
42          setNotifications((prev) => [payload.new as Notification, ...prev])
43        }
44      )
45      .subscribe()
46
47    return () => { supabase.removeChannel(channel) }
48  }, [user?.id])
49
50  const unreadCount = notifications.filter((n) => !n.is_read).length
51
52  const markAllRead = async () => {
53    await supabase.from('notifications').update({ is_read: true }).eq('user_id', user!.id).eq('is_read', false)
54    setNotifications((prev) => prev.map((n) => ({ ...n, is_read: true })))
55  }
56
57  return (
58    <Popover open={open} onOpenChange={setOpen}>
59      <PopoverTrigger asChild>
60        <Button variant="ghost" size="icon" className="relative">
61          <Bell className="h-5 w-5" />
62          {unreadCount > 0 && (
63            <Badge className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs">
64              {unreadCount > 9 ? '9+' : unreadCount}
65            </Badge>
66          )}
67        </Button>
68      </PopoverTrigger>
69      <PopoverContent className="w-80 p-0" align="end">
70        <div className="flex items-center justify-between p-3 border-b">
71          <span className="font-semibold text-sm">Notifications</span>
72          {unreadCount > 0 && <Button variant="ghost" size="sm" onClick={markAllRead}>Mark all read</Button>}
73        </div>
74        <ScrollArea className="h-80">
75          {notifications.length === 0 ? (
76            <p className="text-center text-muted-foreground text-sm py-8">No notifications yet</p>
77          ) : (
78            notifications.map((n) => (
79              <div key={n.id} className={`p-3 border-b text-sm ${!n.is_read ? 'bg-muted/50' : ''}`}>
80                <p className="font-medium">{n.title}</p>
81                <p className="text-muted-foreground mt-0.5">{n.body}</p>
82              </div>
83            ))
84          )}
85        </ScrollArea>
86      </PopoverContent>
87    </Popover>
88  )
89}

1Create a Supabase Edge Function at supabase/functions/dispatch-notification/index.ts.
2
3The function should:
41. Accept a POST body: { queue_id: string } or process all 'pending' rows if no ID given
52. For each queued notification:
6   a. Fetch user preferences for that event_type
7   b. Fetch the notification_template for that event_type
8   c. Interpolate {{variable}} placeholders in subject_template, body_template, sms_template using the variables jsonb
9   d. Build an array of tasks based on enabled channels
103. Execute all channel tasks in parallel with Promise.all:
11   - in_app_enabled: INSERT into notifications with channel='in_app'
12   - email_enabled: POST to Resend API (https://api.resend.com/emails) with the email_template body. Use RESEND_API_KEY from Deno.env.
13   - sms_enabled: POST to Twilio Messages API. Use TWILIO_ACCOUNT_SID and TWILIO_AUTH_TOKEN from Deno.env.
144. Update notification_queue row: status='done', processed_at=now()
155. On any error, set status='failed', error_text=error.message
16
17Secrets needed in Cloud tab → Secrets: RESEND_API_KEY, TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN, TWILIO_FROM_NUMBER, RESEND_FROM_EMAIL
18
19For user email/phone, query auth.users via the Supabase admin client (service role key).

1Build a notification preferences page at src/pages/NotificationPreferences.tsx.
2
3Requirements:
4- Fetch all distinct event_type values from notification_templates
5- Fetch the current user's notification_preferences rows
6- Render a shadcn/ui Table with columns: Event Type (formatted as human-readable), In-App, Email, SMS
7- Each cell in the channel columns is a shadcn/ui Switch (checked = enabled)
8- Toggling any switch immediately calls: supabase.from('notification_preferences').upsert({ user_id, event_type, [channel]_enabled: newValue }, { onConflict: 'user_id,event_type' })
9- Show a Toast (useToast) on save: 'Preference saved'
10- If a user has no row for an event_type, default all switches to true (inherit defaults)
11- Group rows by category if templates have a category column, otherwise list alphabetically
12- Add a 'Save All' button that bulk-upserts all current switch states in one call

1// src/lib/notify.ts
2import { supabase } from '@/lib/supabase'
3
4export async function notifyUser(
5  userId: string,
6  eventType: string,
7  variables: Record<string, string> = {}
8): Promise<void> {
9  const { error } = await supabase.from('notification_queue').insert({
10    user_id: userId,
11    event_type: eventType,
12    variables,
13    status: 'pending',
14  })
15
16  if (error) {
17    console.error('Failed to queue notification:', error.message)
18    return
19  }
20
21  // Trigger the fan-out Edge Function
22  await supabase.functions.invoke('dispatch-notification')
23}
24
25// Usage in any component:
26// await notifyUser(recipientId, 'new_comment', { commenter: 'Alice', preview: 'Great post!' })