How to Build Feedback collection tool with V0

1// Paste this prompt into V0's AI chat:
2// Build a feedback collection tool. Create a Supabase schema with:
3// 1. projects: id (uuid PK), name (text), owner_id (uuid FK to auth.users), widget_key (text unique default gen_random_uuid()), domain (text), created_at (timestamptz)
4// 2. feedback_items: id (uuid PK), project_id (uuid FK to projects), title (text), description (text), category (text default 'feature' check in 'feature','bug','improvement','question'), status (text default 'new' check in 'new','under_review','planned','in_progress','completed','declined'), priority (int default 0), submitter_email (text), submitter_name (text), user_id (uuid FK to auth.users nullable), upvote_count (int default 0), created_at (timestamptz)
5// 3. upvotes: id (uuid PK), feedback_id (uuid FK to feedback_items), user_id (uuid FK to auth.users), created_at (timestamptz), unique(feedback_id, user_id)
6// 4. comments: id (uuid PK), feedback_id (uuid FK to feedback_items), user_id (uuid FK to auth.users), body (text), is_team_reply (boolean default false), created_at (timestamptz)
7// Add RLS: anyone can read feedback for published projects, authenticated users can upvote and submit.

1// Paste this prompt into V0's AI chat:
2// Build a public feedback board at app/board/[project_id]/page.tsx.
3// Requirements:
4// - Server Component that fetches feedback_items for this project, ordered by upvote_count DESC
5// - Each feedback item as a Card with: upvote Button (arrow up + count) on the left, title, description preview (2 lines), category Badge, status Badge with color coding
6// - Filter bar with Tabs for status views (All, Planned, In Progress, Completed)
7// - Select for category filter (feature/bug/improvement/question)
8// - Sort options: Most Upvoted, Newest, Recently Updated
9// - Upvote Button is a 'use client' component that calls a Server Action to toggle the upvote with optimistic UI
10// - The Server Action upserts into upvotes (insert if not exists, delete if exists) and updates upvote_count via RPC
11// - "Submit Feedback" Button at top that opens a Dialog with title Input, description Textarea, category Select, and submitter email Input
12// - Feedback submission goes through a Server Action with Zod validation (title 5-100 chars, description 10-500 chars)
13// - Use Separator between the filter bar and the feedback list

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3import { z } from 'zod'
4
5const supabase = createClient(
6  process.env.SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10const widgetSchema = z.object({
11  widget_key: z.string().uuid(),
12  title: z.string().min(5).max(100),
13  description: z.string().min(10).max(500),
14  category: z.enum(['feature', 'bug', 'improvement', 'question']),
15  submitter_email: z.string().email().optional(),
16  submitter_name: z.string().max(100).optional(),
17})
18
19export async function POST(req: NextRequest) {
20  const origin = req.headers.get('origin')
21  const body = await req.json()
22
23  const parsed = widgetSchema.safeParse(body)
24  if (!parsed.success) {
25    return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 })
26  }
27
28  const { data: project } = await supabase
29    .from('projects')
30    .select('id, domain')
31    .eq('widget_key', parsed.data.widget_key)
32    .single()
33
34  if (!project) {
35    return NextResponse.json({ error: 'Invalid widget key' }, { status: 403 })
36  }
37
38  if (project.domain && origin && !origin.includes(project.domain)) {
39    return NextResponse.json({ error: 'Origin not allowed' }, { status: 403 })
40  }
41
42  await supabase.from('feedback_items').insert({
43    project_id: project.id,
44    title: parsed.data.title,
45    description: parsed.data.description,
46    category: parsed.data.category,
47    submitter_email: parsed.data.submitter_email,
48    submitter_name: parsed.data.submitter_name,
49  })
50
51  return NextResponse.json({ success: true }, {
52    headers: {
53      'Access-Control-Allow-Origin': origin ?? '*',
54      'Access-Control-Allow-Methods': 'POST, OPTIONS',
55      'Access-Control-Allow-Headers': 'Content-Type',
56    },
57  })
58}
59
60export async function OPTIONS(req: NextRequest) {
61  return NextResponse.json({}, {
62    headers: {
63      'Access-Control-Allow-Origin': req.headers.get('origin') ?? '*',
64      'Access-Control-Allow-Methods': 'POST, OPTIONS',
65      'Access-Control-Allow-Headers': 'Content-Type',
66    },
67  })
68}

1// Paste this prompt into V0's AI chat:
2// Build an admin dashboard at app/page.tsx.
3// Requirements:
4// - Project selector at top if user has multiple projects
5// - Stats Cards: total feedback, open items, planned features, completed
6// - Feedback Table with columns: title, category Badge, status Badge, upvotes count, submitter, date
7// - Clicking a row opens a Sheet (slide from right) with full feedback detail:
8//   - Title, description, submitter info
9//   - Status change via Select dropdown (new, under_review, planned, in_progress, completed, declined)
10//   - Priority slider or Select (low, medium, high, critical)
11//   - Comment thread showing all comments with Avatar, name, body, and "Team" Badge for is_team_reply=true
12//   - Textarea + Button for adding a team reply (is_team_reply set to true)
13// - Quick status change via Popover on the status Badge in the table
14// - Filter by category using Tabs, sort by upvotes or date
15// - Use Card for stats and Separator between sections

1// Paste this prompt into V0's AI chat:
2// Build the embeddable feedback widget system.
3// 1. Create app/widget/[widget_key]/page.tsx — a minimal 'use client' page with:
4//    - A floating Button (bottom-right, fixed) labeled "Feedback" with a message icon
5//    - Clicking it expands to show a compact form: title Input, description Textarea, category Select, optional email Input
6//    - Submit POSTs to /api/widget with the widget_key
7//    - Show success message after submission
8//    - Styled with Tailwind in a compact card layout suitable for iframe embedding
9//    - Use minimal styles so it looks good as a small widget
10// 2. Create app/api/embed/route.ts that returns a JavaScript snippet:
11//    - The snippet creates an iframe pointing to your-domain.com/widget/{widget_key}
12//    - Positions it fixed bottom-right with z-index 9999
13//    - Starts collapsed (just a button), expands on click
14//    - Customers add this script tag to their HTML: <script src="your-domain.com/api/embed?key=WIDGET_KEY"></script>
15// Set NEXT_PUBLIC_APP_URL in Vars tab to the production domain for the iframe src.