How to Build URL shortener app with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a URL shortener:
3// 1. links table: id (uuid PK), short_code (text UNIQUE NOT NULL), original_url (text NOT NULL), owner_id (uuid FK nullable), title (text), clicks (int DEFAULT 0), created_at (timestamptz), expires_at (timestamptz nullable)
4// 2. clicks table: id (uuid PK), link_id (uuid FK), referrer (text), country (text), city (text), device (text), browser (text), ip_address (inet), clicked_at (timestamptz DEFAULT now())
5// Add index on links.short_code for fast lookups.
6// RLS: public can read links for redirect, authenticated users manage their own links.
7// Generate the SQL migration.

1'use server'
2
3import { createClient } from '@/lib/supabase/server'
4import { nanoid } from 'nanoid'
5import { revalidatePath } from 'next/cache'
6
7export async function shortenUrl(formData: FormData) {
8  const supabase = await createClient()
9  const originalUrl = formData.get('url') as string
10  const title = formData.get('title') as string
11
12  let shortCode = nanoid(7)
13  let attempts = 0
14
15  while (attempts < 5) {
16    const { error } = await supabase.from('links').insert({
17      short_code: shortCode,
18      original_url: originalUrl,
19      title: title || null,
20    })
21
22    if (!error) {
23      revalidatePath('/')
24      return { shortCode }
25    }
26
27    if (error.code === '23505') {
28      shortCode = nanoid(7)
29      attempts++
30    } else {
31      return { error: error.message }
32    }
33  }
34
35  return { error: 'Failed to generate unique code' }
36}

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function GET(
10  req: NextRequest,
11  { params }: { params: Promise<{ code: string }> }
12) {
13  const { code } = await params
14
15  const { data: link } = await supabase
16    .from('links')
17    .select('id, original_url, expires_at')
18    .eq('short_code', code)
19    .single()
20
21  if (!link) {
22    return NextResponse.redirect(new URL('/', req.url))
23  }
24
25  if (link.expires_at && new Date(link.expires_at) < new Date()) {
26    return NextResponse.redirect(new URL('/?expired=true', req.url))
27  }
28
29  // Log click asynchronously
30  const userAgent = req.headers.get('user-agent') ?? ''
31  const referrer = req.headers.get('referer') ?? ''
32  const ip = req.headers.get('x-forwarded-for')?.split(',')[0] ?? ''
33
34  supabase.from('clicks').insert({
35    link_id: link.id,
36    referrer,
37    device: /mobile/i.test(userAgent) ? 'mobile' : 'desktop',
38    browser: /chrome/i.test(userAgent) ? 'Chrome' : /firefox/i.test(userAgent) ? 'Firefox' : /safari/i.test(userAgent) ? 'Safari' : 'Other',
39    ip_address: ip,
40  }).then(() => {
41    supabase.rpc('increment_clicks', { p_link_id: link.id })
42  })
43
44  return NextResponse.redirect(link.original_url, { status: 302 })
45}

1// Paste this prompt into V0's AI chat:
2// Build a link analytics page at app/links/[id]/page.tsx with:
3// 1. Server Component that fetches the link and all its clicks from Supabase
4// 2. Summary Cards: total clicks, unique visitors (distinct IP), top referrer
5// 3. Recharts BarChart showing clicks per day for the last 30 days
6// 4. Recharts PieChart showing device breakdown (mobile vs desktop)
7// 5. Table showing recent clicks with columns: timestamp, referrer, device, browser, country
8// 6. Badge for active/expired status
9// 7. Copy button to copy the short URL
10// Use shadcn/ui Card for chart containers and Table for click log.

1// Paste this prompt into V0's AI chat:
2// Build a link management dashboard at app/dashboard/page.tsx with:
3// 1. Server Component fetching all links for the current user
4// 2. shadcn/ui Table with columns: Short URL (clickable), Original URL (truncated), Clicks, Created, Status Badge (active/expired)
5// 3. Each row has a copy button (copies short URL to clipboard) and a link to analytics
6// 4. "Shorten URL" Button at the top that opens a Dialog with Input for URL and optional title
7// 5. Delete Button with AlertDialog confirmation
8// 6. Summary Cards at top: total links, total clicks, clicks today
9// Use Badge variant 'default' for active links and 'destructive' for expired.