How to Build SMS notification system with V0

1// Paste this prompt into V0's AI chat:
2// Build an SMS notification system. Create a Supabase schema with:
3// 1. contacts: id (uuid PK), user_id (uuid), phone (text UNIQUE), country_code (text), first_name (text), opted_in (boolean DEFAULT false), opted_in_at (timestamptz), opted_out_at (timestamptz), created_at (timestamptz)
4// 2. sms_messages: id (uuid PK), contact_id (uuid FK), template_id (uuid FK nullable), direction (text CHECK outbound/inbound), body (text), status (text CHECK queued/sent/delivered/failed/undelivered), provider_message_id (text), error_code (text), sent_at (timestamptz), delivered_at (timestamptz), created_at (timestamptz)
5// 3. sms_templates: id (uuid PK), owner_id (uuid FK), name (text), body_template (text), variables (text[]), category (text CHECK transactional/marketing), created_at (timestamptz)
6// 4. campaigns: id (uuid PK), owner_id (uuid FK), name (text), template_id (uuid FK), segment_criteria (jsonb), status (text CHECK draft/scheduled/sending/completed), scheduled_at (timestamptz), sent_count (integer DEFAULT 0), delivered_count (integer DEFAULT 0), created_at (timestamptz)
7// RLS: users can only manage their own contacts, templates, and campaigns.
8// Generate SQL migration and TypeScript types.

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3import twilio from 'twilio'
4
5const supabase = createClient(
6  process.env.SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10const twilioClient = twilio(
11  process.env.TWILIO_ACCOUNT_SID!,
12  process.env.TWILIO_AUTH_TOKEN!
13)
14
15export async function POST(req: NextRequest) {
16  const { contact_id, template_id, variables } = await req.json()
17
18  const { data: contact } = await supabase
19    .from('contacts')
20    .select('*')
21    .eq('id', contact_id)
22    .eq('opted_in', true)
23    .single()
24
25  if (!contact) {
26    return NextResponse.json(
27      { error: 'Contact not found or not opted in' },
28      { status: 400 }
29    )
30  }
31
32  const { data: template } = await supabase
33    .from('sms_templates')
34    .select('*')
35    .eq('id', template_id)
36    .single()
37
38  if (!template) {
39    return NextResponse.json({ error: 'Template not found' }, { status: 404 })
40  }
41
42  let body = template.body_template
43  for (const [key, value] of Object.entries(variables || {})) {
44    body = body.replace(new RegExp(`{{${key}}}`, 'g'), value as string)
45  }
46
47  const message = await twilioClient.messages.create({
48    body,
49    to: `${contact.country_code}${contact.phone}`,
50    from: process.env.TWILIO_PHONE_NUMBER!,
51    statusCallback: `${process.env.NEXT_PUBLIC_APP_URL}/api/webhooks/twilio`,
52  })
53
54  await supabase.from('sms_messages').insert({
55    contact_id,
56    template_id,
57    direction: 'outbound',
58    body,
59    status: 'queued',
60    provider_message_id: message.sid,
61    sent_at: new Date().toISOString(),
62  })
63
64  return NextResponse.json({ success: true, message_sid: message.sid })
65}

1// Paste this prompt into V0's AI chat:
2// Build a Twilio webhook handler at app/api/webhooks/twilio/route.ts.
3// Requirements:
4// - POST handler that receives Twilio delivery status callbacks
5// - Verify X-Twilio-Signature header using twilio.validateRequest()
6//   with TWILIO_AUTH_TOKEN, the full request URL, and parsed body params
7// - On delivery status: update sms_messages set status from Twilio's MessageStatus
8//   (queued/sent/delivered/failed/undelivered) where provider_message_id = MessageSid
9// - On inbound message (direction check): if body contains STOP/UNSUBSCRIBE,
10//   update contacts set opted_in = false, opted_out_at = now()
11//   Otherwise insert into sms_messages with direction = 'inbound'
12// - Return TwiML response (empty <Response/>) with 200 status
13// - Use request.text() to get raw body, then parse as URLSearchParams
14//
15// Also build the message log page at app/sms/page.tsx:
16// - Table of messages with columns: phone, body preview, status Badge, direction, sent_at
17// - Badge colors: queued=gray, sent=blue, delivered=green, failed=red, undelivered=orange
18// - Filter by status and direction using Select dropdowns
19// - Use shadcn/ui Table, Badge, Select, Card for summary metrics (total sent, delivered %, failed count)

1// Paste this prompt into V0's AI chat:
2// Build a campaign manager at app/sms/campaigns/page.tsx.
3// Requirements:
4// - List of campaigns as Cards showing name, template, status Badge, sent/delivered counts
5// - "Create Campaign" Button opens Dialog with:
6//   - name Input, template Select (from sms_templates)
7//   - Contact segment selection: all opted-in, or filter by criteria
8//   - Calendar + Popover DatePicker for scheduling (optional — leave empty for immediate)
9//   - Preview of the template body
10// - Campaign detail view:
11//   - Progress bar showing sent_count / total contacts
12//   - Delivered vs failed ratio
13//   - Table of individual message statuses
14// - "Launch Campaign" Button with confirmation Dialog
15// - Server Action launchCampaign() that:
16//   - Queries contacts matching segment_criteria
17//   - Sends messages in chunks of 100 (to stay within serverless timeout)
18//   - Updates campaign sent_count after each chunk
19// - Use shadcn/ui Card, Badge, Button, Dialog, Calendar, Popover, Progress, Table, Select, Toast