How to Build Polls and surveys with V0

1// Paste this prompt into V0's AI chat:
2// Build a polls and surveys app. Create a Supabase schema with these tables:
3// 1. surveys: id (uuid PK), creator_id (uuid FK to auth.users), title (text), description (text), type (text check poll/survey), is_published (boolean default false), closes_at (timestamptz), created_at (timestamptz)
4// 2. questions: id (uuid PK), survey_id (uuid FK), question_text (text), question_type (text check single/multiple/text/rating), options (jsonb), position (integer), created_at (timestamptz)
5// 3. responses: id (uuid PK), survey_id (uuid FK), question_id (uuid FK), respondent_id (uuid), answer (jsonb), created_at (timestamptz) with unique constraint on (question_id, respondent_id)
6// Add RLS: anyone can INSERT responses on published surveys, only creator can SELECT all responses.
7// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a survey builder at app/surveys/[id]/page.tsx.
3// Requirements:
4// - Fetch the survey and its questions from Supabase
5// - Display each question in a shadcn/ui Card with the question text and type Badge
6// - "Add Question" Button opens a Dialog with: Input for question text, Select for question_type (single/multiple/text/rating), dynamic options editor for choice questions (add/remove option inputs)
7// - Questions are reorderable by position number
8// - "Publish" Button with Switch toggle sets is_published to true via Server Action
9// - Use Separator between questions
10// - Server Actions: createSurvey(), addQuestion(), publishSurvey()
11// - Server Components for data fetching, 'use client' for the interactive form elements

1'use client'
2
3import { useState, useEffect } from 'react'
4import { Button } from '@/components/ui/button'
5import { Card } from '@/components/ui/card'
6import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
7import { Checkbox } from '@/components/ui/checkbox'
8import { Textarea } from '@/components/ui/textarea'
9import { Label } from '@/components/ui/label'
10import { submitResponse } from '@/app/actions/surveys'
11
12interface Question {
13  id: string
14  question_text: string
15  question_type: 'single' | 'multiple' | 'text' | 'rating'
16  options: string[] | null
17}
18
19export function SurveyResponseForm({
20  surveyId,
21  questions,
22}: {
23  surveyId: string
24  questions: Question[]
25}) {
26  const [answers, setAnswers] = useState<Record<string, unknown>>({})
27  const [respondentId, setRespondentId] = useState<string>('')
28  const [submitted, setSubmitted] = useState(false)
29
30  useEffect(() => {
31    const stored = localStorage.getItem(`survey-${surveyId}-respondent`)
32    if (stored) {
33      setSubmitted(true)
34      return
35    }
36    const id = crypto.randomUUID()
37    setRespondentId(id)
38  }, [surveyId])
39
40  async function handleSubmit() {
41    for (const question of questions) {
42      await submitResponse({
43        survey_id: surveyId,
44        question_id: question.id,
45        respondent_id: respondentId,
46        answer: answers[question.id],
47      })
48    }
49    localStorage.setItem(`survey-${surveyId}-respondent`, respondentId)
50    setSubmitted(true)
51  }
52
53  if (submitted) return <p>Thank you for your response!</p>
54
55  return (
56    <div className="space-y-6">
57      {questions.map((q) => (
58        <Card key={q.id} className="p-6">
59          <Label className="text-lg font-medium">{q.question_text}</Label>
60          {q.question_type === 'single' && q.options && (
61            <RadioGroup onValueChange={(v) => setAnswers({ ...answers, [q.id]: v })}>
62              {q.options.map((opt) => (
63                <div key={opt} className="flex items-center space-x-2">
64                  <RadioGroupItem value={opt} id={`${q.id}-${opt}`} />
65                  <Label htmlFor={`${q.id}-${opt}`}>{opt}</Label>
66                </div>
67              ))}
68            </RadioGroup>
69          )}
70          {q.question_type === 'text' && (
71            <Textarea
72              onChange={(e) => setAnswers({ ...answers, [q.id]: e.target.value })}
73              placeholder="Type your answer..."
74            />
75          )}
76        </Card>
77      ))}
78      <Button onClick={handleSubmit} size="lg">Submit Response</Button>
79    </div>
80  )
81}

1import { createClient } from '@/lib/supabase/server'
2import { Card } from '@/components/ui/card'
3import { Progress } from '@/components/ui/progress'
4import { Badge } from '@/components/ui/badge'
5import { Separator } from '@/components/ui/separator'
6
7export default async function ResultsPage({
8  params,
9}: {
10  params: Promise<{ id: string }>
11}) {
12  const { id } = await params
13  const supabase = await createClient()
14
15  const { data: questions } = await supabase
16    .from('questions')
17    .select('id, question_text, question_type, options')
18    .eq('survey_id', id)
19    .order('position')
20
21  const { data: responses } = await supabase
22    .from('responses')
23    .select('question_id, answer')
24    .eq('survey_id', id)
25
26  return (
27    <div className="max-w-2xl mx-auto p-6 space-y-8">
28      {questions?.map((q) => {
29        const qResponses = responses?.filter((r) => r.question_id === q.id) ?? []
30        const total = qResponses.length
31
32        return (
33          <Card key={q.id} className="p-6">
34            <h3 className="text-lg font-semibold mb-1">{q.question_text}</h3>
35            <Badge variant="outline" className="mb-4">{total} responses</Badge>
36            {q.question_type === 'single' && q.options?.map((opt: string) => {
37              const count = qResponses.filter((r) => r.answer === opt).length
38              const pct = total > 0 ? Math.round((count / total) * 100) : 0
39              return (
40                <div key={opt} className="mb-3">
41                  <div className="flex justify-between text-sm mb-1">
42                    <span>{opt}</span>
43                    <span>{pct}% ({count})</span>
44                  </div>
45                  <Progress value={pct} />
46                </div>
47              )
48            })}
49            <Separator className="mt-4" />
50          </Card>
51        )
52      })}
53    </div>
54  )
55}