Form Builder

Overview

A drag-and-drop form builder where a new form is configured rather than hand-coded: one field registry drives the designer, the preview, the public page, and the submissions report.

Challenge

Building a new internal or marketing form normally means hand-writing the field UI, the validation, and the storage for each form separately. Forms must also be shareable by link, usable without a developer, and must keep submissions attributable to a specific form.

Responsibilities

• Built the drag-and-drop form designer and its field registry.
• Implemented form publishing, share links, and submission validation.
• Built the submissions table and per-form statistics.
• Added authenticated dashboard routing and content autosave.

Solution

Build the field UI once and let it serve form design, publishing, submission capture, and reporting, so a new form is configured rather than coded.

Architecture

Next.js 14 App Router (TypeScript) with Clerk authentication, Server Actions validated with zod, Prisma over PostgreSQL for forms and submissions, and a single JSON column storing each form's field definitions.

Technical decisions and trade-offs

• Used @dnd-kit/core for drag-and-drop instead of raw HTML5 drag events, to get keyboard and pointer parity without writing a custom drag layer.
• Stored form definitions as JSON in one Prisma column keyed by a generated share UUID, so publishing and reading a form is a single round trip at the cost of not being able to query individual fields in SQL.
• Kept field configuration separate from rendered controls so the designer, the preview dialog, and the public form page share one field registry.
• Validated publish and submit payloads in Server Actions with zod rather than trusting client-side react-hook-form validation alone.

Outcomes

• Shareable forms with link-based distribution and per-form submission statistics.
• Clerk-authenticated dashboard with autosave of form content while editing.
• A field library covering text, textarea, number, select, checkbox, date, and layout elements.

Lessons learned

• A framework auth upgrade (Clerk v4 to v5) touches middleware and every server-side session read; it landed as its own commit alongside the pnpm migration, which kept the breakage reviewable.

Technologies

• Next.js
• TypeScript
• Clerk
• Prisma
• PostgreSQL
• zod
• @dnd-kit/core
• Tailwind CSS