How to Build File sharing app with V0

1// Paste this prompt into V0's AI chat:
2// Build a file sharing app. Create a Supabase schema with:
3// 1. files: id (uuid PK), owner_id (uuid FK to auth.users), filename (text), original_name (text), file_size (bigint), mime_type (text), storage_path (text), created_at (timestamptz)
4// 2. share_links: id (uuid PK), file_id (uuid FK to files), token (text unique default gen_random_uuid()), password_hash (text), expires_at (timestamptz), max_downloads (int), download_count (int default 0), is_active (boolean default true), created_at (timestamptz)
5// 3. download_logs: id (uuid PK), share_link_id (uuid FK to share_links), ip_address (text), user_agent (text), downloaded_at (timestamptz default now())
6// Create a Supabase Storage bucket 'files' with 50MB file size limit.
7// Add RLS: users see their own files, anyone with a valid share token can download.

1// Paste this prompt into V0's AI chat:
2// Build a file upload page at app/page.tsx with a 'use client' upload component.
3// Requirements:
4// - A large drag-and-drop zone that accepts any file type up to 50MB
5// - Support multiple file selection (both drag-drop and click-to-browse)
6// - Show each file being uploaded with: filename, file size, Progress bar, cancel Button
7// - Upload each file to Supabase Storage bucket 'files' with path: {user_id}/{uuid}-{filename}
8// - After upload, insert a record into the files table with storage_path, file_size, mime_type
9// - Below the upload zone, show "My Files" as a Table with columns: filename (with file type icon), size (formatted), uploaded date, actions (share Button, delete Button)
10// - The share Button opens a Dialog for creating a share link with:
11//   - DatePicker for expiry date (optional)
12//   - Switch for password protection with Input for password
13//   - Select for max downloads (unlimited, 1, 5, 10, 25)
14//   - "Create Link" Button that generates the share URL
15//   - Copy-to-clipboard Button for the generated link
16// - Use Card to wrap the upload zone and Badge for file type indicators

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3import { createHash } from 'crypto'
4
5const supabase = createClient(
6  process.env.SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10export async function GET(
11  req: NextRequest,
12  { params }: { params: Promise<{ token: string }> }
13) {
14  const { token } = await params
15  const password = req.nextUrl.searchParams.get('p')
16
17  const { data: link } = await supabase
18    .from('share_links')
19    .select('*, files(storage_path, original_name)')
20    .eq('token', token)
21    .eq('is_active', true)
22    .single()
23
24  if (!link) {
25    return NextResponse.json({ error: 'Link not found' }, { status: 404 })
26  }
27
28  if (link.expires_at && new Date(link.expires_at) < new Date()) {
29    return NextResponse.json({ error: 'Link expired' }, { status: 410 })
30  }
31
32  if (link.max_downloads && link.download_count >= link.max_downloads) {
33    return NextResponse.json({ error: 'Download limit reached' }, { status: 429 })
34  }
35
36  if (link.password_hash) {
37    const hash = createHash('sha256').update(password ?? '').digest('hex')
38    if (hash !== link.password_hash) {
39      return NextResponse.json({ error: 'Invalid password' }, { status: 401 })
40    }
41  }
42
43  const { data: signedUrl } = await supabase.storage
44    .from('files')
45    .createSignedUrl(link.files.storage_path, 30)
46
47  await supabase
48    .from('share_links')
49    .update({ download_count: link.download_count + 1 })
50    .eq('id', link.id)
51
52  await supabase.from('download_logs').insert({
53    share_link_id: link.id,
54    ip_address: req.headers.get('x-forwarded-for') ?? 'unknown',
55    user_agent: req.headers.get('user-agent') ?? 'unknown',
56  })
57
58  return NextResponse.redirect(signedUrl!.signedUrl)
59}

1// Paste this prompt into V0's AI chat:
2// Build a public download page at app/share/[token]/page.tsx.
3// Requirements:
4// - Server Component that fetches the share link with file info by token
5// - Show a centered Card with: file icon based on mime_type, file name, file size formatted, expiry date if set
6// - If the link is expired, show an error message: "This link has expired"
7// - If download limit reached, show: "Download limit reached"
8// - If password protected, show a 'use client' form with Input for password and "Download" Button
9// - If no password, show a "Download" Button directly
10// - The download Button links to /api/download/{token} (with password as query param if needed)
11// - Show download count: "Downloaded X times" or "X of Y downloads used"
12// - Add branding footer: "Shared via [Your App Name]"
13// - Use Badge for file type, Card for the main container
14// - Handle 404 if token doesn't exist with not-found.tsx

1// Paste this prompt into V0's AI chat:
2// Build a file detail page at app/files/[id]/page.tsx.
3// Requirements:
4// - Server Component that fetches the file with all share_links and their download_logs
5// - File info Card: filename, size, mime_type, uploaded date, storage path
6// - "Create Share Link" Button that opens a Dialog (same as upload page share dialog)
7// - Active share links Table with columns: link URL (truncated with copy Button), expiry date, downloads used/max, password (yes/no Badge), created date, Revoke Button
8// - Revoke sets is_active to false via Server Action
9// - Download history Table below: download date, IP address (masked: 192.168.x.x), user agent (browser name), which share link was used
10// - Stats Cards: total downloads across all links, active links count, last download date
11// - Delete file Button with AlertDialog confirmation that removes from Storage and database
12// - Use Tabs to switch between Share Links and Download History views