How to Build Membership site with V0

1// Paste this prompt into V0's AI chat:
2// Build a membership site. Create a Supabase schema:
3// 1. plans: id (uuid PK), name (text), stripe_price_id (text), tier (int), features (text[]), is_active (boolean DEFAULT true)
4// 2. memberships: id (uuid PK), user_id (uuid FK to auth.users), plan_id (uuid FK to plans), stripe_subscription_id (text), status (text DEFAULT 'active'), current_period_end (timestamptz)
5// 3. content: id (uuid PK), title (text), slug (text UNIQUE), body (text), excerpt (text), tier_required (int DEFAULT 0), category (text), published_at (timestamptz), author_id (uuid FK to auth.users)
6// 4. content_progress: user_id (uuid FK to auth.users), content_id (uuid FK to content), completed (boolean DEFAULT false), last_accessed (timestamptz), PRIMARY KEY (user_id, content_id)
7// Seed plans: Free (tier 0), Basic (tier 1), Premium (tier 2).
8// Add RLS policies. Generate SQL and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Create a membership landing page at app/page.tsx.
3// Requirements:
4// - Hero section: headline about premium content, subheading, CTA Button
5// - Pricing section with shadcn/ui Cards for each plan:
6//   - Plan name, price/month, tier Badge, features list with checkmarks
7//   - 'Subscribe' Button on paid plans → creates Stripe Checkout session
8//   - 'Get Started' on free plan → sign up with Supabase Auth
9//   - Highlight the recommended plan with a border and 'Popular' Badge
10// - FAQ section with Accordion: billing questions, cancellation, content access
11// - Separator between sections
12// - Server Action for creating Stripe Checkout subscription session

1// Paste this prompt into V0's AI chat:
2// Create content pages:
3// 1. app/content/page.tsx — content library with Card grid. Each Card shows: title, excerpt, category Badge, tier Badge. If user's membership tier < content tier_required, show a Lock icon overlay and 'Upgrade to Access' Badge.
4// 2. app/content/[slug]/page.tsx — Server Component that:
5//   a. Fetches the content by slug
6//   b. Checks the user's membership tier from the memberships table
7//   c. If tier >= tier_required, renders the full article body
8//   d. If tier < tier_required, renders the excerpt + a Paywall component:
9//      - Shows excerpt text fading out with gradient overlay
10//      - 'Unlock this content' Card with the required plan name and Subscribe Button
11//   e. Tracks content_progress (last_accessed timestamp) for authenticated users
12// - Add category filter Tabs and search Input on the library page

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4import { revalidatePath } from 'next/cache'
5
6const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
7const supabase = createClient(
8  process.env.SUPABASE_URL!,
9  process.env.SUPABASE_SERVICE_ROLE_KEY!
10)
11
12export async function POST(req: NextRequest) {
13  const rawBody = await req.text()
14  const sig = req.headers.get('stripe-signature')!
15
16  let event: Stripe.Event
17  try {
18    event = stripe.webhooks.constructEvent(rawBody, sig, process.env.STRIPE_WEBHOOK_SECRET!)
19  } catch {
20    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
21  }
22
23  const subscription = event.data.object as Stripe.Subscription
24  const userId = subscription.metadata?.user_id
25
26  if (!userId) return NextResponse.json({ received: true })
27
28  switch (event.type) {
29    case 'customer.subscription.created':
30    case 'customer.subscription.updated': {
31      const priceId = subscription.items.data[0]?.price.id
32      const { data: plan } = await supabase
33        .from('plans')
34        .select('id')
35        .eq('stripe_price_id', priceId)
36        .single()
37
38      await supabase.from('memberships').upsert({
39        user_id: userId,
40        plan_id: plan?.id,
41        stripe_subscription_id: subscription.id,
42        status: subscription.status === 'active' ? 'active' : 'inactive',
43        current_period_end: new Date(subscription.current_period_end * 1000).toISOString(),
44      })
45      break
46    }
47    case 'customer.subscription.deleted': {
48      await supabase.from('memberships')
49        .update({ status: 'cancelled' })
50        .eq('stripe_subscription_id', subscription.id)
51      break
52    }
53  }
54
55  revalidatePath('/content')
56  return NextResponse.json({ received: true })
57}

1// Paste this prompt into V0's AI chat:
2// Create an account page at app/account/page.tsx.
3// Requirements:
4// - Fetch the current user's membership with plan details
5// - Show a Card with: plan name, tier Badge, status Badge (active=green, cancelled=red), current_period_end date
6// - 'Manage Subscription' Button that creates a Stripe billing portal session and redirects
7// - Content progress section: Table showing accessed content with completed checkmarks and last_accessed dates
8// - If no membership, show a CTA Card: 'Join a plan to access premium content' with link to pricing
9// - Server Action for creating the Stripe billing portal session
10
11// The Server Action:
12'use server'
13import Stripe from 'stripe'
14import { redirect } from 'next/navigation'
15
16const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
17
18export async function createPortalSession(customerId: string) {
19  const session = await stripe.billingPortal.sessions.create({
20    customer: customerId,
21    return_url: `${process.env.NEXT_PUBLIC_APP_URL}/account`,
22  })
23  redirect(session.url)
24}