Membangun fitur

Panduan ini menelusuri fitur Feedback yang sudah ada di boilerplate. Gunakan sebagai checklist setiap kali Anda menambah slice vertikal baru.

Yang Anda dapatkan

• Tamu bisa mengirim masukan dari situs marketing (email wajib)
• Pengguna yang masuk bisa mengirim dari dashboard SaaS (email dari sesi)
• Data disimpan di Postgres lewat Prisma
• Validasi dibagikan lewat @repo/validations
• HTTP lewat Hono di @repo/api (tanpa Server Actions)
• UI memanggil API dengan klien Hono bertipe + TanStack Query

1. Schema

Tambahkan model di packages/database/prisma/schema.prisma, lalu migrate dan generate:

pnpm --filter @repo/database db:migrate
pnpm --filter @repo/database db:generate

2. Validasi bersama

Buat packages/validations/src/feedback/feedback.ts dan ekspor dari packages/validations/package.json.

3. Modul API

• Service: packages/api/src/modules/feedback/service.ts
• Router: POST / dengan rateLimit("WRITE") + zValidator — sesi opsional (jangan requireAuth)
• Mount: .route("/feedback", feedbackRouter) di packages/api/src/index.ts
• CORS ke origin marketing + OPTIONS di route catch-all marketing

4. Mutasi frontend

• Marketing: apps/marketing/src/mutations/use-create-feedback.ts → api.feedback.$post
• Marketing client: apps/marketing/src/lib/api.ts memakai NEXT_PUBLIC_MARKETING_URL + QueryClientProvider

5. Widget UI

• Marketing: <FeedbackWidget /> di LandingLayout (schema tamu wajib email)
• String i18n di namespace feedback (EN + ID)

Checklist

• Model Prisma + migrasi
• Schema Zod di @repo/validations
• Service + router Hono + mount
• CORS / OPTIONS bila marketing memanggil SaaS
• Mutasi TanStack Query + api.* bertipe
• Widget di layout yang tepat
• Copy EN + ID
• Path OpenAPI (opsional)
• pnpm check / pnpm lint lulus

Terkait

• API — konvensi Hono + Query
• Setup — env lokal dan port