How to Build a Feedback Collection Tool with Lovable

1-- Run in Supabase SQL Editor
2create table public.feedback (
3  id uuid primary key default gen_random_uuid(),
4  type text not null check (type in ('bug', 'feature', 'improvement')),
5  title text not null,
6  description text,
7  status text not null default 'new' check (status in ('new', 'in-progress', 'done')),
8  votes integer not null default 0,
9  ip_hash text,
10  created_at timestamptz not null default now()
11);
12
13alter table public.feedback enable row level security;
14
15-- Anyone can insert
16create policy "anon_insert" on public.feedback
17  for insert to anon with check (true);
18
19-- Authenticated admins can read and update
20create policy "admin_select" on public.feedback
21  for select to authenticated using (true);
22
23create policy "admin_update" on public.feedback
24  for update to authenticated using (true);
25
26-- Rate limiting table
27create table public.feedback_rate_limit (
28  ip_hash text primary key,
29  count integer not null default 1,
30  window_start timestamptz not null default now()
31);

1// Lovable prompt — paste into chat
2// Create a feedback collection app with Supabase.
3// Tables: feedback (id, type, title, description, status, votes, ip_hash, created_at).
4// Pages:
5//   1. /feedback — public form: Select for type (bug/feature/improvement),
6//      Input for title, Textarea for description, Submit button.
7//      Use React Hook Form + Zod. On submit call supabase.from('feedback').insert().
8//   2. /admin — protected by Supabase Auth.
9//      Tabs: All | New | In Progress | Done.
10//      DataTable with columns: type (Badge), title, votes, status (Badge), created_at, Actions.
11//      Actions: DropdownMenu with status change options.
12// Use shadcn/ui throughout. Show Sonner toast on successful submit.

1// src/components/FeedbackForm.tsx
2import { useForm } from 'react-hook-form'
3import { zodResolver } from '@hookform/resolvers/zod'
4import { z } from 'zod'
5import { supabase } from '@/lib/supabase'
6import { Button } from '@/components/ui/button'
7import { Input } from '@/components/ui/input'
8import { Textarea } from '@/components/ui/textarea'
9import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
10import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
11import { toast } from 'sonner'
12
13const schema = z.object({
14  type: z.enum(['bug', 'feature', 'improvement']),
15  title: z.string().min(5, 'Title must be at least 5 characters').max(120),
16  description: z.string().max(600).optional()
17})
18
19type FormValues = z.infer<typeof schema>
20
21export function FeedbackForm() {
22  const form = useForm<FormValues>({ resolver: zodResolver(schema) })
23
24  async function onSubmit(values: FormValues) {
25    const lastSubmit = localStorage.getItem('fb_last')
26    if (lastSubmit && Date.now() - Number(lastSubmit) < 60_000) {
27      toast.error('Please wait 60 seconds before submitting again.')
28      return
29    }
30    const { error } = await supabase.from('feedback').insert(values)
31    if (error) { toast.error('Submission failed. Try again.'); return }
32    localStorage.setItem('fb_last', String(Date.now()))
33    toast.success('Thanks for your feedback!')
34    form.reset()
35  }
36
37  return (
38    <Form {...form}>
39      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 max-w-lg">
40        <FormField control={form.control} name="type" render={({ field }) => (
41          <FormItem>
42            <FormLabel>Type</FormLabel>
43            <Select onValueChange={field.onChange}>
44              <FormControl><SelectTrigger><SelectValue placeholder="Select type" /></SelectTrigger></FormControl>
45              <SelectContent>
46                <SelectItem value="bug">Bug</SelectItem>
47                <SelectItem value="feature">Feature Request</SelectItem>
48                <SelectItem value="improvement">Improvement</SelectItem>
49              </SelectContent>
50            </Select>
51            <FormMessage />
52          </FormItem>
53        )} />
54        <FormField control={form.control} name="title" render={({ field }) => (
55          <FormItem>
56            <FormLabel>Title</FormLabel>
57            <FormControl><Input placeholder="Short summary" {...field} /></FormControl>
58            <FormMessage />
59          </FormItem>
60        )} />
61        <Button type="submit" disabled={form.formState.isSubmitting}>Submit Feedback</Button>
62      </form>
63    </Form>
64  )
65}

1// src/pages/Admin.tsx (key section)
2import { useEffect, useState } from 'react'
3import { supabase } from '@/lib/supabase'
4import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
5import { Badge } from '@/components/ui/badge'
6import { DataTable } from '@/components/ui/data-table'
7import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
8import { Button } from '@/components/ui/button'
9import { MoreHorizontal } from 'lucide-react'
10import type { ColumnDef } from '@tanstack/react-table'
11
12type Feedback = { id: string; type: string; title: string; votes: number; status: string; created_at: string }
13
14const statusColors: Record<string, 'default' | 'secondary' | 'outline'> = {
15  new: 'default', 'in-progress': 'secondary', done: 'outline'
16}
17
18export function AdminPage() {
19  const [rows, setRows] = useState<Feedback[]>([])
20  const [tab, setTab] = useState('all')
21
22  useEffect(() => { supabase.from('feedback').select('*').order('created_at', { ascending: false }).then(({ data }) => setRows(data ?? [])) }, [])
23
24  const filtered = tab === 'all' ? rows : rows.filter(r => r.status === tab)
25
26  const columns: ColumnDef<Feedback>[] = [
27    { accessorKey: 'type', header: 'Type', cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge> },
28    { accessorKey: 'title', header: 'Title' },
29    { accessorKey: 'votes', header: 'Votes' },
30    { accessorKey: 'status', header: 'Status', cell: ({ row }) => <Badge variant={statusColors[row.original.status]}>{row.original.status}</Badge> },
31    { id: 'actions', cell: ({ row }) => (
32      <DropdownMenu>
33        <DropdownMenuTrigger asChild><Button variant="ghost" size="icon"><MoreHorizontal className="h-4 w-4" /></Button></DropdownMenuTrigger>
34        <DropdownMenuContent>
35          {['new','in-progress','done'].map(s => <DropdownMenuItem key={s} onClick={() => supabase.from('feedback').update({ status: s }).eq('id', row.original.id).then(() => setRows(prev => prev.map(r => r.id === row.original.id ? { ...r, status: s } : r)))}>{s}</DropdownMenuItem>)}
36        </DropdownMenuContent>
37      </DropdownMenu>
38    )}
39  ]
40
41  return (
42    <div className="p-6">
43      <Tabs value={tab} onValueChange={setTab}>
44        <TabsList><TabsTrigger value="all">All</TabsTrigger><TabsTrigger value="new">New</TabsTrigger><TabsTrigger value="in-progress">In Progress</TabsTrigger><TabsTrigger value="done">Done</TabsTrigger></TabsList>
45        <TabsContent value={tab}><DataTable columns={columns} data={filtered} /></TabsContent>
46      </Tabs>
47    </div>
48  )
49}

1// supabase/functions/notify-slack/index.ts
2import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
3
4serve(async (req: Request) => {
5  const payload = await req.json()
6  const record = payload.record
7  const webhookUrl = Deno.env.get('SLACK_WEBHOOK_URL')
8  if (!webhookUrl) return new Response('Missing webhook', { status: 500 })
9
10  const text = `:loudspeaker: *New ${record.type} feedback*\n*${record.title}*\nStatus: ${record.status}`
11  await fetch(webhookUrl, {
12    method: 'POST',
13    headers: { 'Content-Type': 'application/json' },
14    body: JSON.stringify({ text })
15  })
16  return new Response('ok', { status: 200 })
17})