How to Build Image hosting with V0

1// Paste this prompt into V0's AI chat:
2// Build an image hosting app. Create a Supabase schema with:
3// 1. images: id (uuid PK), user_id (uuid FK to auth.users nullable), filename (text), original_name (text), file_size (bigint), width (int), height (int), mime_type (text), storage_path (text), thumbnail_path (text), is_public (boolean default true), view_count (int default 0), short_code (text unique), created_at (timestamptz)
4// 2. albums: id (uuid PK), user_id (uuid FK to auth.users), title (text), description (text), slug (text unique), is_public (boolean default true), created_at (timestamptz)
5// 3. album_images: image_id (uuid FK to images), album_id (uuid FK to albums), position (int), PK(image_id, album_id)
6// Create a PostgreSQL function generate_short_code() that creates a random 8-char alphanumeric string using encode(gen_random_bytes(6), 'base64') with retry on unique conflict
7// Create a Supabase Storage bucket 'images' with 10MB file limit
8// Add RLS: public images readable by all, authenticated users can upload and manage their own images

1// Paste this prompt into V0's AI chat:
2// Build an upload page at app/upload/page.tsx as a 'use client' component.
3// Requirements:
4// - Drag-and-drop zone that accepts multiple image files (PNG, JPG, GIF, WebP)
5// - Click to browse fallback using Input type='file' with accept='image/*' multiple
6// - Show file previews as thumbnails before upload
7// - Switch toggle for public/private per image
8// - Upload Progress bar per file showing percentage
9// - On upload, call POST /api/upload with FormData containing:
10//   the file, is_public flag
11// - The API route (app/api/upload/route.ts) should:
12//   Generate a short_code using the generate_short_code() PostgreSQL function
13//   Upload the original to Supabase Storage at images/{user_id}/{filename}
14//   Read image dimensions (use the file metadata or sharp if available)
15//   Insert row into images table with all metadata
16//   Return the short_code for the shareable link
17// - After upload, show the shareable link /i/{short_code} with copy Button
18// - Use Card to wrap the upload zone and Progress for upload status

1// Paste this prompt into V0's AI chat:
2// Build two pages:
3// 1. app/page.tsx — public gallery:
4//    - Masonry grid layout using CSS columns (3 cols desktop, 2 tablet, 1 mobile)
5//    - Card for each image thumbnail (300px width via Supabase Image Transformations URL)
6//    - Hover overlay showing image dimensions and file size
7//    - Select for sort order: recent (default), most viewed
8//    - "Upload" Button as CTA
9//    - Infinite scroll or pagination with 24 images per page
10//
11// 2. app/i/[short_code]/page.tsx — image viewer:
12//    - Full-size image display
13//    - Metadata Card: original name, dimensions, file size Badge, upload date, view count
14//    - Share buttons: copy direct link, copy embed code (<img> tag), copy markdown
15//    - Dialog for image details with download Button
16//    - On-the-fly resize: links for common sizes (640px, 1024px, 1920px) using ?w= query param
17//    - Increment view_count via Server Action on page load
18//    - If image is private and viewer is not the owner, show 404

1// Paste this prompt into V0's AI chat:
2// Build image resize API and albums:
3// 1. app/api/images/[short_code]/route.ts:
4//    - GET handler that reads ?w (width) and ?q (quality, default 75) query params
5//    - Looks up image by short_code
6//    - Returns a redirect to the Supabase Storage transform URL:
7//      {SUPABASE_URL}/storage/v1/render/image/public/images/{path}?width={w}&quality={q}
8//    - If no params, redirect to the original file URL
9//    - Cache headers: public, max-age=31536000 for resized images
10//
11// 2. app/album/[slug]/page.tsx — album view:
12//    - Album title, description, image count Badge
13//    - Image grid similar to gallery but filtered to album images ordered by position
14//    - Share Button for the album URL
15//
16// 3. app/dashboard/page.tsx — user dashboard:
17//    - Tabs: My Images (grid with delete Button per image), My Albums (list with edit/delete)
18//    - Storage usage Card showing total bytes used
19//    - "Create Album" Button opening Dialog with title Input, description Textarea, slug Input
20//    - Drag images into albums from the image grid
21//    - Server Actions for album CRUD and image-to-album assignment

1// Paste this prompt into V0's AI chat:
2// Add short code generation and sharing:
3// 1. Create a PostgreSQL function generate_short_code() that:
4//    Generates encode(gen_random_bytes(6), 'base64') → replace '+' with 'a', '/' with 'b', remove '='
5//    Truncate to 8 characters
6//    Check uniqueness against images.short_code
7//    Retry up to 5 times if collision, raise exception if all fail
8//    Returns the unique short_code
9//
10// 2. Update app/i/[short_code]/page.tsx to add:
11//    - Open Graph meta tags: og:image pointing to the image URL, og:title = original_name
12//    - Twitter card meta tags for image preview
13//    - Embed code generator: Dialog showing copyable HTML, Markdown, and BBCode snippets
14//    - Social share buttons for Twitter, Reddit, and direct link copy
15//    - "Report" Button (stores report in a reports table)
16//
17// 3. Add generateMetadata function for SEO with dynamic og:image