How to Build a Polls and Surveys with Lovable

1-- Run in Supabase SQL Editor
2create table public.surveys (
3  id uuid primary key default gen_random_uuid(),
4  title text not null,
5  description text,
6  is_active boolean not null default true,
7  created_at timestamptz not null default now()
8);
9
10create table public.questions (
11  id uuid primary key default gen_random_uuid(),
12  survey_id uuid not null references public.surveys(id) on delete cascade,
13  question_text text not null,
14  question_type text not null check (question_type in ('multiple_choice','text','rating','boolean')),
15  options jsonb,
16  position integer not null default 0,
17  required boolean not null default true
18);
19
20create table public.responses (
21  id uuid primary key default gen_random_uuid(),
22  survey_id uuid not null references public.surveys(id) on delete cascade,
23  answers jsonb not null,
24  submitted_at timestamptz not null default now()
25);
26
27alter table public.surveys enable row level security;
28alter table public.questions enable row level security;
29alter table public.responses enable row level security;
30
31-- Public can read active surveys and their questions
32create policy "public_read_surveys" on public.surveys
33  for select to anon using (is_active = true);
34create policy "public_read_questions" on public.questions
35  for select to anon using (true);
36
37-- Public can insert responses
38create policy "anon_insert_responses" on public.responses
39  for insert to anon with check (true);
40
41-- Authenticated admins can do everything
42create policy "admin_all_surveys" on public.surveys for all to authenticated using (true) with check (true);
43create policy "admin_all_questions" on public.questions for all to authenticated using (true) with check (true);
44create policy "admin_read_responses" on public.responses for select to authenticated using (true);

1// Lovable prompt — paste into chat
2// Build a survey platform with Supabase.
3// Tables: surveys, questions (question_type, options JSONB, position), responses (answers JSONB).
4// Pages:
5//   /surveys — admin list with Card per survey, response count, Create Survey button.
6//   /surveys/[id]/edit — survey editor: title/description Form at top, then a list of questions.
7//     Each question shows type Badge, text, and Edit/Delete actions.
8//     Add Question button opens a Dialog with: Input for question text, Select for type
9//     (multiple_choice/text/rating/boolean), dynamic options list for multiple_choice.
10//   /survey/[id] — PUBLIC page (no auth): shows survey title, one question at a time,
11//     RadioGroup for multiple_choice, Input for text, 1-5 Button row for rating, Switch for boolean.
12//     Progress bar shows current question / total.
13//     Submit button on last question inserts to responses table as anon.
14//   /surveys/[id]/results — Bar chart for multiple_choice/rating, text list for text questions.
15// shadcn/ui throughout. Zod validation on the builder form.

1// src/components/QuestionDialog.tsx
2import { useState } from 'react'
3import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
4import { Button } from '@/components/ui/button'
5import { Input } from '@/components/ui/input'
6import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
7import { Label } from '@/components/ui/label'
8import { supabase } from '@/lib/supabase'
9import { toast } from 'sonner'
10
11type Props = { surveyId: string; open: boolean; onClose: () => void; onSaved: () => void }
12
13export function QuestionDialog({ surveyId, open, onClose, onSaved }: Props) {
14  const [text, setText] = useState('')
15  const [type, setType] = useState<string>('multiple_choice')
16  const [options, setOptions] = useState<string[]>([''])
17
18  async function save() {
19    if (!text.trim()) { toast.error('Question text is required'); return }
20    const payload = {
21      survey_id: surveyId,
22      question_text: text,
23      question_type: type,
24      options: type === 'multiple_choice' ? options.filter(Boolean) : null
25    }
26    const { error } = await supabase.from('questions').insert(payload)
27    if (error) { toast.error('Failed to save question'); return }
28    toast.success('Question added')
29    setText(''); setType('multiple_choice'); setOptions([''])
30    onSaved(); onClose()
31  }
32
33  return (
34    <Dialog open={open} onOpenChange={onClose}>
35      <DialogContent className="max-w-md">
36        <DialogHeader><DialogTitle>Add Question</DialogTitle></DialogHeader>
37        <div className="space-y-4">
38          <div><Label>Question</Label><Input value={text} onChange={e => setText(e.target.value)} placeholder="What is your question?" /></div>
39          <div>
40            <Label>Type</Label>
41            <Select value={type} onValueChange={setType}>
42              <SelectTrigger><SelectValue /></SelectTrigger>
43              <SelectContent>
44                <SelectItem value="multiple_choice">Multiple Choice</SelectItem>
45                <SelectItem value="text">Text Answer</SelectItem>
46                <SelectItem value="rating">Rating (1-5)</SelectItem>
47                <SelectItem value="boolean">Yes / No</SelectItem>
48              </SelectContent>
49            </Select>
50          </div>
51          {type === 'multiple_choice' && (
52            <div className="space-y-2">
53              <Label>Options</Label>
54              {options.map((opt, i) => (
55                <Input key={i} value={opt} onChange={e => setOptions(prev => prev.map((o, j) => j === i ? e.target.value : o))} placeholder={`Option ${i + 1}`} />
56              ))}
57              <Button variant="outline" size="sm" onClick={() => setOptions(prev => [...prev, ''])}>Add option</Button>
58            </div>
59          )}
60        </div>
61        <DialogFooter>
62          <Button variant="ghost" onClick={onClose}>Cancel</Button>
63          <Button onClick={save}>Save Question</Button>
64        </DialogFooter>
65      </DialogContent>
66    </Dialog>
67  )
68}

1// src/pages/SurveyResponse.tsx (key logic)
2import { useEffect, useState } from 'react'
3import { useParams } from 'react-router-dom'
4import { supabase } from '@/lib/supabase'
5import { Button } from '@/components/ui/button'
6import { Input } from '@/components/ui/input'
7import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
8import { Label } from '@/components/ui/label'
9import { Progress } from '@/components/ui/progress'
10import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
11import { toast } from 'sonner'
12
13export function SurveyResponse() {
14  const { id } = useParams<{ id: string }>()
15  const [questions, setQuestions] = useState<any[]>([])
16  const [current, setCurrent] = useState(0)
17  const [answers, setAnswers] = useState<Record<string, string>>({})
18  const [submitted, setSubmitted] = useState(false)
19
20  useEffect(() => {
21    supabase.from('questions').select('*').eq('survey_id', id).order('position')
22      .then(({ data }) => setQuestions(data ?? []))
23  }, [id])
24
25  const q = questions[current]
26  const progress = questions.length ? ((current) / questions.length) * 100 : 0
27
28  async function submit() {
29    const { error } = await supabase.from('responses').insert({ survey_id: id, answers })
30    if (error) { toast.error('Submission failed'); return }
31    setSubmitted(true)
32  }
33
34  if (submitted) return <div className="text-center mt-20"><h2 className="text-2xl font-bold">Thank you!</h2><p className="text-muted-foreground mt-2">Your response has been recorded.</p></div>
35  if (!q) return null
36
37  return (
38    <div className="max-w-lg mx-auto mt-10 space-y-6">
39      <Progress value={progress} />
40      <Card>
41        <CardHeader><CardTitle>{q.question_text}</CardTitle></CardHeader>
42        <CardContent>
43          {q.question_type === 'multiple_choice' && (
44            <RadioGroup value={answers[q.id] ?? ''} onValueChange={v => setAnswers(p => ({ ...p, [q.id]: v }))}>
45              {(q.options as string[]).map((opt: string) => (
46                <div key={opt} className="flex items-center gap-2">
47                  <RadioGroupItem value={opt} id={opt} /><Label htmlFor={opt}>{opt}</Label>
48                </div>
49              ))}
50            </RadioGroup>
51          )}
52          {q.question_type === 'text' && (
53            <Input value={answers[q.id] ?? ''} onChange={e => setAnswers(p => ({ ...p, [q.id]: e.target.value }))} placeholder="Your answer" />
54          )}
55          {q.question_type === 'rating' && (
56            <div className="flex gap-2">
57              {[1,2,3,4,5].map(n => (
58                <Button key={n} variant={answers[q.id] === String(n) ? 'default' : 'outline'} size="sm" onClick={() => setAnswers(p => ({ ...p, [q.id]: String(n) }))}>{n}</Button>
59              ))}
60            </div>
61          )}
62          {q.question_type === 'boolean' && (
63            <div className="flex gap-4">
64              {['Yes','No'].map(v => (
65                <Button key={v} variant={answers[q.id] === v ? 'default' : 'outline'} onClick={() => setAnswers(p => ({ ...p, [q.id]: v }))}>{v}</Button>
66              ))}
67            </div>
68          )}
69        </CardContent>
70      </Card>
71      <div className="flex justify-between">
72        <Button variant="ghost" onClick={() => setCurrent(p => Math.max(0, p - 1))} disabled={current === 0}>Back</Button>
73        {current < questions.length - 1
74          ? <Button onClick={() => setCurrent(p => p + 1)} disabled={!answers[q.id]}>Next</Button>
75          : <Button onClick={submit} disabled={!answers[q.id]}>Submit</Button>}
76      </div>
77    </div>
78  )
79}

1// src/pages/SurveyResults.tsx (key section)
2import { useEffect, useState } from 'react'
3import { useParams } from 'react-router-dom'
4import { supabase } from '@/lib/supabase'
5import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
6import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
7
8export function SurveyResults() {
9  const { id } = useParams<{ id: string }>()
10  const [questions, setQuestions] = useState<any[]>([])
11  const [responses, setResponses] = useState<any[]>([])
12
13  useEffect(() => {
14    Promise.all([
15      supabase.from('questions').select('*').eq('survey_id', id).order('position'),
16      supabase.from('responses').select('answers').eq('survey_id', id)
17    ]).then(([q, r]) => {
18      setQuestions(q.data ?? [])
19      setResponses(r.data ?? [])
20    })
21  }, [id])
22
23  function aggregate(qId: string, type: string, options?: string[]) {
24    const vals = responses.map(r => r.answers[qId]).filter(Boolean)
25    if (type === 'text') return vals
26    const counts: Record<string, number> = {}
27    vals.forEach(v => { counts[v] = (counts[v] ?? 0) + 1 })
28    return Object.entries(counts).map(([name, value]) => ({ name, value }))
29  }
30
31  return (
32    <div className="p-6 space-y-6">
33      <h1 className="text-2xl font-bold">Results ({responses.length} responses)</h1>
34      {questions.map(q => {
35        const data = aggregate(q.id, q.question_type, q.options)
36        return (
37          <Card key={q.id}>
38            <CardHeader><CardTitle>{q.question_text}</CardTitle></CardHeader>
39            <CardContent>
40              {q.question_type === 'text'
41                ? <ul className="space-y-1">{(data as string[]).map((t, i) => <li key={i} className="text-sm border rounded p-2">{t}</li>)}</ul>
42                : <ResponsiveContainer width="100%" height={200}>
43                    <BarChart data={data as any[]}>
44                      <XAxis dataKey="name" /><YAxis /><Tooltip />
45                      <Bar dataKey="value" className="fill-primary" />
46                    </BarChart>
47                  </ResponsiveContainer>
48              }
49            </CardContent>
50          </Card>
51        )
52      })}
53    </div>
54  )
55}