How to Build Notification system with V0

1// Paste this prompt into V0's AI chat:
2// Build a notification system. Create a Supabase schema:
3// 1. notification_templates: id (uuid PK), slug (text UNIQUE), title_template (text), body_template (text), channels (text[] DEFAULT '{in_app}'), category (text)
4// 2. notifications: id (uuid PK), user_id (uuid FK to auth.users), template_id (uuid FK to notification_templates), title (text), body (text), data (jsonb), channels_sent (text[]), is_read (boolean DEFAULT false), read_at (timestamptz), created_at (timestamptz)
5// 3. notification_preferences: user_id (uuid FK to auth.users), category (text), in_app (boolean DEFAULT true), email (boolean DEFAULT true), push (boolean DEFAULT false), PRIMARY KEY (user_id, category)
6// 4. push_subscriptions: id (uuid PK), user_id (uuid FK to auth.users), endpoint (text), keys (jsonb), created_at (timestamptz)
7// Enable Realtime on the notifications table. Seed templates for common events.
8// Add RLS: users see only their own notifications and preferences.

1import { createClient } from '@supabase/supabase-js'
2import { NextRequest, NextResponse } from 'next/server'
3import { Resend } from 'resend'
4import webpush from 'web-push'
5
6const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!)
7const resend = new Resend(process.env.RESEND_API_KEY)
8
9webpush.setVapidDetails('mailto:admin@yourdomain.com', process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!, process.env.VAPID_PRIVATE_KEY!)
10
11function renderTemplate(template: string, data: Record<string, string>): string {
12  return template.replace(/\{\{(\w+)\}\}/g, (_, key) => data[key] || '')
13}
14
15export async function POST(req: NextRequest) {
16  const { user_id, template_slug, data } = await req.json()
17
18  const { data: template } = await supabase.from('notification_templates').select('*').eq('slug', template_slug).single()
19  if (!template) return NextResponse.json({ error: 'Template not found' }, { status: 404 })
20
21  const title = renderTemplate(template.title_template, data)
22  const body = renderTemplate(template.body_template, data)
23
24  const { data: prefs } = await supabase.from('notification_preferences').select('*').eq('user_id', user_id).eq('category', template.category).single()
25  const userPrefs = prefs || { in_app: true, email: true, push: false }
26
27  const channels: string[] = []
28  const dispatches: Promise<any>[] = []
29
30  if (userPrefs.in_app) {
31    channels.push('in_app')
32    dispatches.push(supabase.from('notifications').insert({ user_id, template_id: template.id, title, body, data, channels_sent: channels }))
33  }
34
35  if (userPrefs.email) {
36    channels.push('email')
37    const { data: user } = await supabase.auth.admin.getUserById(user_id)
38    if (user?.user?.email) {
39      dispatches.push(resend.emails.send({ from: 'notifications@yourdomain.com', to: user.user.email, subject: title, html: `<p>${body}</p>` }))
40    }
41  }
42
43  if (userPrefs.push) {
44    channels.push('push')
45    const { data: subs } = await supabase.from('push_subscriptions').select('*').eq('user_id', user_id)
46    for (const sub of subs || []) {
47      dispatches.push(webpush.sendNotification({ endpoint: sub.endpoint, keys: sub.keys }, JSON.stringify({ title, body })))
48    }
49  }
50
51  const results = await Promise.allSettled(dispatches)
52  return NextResponse.json({ channels, results: results.map(r => r.status) })
53}

1'use client'
2
3import { useEffect, useState } from 'react'
4import { createBrowserClient } from '@supabase/ssr'
5import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
6import { Button } from '@/components/ui/button'
7import { Badge } from '@/components/ui/badge'
8import { ScrollArea } from '@/components/ui/scroll-area'
9import { Bell } from 'lucide-react'
10
11interface Notification { id: string; title: string; body: string; is_read: boolean; created_at: string }
12
13export function NotificationBell({ userId, initial }: { userId: string; initial: Notification[] }) {
14  const [notifications, setNotifications] = useState(initial)
15  const unread = notifications.filter(n => !n.is_read).length
16  const supabase = createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
17
18  useEffect(() => {
19    const channel = supabase.channel(`notifications:${userId}`)
20      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'notifications', filter: `user_id=eq.${userId}` }, (payload) => {
21        setNotifications(prev => [payload.new as Notification, ...prev])
22      }).subscribe()
23    return () => { supabase.removeChannel(channel) }
24  }, [userId, supabase])
25
26  return (
27    <Popover>
28      <PopoverTrigger asChild>
29        <Button variant="ghost" size="icon" className="relative">
30          <Bell className="h-5 w-5" />
31          {unread > 0 && <Badge className="absolute -top-1 -right-1 h-5 w-5 p-0 flex items-center justify-center">{unread}</Badge>}
32        </Button>
33      </PopoverTrigger>
34      <PopoverContent className="w-80">
35        <ScrollArea className="h-80">
36          {notifications.map(n => (
37            <div key={n.id} className={`p-3 border-b ${n.is_read ? '' : 'bg-muted/50'}`}>
38              <p className="text-sm font-medium">{n.title}</p>
39              <p className="text-xs text-muted-foreground">{n.body}</p>
40            </div>
41          ))}
42        </ScrollArea>
43      </PopoverContent>
44    </Popover>
45  )
46}

1// Paste this prompt into V0's AI chat:
2// Create notification settings at app/settings/notifications/page.tsx.
3// Requirements:
4// - Fetch all notification categories from templates (distinct categories)
5// - For each category, show a row with: category name, three Switch toggles (In-App, Email, Push)
6// - Pre-fill with current user preferences from notification_preferences
7// - Save Button uses Server Action to upsert preferences per category
8// - Push toggle: if enabling push for the first time, trigger browser permission request and register service worker
9// - Store push subscription in push_subscriptions table via /api/notifications/push/subscribe
10// - Use shadcn/ui Switch, Table layout, Separator between categories, Toast for save confirmation
11// Also configure NEXT_PUBLIC_VAPID_PUBLIC_KEY in Vars for service worker registration and VAPID_PRIVATE_KEY without prefix for server-side push.