How to Build Reviews & ratings with V0

1// Paste this prompt into V0's AI chat:
2// Build a reviews and ratings system. Create a Supabase schema with:
3// 1. reviews: id (uuid PK), author_id (uuid FK), item_id (uuid FK), item_type (text check product/service/business), rating (integer check 1-5), title (text), body (text), is_verified_purchase (boolean default false), status (text check pending/approved/rejected/flagged), created_at (timestamptz), updated_at (timestamptz)
4// 2. review_images: id (uuid PK), review_id (uuid FK), image_url (text), position (integer)
5// 3. helpful_votes: id (uuid PK), review_id (uuid FK), user_id (uuid FK), created_at (timestamptz) with unique constraint on (review_id, user_id)
6// 4. review_stats: item_id (uuid PK), average_rating (numeric), total_reviews (integer), rating_distribution (jsonb), updated_at (timestamptz)
7// Create a database trigger on reviews INSERT/UPDATE that recalculates review_stats for the affected item_id.
8// RLS: anyone can SELECT approved reviews, authenticated users can INSERT, only author/admin can UPDATE.
9// Generate SQL migration and TypeScript types.

1'use client'
2
3import { useState } from 'react'
4import { Star } from 'lucide-react'
5import { cn } from '@/lib/utils'
6
7export function StarRating({
8  value,
9  onChange,
10  readonly = false,
11}: {
12  value: number
13  onChange?: (rating: number) => void
14  readonly?: boolean
15}) {
16  const [hover, setHover] = useState(0)
17
18  return (
19    <div className="flex gap-1">
20      {[1, 2, 3, 4, 5].map((star) => (
21        <Star
22          key={star}
23          className={cn(
24            'w-6 h-6 transition-colors',
25            (hover || value) >= star
26              ? 'fill-yellow-400 text-yellow-400'
27              : 'text-muted-foreground',
28            !readonly && 'cursor-pointer'
29          )}
30          onMouseEnter={() => !readonly && setHover(star)}
31          onMouseLeave={() => !readonly && setHover(0)}
32          onClick={() => onChange?.(star)}
33        />
34      ))}
35    </div>
36  )
37}

1// Paste this prompt into V0's AI chat:
2// Build a reviews section for app/items/[id]/reviews/page.tsx.
3// Requirements:
4// - Top section: aggregate stats from review_stats table
5//   - Large average rating number with StarRating (readonly), total review count
6//   - Rating distribution bars: 5 rows (5 stars to 1 star), each with a Progress bar and count
7// - Sort controls: DropdownMenu with options: Most Helpful, Newest, Highest Rated, Lowest Rated
8// - Review list: shadcn/ui Card for each review showing:
9//   - Avatar with author name, StarRating (readonly), date
10//   - Badge for "Verified Purchase" if is_verified_purchase
11//   - Review title (bold), body text
12//   - Review photos as small image thumbnails (if any)
13//   - "Helpful" Button with count — clicking calls Server Action markHelpful() with optimistic update
14// - "Write a Review" Button at top opens the review form Dialog
15// - Use Server Components for data fetching, 'use client' for star rating and helpful vote
16// - Server Actions: submitReview(), markHelpful()

1// Paste this prompt into V0's AI chat:
2// Build a review moderation page at app/reviews/page.tsx.
3// Requirements:
4// - Protected by admin auth
5// - Tabs: Pending, Approved, Rejected, Flagged
6// - Table of reviews showing: item name, author, rating (stars), title, body preview (50 chars), status Badge, date
7// - Each row has action Buttons:
8//   - Approve (green): sets status to 'approved', triggers stats recalculation
9//   - Reject (red): opens AlertDialog for rejection reason, sets status to 'rejected'
10//   - Flag (yellow): sets status to 'flagged' for further review
11// - Bulk action: Checkbox selection with bulk approve/reject Buttons
12// - Server Actions: moderateReview() that updates status and logs the action
13// - Server Components for data fetching
14// - Use shadcn/ui Table, Badge, Button, AlertDialog, Checkbox, Tabs