How to Build Subscription box service with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a subscription box service:
3// 1. plans table: id (uuid PK), name (text), description (text), price_cents (int), interval (text — 'monthly', 'quarterly', 'annual'), stripe_price_id (text NOT NULL), is_active (boolean DEFAULT true)
4// 2. subscribers table: id (uuid PK), user_id (uuid FK), plan_id (uuid FK), stripe_customer_id (text), stripe_subscription_id (text), status (text — 'active', 'paused', 'cancelled', 'past_due'), preferences (jsonb — stores size/flavor/dietary prefs), started_at (timestamptz), current_period_end (timestamptz)
5// 3. boxes table: id (uuid PK), subscriber_id (uuid FK), period_start (date), period_end (date), status (text — 'curating', 'shipped', 'delivered'), tracking_number (text nullable), shipped_at (timestamptz nullable), UNIQUE(subscriber_id, period_start) for idempotency
6// 4. box_items table: id (uuid PK), box_id (uuid FK), product_id (uuid FK), quantity (int DEFAULT 1)
7// 5. products table: id (uuid PK), name (text), description (text), category (text), image_url (text), cost_cents (int), stock (int)
8// Add RLS so users see only their own subscriptions and boxes.
9// Seed 3 plans: Basic $29/mo, Premium $49/mo, Deluxe $79/mo.

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
3import { Badge } from '@/components/ui/badge'
4import { Button } from '@/components/ui/button'
5import Link from 'next/link'
6
7export default async function LandingPage() {
8  const supabase = await createClient()
9  const { data: plans } = await supabase
10    .from('plans')
11    .select('*')
12    .eq('is_active', true)
13    .order('price_cents')
14
15  return (
16    <div className="max-w-5xl mx-auto p-6">
17      <h1 className="text-4xl font-bold text-center mb-4">
18        Curated boxes delivered to your door
19      </h1>
20      <p className="text-center text-muted-foreground mb-8">
21        Choose your plan and customize your preferences.
22      </p>
23      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
24        {plans?.map((plan, i) => (
25          <Card key={plan.id} className={i === 1 ? 'border-primary' : ''}>
26            <CardHeader>
27              <div className="flex justify-between items-center">
28                <CardTitle>{plan.name}</CardTitle>
29                {i === 1 && <Badge>Most Popular</Badge>}
30              </div>
31            </CardHeader>
32            <CardContent>
33              <p className="text-3xl font-bold">
34                ${(plan.price_cents / 100).toFixed(0)}
35                <span className="text-sm font-normal text-muted-foreground">
36                  /{plan.interval}
37                </span>
38              </p>
39              <p className="mt-2 text-muted-foreground">{plan.description}</p>
40            </CardContent>
41            <CardFooter>
42              <Link href={`/subscribe?plan=${plan.id}`} className="w-full">
43                <Button className="w-full">
44                  {i === 1 ? 'Get Started' : 'Choose Plan'}
45                </Button>
46              </Link>
47            </CardFooter>
48          </Card>
49        ))}
50      </div>
51    </div>
52  )
53}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(
7  process.env.NEXT_PUBLIC_SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const { planId, preferences } = await req.json()
13
14  const { data: plan } = await supabase
15    .from('plans')
16    .select('stripe_price_id, name')
17    .eq('id', planId)
18    .single()
19
20  if (!plan) {
21    return NextResponse.json({ error: 'Plan not found' }, { status: 404 })
22  }
23
24  const session = await stripe.checkout.sessions.create({
25    payment_method_types: ['card'],
26    line_items: [
27      {
28        price: plan.stripe_price_id,
29        quantity: 1,
30      },
31    ],
32    mode: 'subscription',
33    subscription_data: {
34      trial_period_days: 7,
35    },
36    success_url: `${req.nextUrl.origin}/account?subscribed=true`,
37    cancel_url: `${req.nextUrl.origin}/subscribe?plan=${planId}`,
38    metadata: {
39      plan_id: planId,
40      preferences: JSON.stringify(preferences),
41    },
42  })
43
44  return NextResponse.json({ url: session.url })
45}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(
7  process.env.NEXT_PUBLIC_SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const rawBody = await req.text()
13  const sig = req.headers.get('stripe-signature')!
14
15  let event: Stripe.Event
16  try {
17    event = stripe.webhooks.constructEvent(
18      rawBody,
19      sig,
20      process.env.STRIPE_WEBHOOK_SECRET!
21    )
22  } catch {
23    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
24  }
25
26  if (event.type === 'invoice.paid') {
27    const invoice = event.data.object as Stripe.Invoice
28    const subscriptionId = invoice.subscription as string
29
30    const { data: subscriber } = await supabase
31      .from('subscribers')
32      .select('id')
33      .eq('stripe_subscription_id', subscriptionId)
34      .single()
35
36    if (subscriber) {
37      const periodStart = new Date(invoice.period_start * 1000)
38        .toISOString().split('T')[0]
39      const periodEnd = new Date(invoice.period_end * 1000)
40        .toISOString().split('T')[0]
41
42      await supabase.from('boxes').upsert(
43        {
44          subscriber_id: subscriber.id,
45          period_start: periodStart,
46          period_end: periodEnd,
47          status: 'curating',
48        },
49        { onConflict: 'subscriber_id,period_start' }
50      )
51    }
52  }
53
54  if (event.type === 'customer.subscription.updated') {
55    const subscription = event.data.object as Stripe.Subscription
56    await supabase
57      .from('subscribers')
58      .update({
59        status: subscription.status === 'active' ? 'active' : 'past_due',
60        current_period_end: new Date(subscription.current_period_end * 1000).toISOString(),
61      })
62      .eq('stripe_subscription_id', subscription.id)
63  }
64
65  if (event.type === 'customer.subscription.deleted') {
66    const subscription = event.data.object as Stripe.Subscription
67    await supabase
68      .from('subscribers')
69      .update({ status: 'cancelled' })
70      .eq('stripe_subscription_id', subscription.id)
71  }
72
73  return NextResponse.json({ received: true })
74}

1// Paste this prompt into V0's AI chat:
2// Build a customer account page at app/account/page.tsx with:
3// 1. Tabs component with three tabs: Subscription, Boxes, Preferences
4// 2. Subscription tab: Card showing current plan name, status Badge (active=green, paused=yellow, cancelled=red), next billing date, and Buttons for "Manage Subscription" (opens Stripe Customer Portal) and "Cancel"
5// 3. Boxes tab: Timeline or Card list of past boxes showing period dates, status Badge (curating=blue, shipped=purple, delivered=green), tracking number link, and list of items in each box
6// 4. Preferences tab: Form with Checkbox groups for dietary preferences, Select for size, Select for flavor preferences, and Save Button that calls a Server Action
7// 5. AlertDialog for cancel confirmation
8// Use Server Component for data fetching, client components only for interactive elements.
9// Fetch data from Supabase subscribers, boxes, and box_items tables joined with products.

1// Paste this prompt into V0's AI chat:
2// Build an admin curation dashboard at app/admin/boxes/page.tsx with:
3// 1. Table showing all boxes with columns: Subscriber, Plan, Period, Status Badge, Items Count, Actions
4// 2. Filter by status using Select (curating, shipped, delivered)
5// 3. Click a row to open a Dialog for curation:
6//    - Show subscriber preferences (size, dietary, flavor) from subscribers.preferences jsonb
7//    - Table of available products with Add Button for each
8//    - Table of assigned items with quantity Input and Remove Button
9//    - Save Button to update box_items
10// 4. Ship Button that opens a Dialog with Input for tracking number, then updates box status to 'shipped'
11// 5. Summary Cards at top: boxes to curate, shipped this week, delivered this week
12// Use Server Actions for assigning products and updating shipment status.
13// Fetch from boxes joined with subscribers, box_items, and products.