How to Build Newsletter subscriptions with V0

1// Paste this prompt into V0's AI chat:
2// Build a newsletter subscription system. Create a Supabase schema:
3// 1. subscribers: id (uuid PK), email (text UNIQUE), name (text), status (text DEFAULT 'pending' CHECK IN 'pending','active','unsubscribed'), confirmation_token (uuid DEFAULT gen_random_uuid()), preferences (jsonb DEFAULT '{}'), subscribed_at (timestamptz DEFAULT now()), confirmed_at (timestamptz)
4// 2. lists: id (uuid PK), name (text), slug (text UNIQUE), description (text)
5// 3. subscriber_lists: subscriber_id (uuid FK to subscribers), list_id (uuid FK to lists), PRIMARY KEY (subscriber_id, list_id)
6// Seed lists: 'Weekly Digest', 'Product Updates', 'Tips & Tutorials'.
7// Add RLS policies. Generate SQL and TypeScript types.

1import { createClient } from '@supabase/supabase-js'
2import { NextRequest, NextResponse } from 'next/server'
3import { Resend } from 'resend'
4
5const supabase = createClient(
6  process.env.SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9const resend = new Resend(process.env.RESEND_API_KEY)
10
11export async function POST(req: NextRequest) {
12  const { email, name } = await req.json()
13
14  if (!email || !email.includes('@')) {
15    return NextResponse.json({ error: 'Invalid email' }, { status: 400 })
16  }
17
18  const { data: existing } = await supabase
19    .from('subscribers')
20    .select('id, status')
21    .eq('email', email)
22    .single()
23
24  if (existing?.status === 'active') {
25    return NextResponse.json({ error: 'Already subscribed' }, { status: 409 })
26  }
27
28  const { data: subscriber, error } = await supabase
29    .from('subscribers')
30    .upsert({ email, name, status: 'pending' })
31    .select('id, confirmation_token')
32    .single()
33
34  if (error) {
35    return NextResponse.json({ error: error.message }, { status: 500 })
36  }
37
38  const confirmUrl = `${process.env.NEXT_PUBLIC_APP_URL}/confirm?token=${subscriber.confirmation_token}`
39
40  await resend.emails.send({
41    from: 'newsletter@yourdomain.com',
42    to: email,
43    subject: 'Confirm your subscription',
44    html: `<p>Hi ${name || 'there'},</p><p>Click <a href="${confirmUrl}">here</a> to confirm your subscription.</p>`,
45  })
46
47  return NextResponse.json({ success: true })
48}

1// Paste this prompt into V0's AI chat:
2// Create subscription pages:
3// 1. app/confirm/page.tsx — reads 'token' from URL searchParams, calls /api/confirm to validate and activate. Shows success Card with checkmark or error Card with retry link.
4// 2. app/preferences/page.tsx — reads 'token' from URL. Shows the subscriber's current list selections as Checkbox group. Save Button updates subscriber_lists via Server Action. Add an 'Unsubscribe from all' Button with AlertDialog confirmation.
5// 3. app/api/confirm/route.ts — GET that validates the token, updates subscriber status to 'active', sets confirmed_at, nullifies the token.
6// Use shadcn/ui Card for the confirmation message, Checkbox for list selection, Toast for success feedback.

1// Paste this prompt into V0's AI chat:
2// Create an admin dashboard at app/admin/subscribers/page.tsx.
3// Requirements:
4// - Fetch all subscribers with their list assignments
5// - Display in a shadcn/ui Table: email, name, status Badge (pending=yellow, active=green, unsubscribed=red), lists joined as Badge group, subscribed_at, confirmed_at
6// - Add filters: status Select, list Select, search Input
7// - Add 'Export CSV' Button that downloads all subscribers as a CSV file
8// - Show summary Cards: Total Subscribers, Active, Pending, Unsubscribed
9// - Add bulk actions: select rows with Checkbox, bulk delete or change status
10// - Protect this page with authentication check