User feedback

This boilerplate includes a complete user feedback system with forms for bug reports, feature requests, and support messages, all stored in your database.

Overview

The feedback system provides:

• Bug report form - Users can report bugs with details and context.
• Feature request form - Collect user suggestions for new features.
• Support form - General contact/support messages.
• Database storage - All feedback saved in PostgreSQL.
• User tracking - Know which user submitted each item.
• Easy access - Forms available in header and footer.

Database schema

Feedback is stored in dedicated tables:

Bug reports

model BugReport {
  id        String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
  type      String   // Type of bug
  details   String   // Detailed description
  userId    String   // Who reported it
  url       String   // Page URL where bug occurred
  createdAt DateTime @default(now())

  @@map("bug_report")
}

Feature requests

model FeatureRequest {
  id        String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
  type      String   // Type of feature
  details   String   // Detailed description
  userId    String   // Who requested it
  url       String   // Page URL where requested
  createdAt DateTime @default(now())

  @@map("feature_request")
}

Components included

The template includes three ready-to-use feedback components:

Bug reports

app/components/feedback/ReportBugForm.vue - Dialog-based bug report form

Features:

• Bug type selection (UI, functionality, performance, security, other)
• Detailed description field with validation
• Automatically captures page URL where bug occurred
• Saves to database via /api/bug-report/create

Feature requests

app/components/feedback/RequestFeatureForm.vue - Dialog-based feature request form

Features:

• Feature type selection (new feature, improvement, integration, other)
• Detailed description field
• Stores in FeatureRequest table
• API endpoint: /api/feature-request/create

Support messages

app/components/support/SupportForm.vue - General support contact form

Features:

• Subject and message fields
• Sends email to your support address
• API endpoint: /api/email/send-support

Using the components

All feedback components use v-model for dialog state:

<script setup>
const showBugReport = ref(false)
const showFeatureRequest = ref(false)
</script>

<template>
  <Button @click="showBugReport = true">Report a bug</Button>
  <Button @click="showFeatureRequest = true">Request feature</Button>

  <ReportBugForm v-model="showBugReport" />
  <RequestFeatureForm v-model="showFeatureRequest" />
</template>

API architecture

The feedback system follows a clean architecture pattern:

API routes (validation & authentication):

• /api/bug-report/create - Creates bug report
• /api/feature-request/create - Creates feature request
• /api/email/send-support - Sends support email

Server services (database operations):

• server/services/bug-reports-server-service.ts
• server/services/feature-requests-server-service.ts

Client services (called from components):

• app/services/bug-reports-client-service.ts
• app/services/feature-requests-client-service.ts

All endpoints require authentication using requireAuth() and validate input with Zod schemas.

Viewing feedback

To view submitted feedback, create admin API endpoints that query the database:

import prisma from '@@/lib/prisma'

export default defineEventHandler(async event => {
  // Add admin auth check here
  const userId = await requireAuth(event)
  
  return await prisma.bugReport.findMany({
    orderBy: { createdAt: 'desc' },
  })
})

Then create an admin page that fetches and displays the data using the shadcn-vue Tabs component for organizing bugs vs features.

Customizing

Add new fields to schema

To add fields like severity or priority, update the Prisma schema and Zod validation:

model BugReport {
  // ... existing fields
  severity  String?  // Add new field
  priority  String?
}

Then update the Zod schema in the API endpoint:

const CreateBugReportSchema = z.object({
  type: z.string(),
  details: z.string(),
  url: z.url(),
  severity: z.enum(['low', 'medium', 'high']).optional(),
})

Add screenshot uploads

The template includes S3 storage integration. To add file uploads, see the storage documentation.

Email notifications

To get notified of new feedback, add email sending in the API endpoint:

// After creating the bug report
await sendEmail({
  to: process.env.ADMIN_EMAIL,
  subject: 'New Bug Report',
  html: `<p>${validatedData.details}</p>`,
})

Webhook notifications (Slack/Discord)

Add webhook calls after creating records:

await fetch(process.env.SLACK_WEBHOOK_URL, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    text: `New bug report: ${validatedData.type}`,
  }),
})

Additional considerations

Rate limiting: Consider adding rate limits to prevent spam submissions. See the AI integration docs for rate limiting patterns.

Admin access: Add role-based access control to admin endpoints. The template includes authentication - extend it with role checks for viewing feedback.

Export feedback: Create endpoints to export feedback as CSV/JSON for external analysis tools.