How to Build Form builder backend with V0

1// Paste this prompt into V0's AI chat:
2// Build a form builder. Create a Supabase schema with:
3// 1. forms: id (uuid PK), owner_id (uuid FK to auth.users), title (text), description (text), fields (jsonb), settings (jsonb default '{"is_published": false, "requires_auth": false, "redirect_url": null, "submit_message": "Thank you!"}'), slug (text unique), submission_count (int default 0), created_at (timestamptz), updated_at (timestamptz)
4// The fields jsonb stores: [{id, type, label, placeholder, required, options[], validation}]
5// type is one of: text, textarea, email, number, select, multi_select, checkbox, radio, date, file, rating, scale
6// 2. submissions: id (uuid PK), form_id (uuid FK to forms), data (jsonb), submitter_id (uuid FK to auth.users nullable), ip_address (text), created_at (timestamptz)
7// 3. form_analytics: id (uuid PK), form_id (uuid FK to forms), date (date), views (int default 0), starts (int default 0), completions (int default 0), unique(form_id, date))
8// Add RLS: owners manage their forms, anyone can submit to published forms.

1// Paste this prompt into V0's AI chat:
2// Build a form builder page at app/builder/[id]/page.tsx as a 'use client' component.
3// Requirements:
4// - Left sidebar: field type palette with draggable Card items for each of the 12 types
5// - Center: sortable field list using dnd-kit. Each field shows: label, type Badge, required indicator
6// - Right sidebar: field settings editor when a field is selected:
7//   - Input for label, Input for placeholder
8//   - Switch for required toggle
9//   - For select/radio/multi_select: Input list for options (add/remove)
10//   - For number/scale: min and max Input
11//   - For text/textarea: max length Input
12// - Top bar: form title Input, "Preview" and "Settings" Tabs, Publish Switch
13// - Tabs to switch between Builder (editor) and Preview (rendered form)
14// - Settings tab: submit message Textarea, redirect URL Input, requires auth Switch
15// - Auto-save: debounced Server Action that saves field definitions to the forms.fields jsonb
16// - Use Card for the field palette items, Dialog for field settings on mobile

1// Paste this prompt into V0's AI chat:
2// Build the public form renderer at app/forms/[slug]/page.tsx.
3// Requirements:
4// - Server Component that fetches the form by slug
5// - Use generateMetadata to set page title from form.title for SEO
6// - If form is not published, show "This form is not available" message
7// - Render a 'use client' FormRenderer component that maps each field in the fields jsonb to the corresponding shadcn/ui component:
8//   - text → Input
9//   - textarea → Textarea
10//   - email → Input type="email"
11//   - number → Input type="number"
12//   - select → Select with SelectItem for each option
13//   - multi_select → Checkbox group for each option
14//   - checkbox → Checkbox with label
15//   - radio → RadioGroup with RadioGroupItem for each option
16//   - date → Calendar/DatePicker
17//   - file → Input type="file"
18//   - rating → custom 5-star rating using Button components
19//   - scale → Slider or numbered Button row
20// - Required fields show a red asterisk next to the label
21// - Submit Button POSTs to /api/submit/[slug] and shows the success message from settings
22// - Use Card to wrap the form with title and description at top

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
10type FieldDef = {
11  id: string; type: string; label: string;
12  required?: boolean; options?: string[];
13  validation?: { min?: number; max?: number; maxLength?: number };
14}
15
16function buildZodSchema(fields: FieldDef[]) {
17  const shape: Record<string, z.ZodTypeAny> = {}
18
19  for (const field of fields) {
20    let validator: z.ZodTypeAny
21
22    switch (field.type) {
23      case 'email': validator = z.string().email(); break
24      case 'number': case 'scale': case 'rating':
25        validator = z.number()
26        if (field.validation?.min) validator = (validator as z.ZodNumber).min(field.validation.min)
27        if (field.validation?.max) validator = (validator as z.ZodNumber).max(field.validation.max)
28        break
29      case 'checkbox': validator = z.boolean(); break
30      case 'multi_select': validator = z.array(z.string()); break
31      case 'date': validator = z.string(); break
32      default: validator = z.string()
33        if (field.validation?.maxLength) validator = (validator as z.ZodString).max(field.validation.maxLength)
34    }
35
36    shape[field.id] = field.required ? validator : validator.optional()
37  }
38
39  return z.object(shape)
40}
41
42export async function POST(
43  req: NextRequest,
44  { params }: { params: Promise<{ slug: string }> }
45) {
46  const { slug } = await params
47  const body = await req.json()
48
49  const { data: form } = await supabase
50    .from('forms')
51    .select('id, fields, settings')
52    .eq('slug', slug)
53    .single()
54
55  if (!form || !form.settings.is_published) {
56    return NextResponse.json({ error: 'Form not found' }, { status: 404 })
57  }
58
59  const schema = buildZodSchema(form.fields)
60  const result = schema.safeParse(body)
61
62  if (!result.success) {
63    return NextResponse.json({ error: result.error.flatten() }, { status: 400 })
64  }
65
66  await supabase.from('submissions').insert({
67    form_id: form.id,
68    data: result.data,
69    ip_address: req.headers.get('x-forwarded-for') ?? 'unknown',
70  })
71
72  await supabase.rpc('increment_submission_count', { form_id: form.id })
73
74  return NextResponse.json({ message: form.settings.submit_message })
75}

1// Paste this prompt into V0's AI chat:
2// Build a results page at app/forms/[id]/results/page.tsx.
3// Requirements:
4// - Server Component fetching form with all submissions
5// - Summary Cards: total submissions, submissions today, completion rate (if analytics tracked)
6// - Table showing all submissions with columns dynamically generated from field labels
7// - Each cell shows the response value formatted by type (dates formatted, arrays joined, etc.)
8// - Click a row to see full submission detail in a Sheet
9// - Analytics section: for select/radio/checkbox fields, show a Recharts BarChart of response distribution
10// - For rating/scale fields, show average value and distribution histogram
11// - For text fields, show a word cloud or most common responses
12// - Tabs to switch between Table view and Analytics view
13// - Export Button to download all submissions as CSV
14// - Use Badge for field type indicators in table headers