Thunder Forms

State-driven form builder with drag-and-drop composition, AI-assisted creation, and a deep analytics pipeline — shipped as a production SaaS with 10K+ visits.

By Aditya Singh Khichi, Full Stack Engineer, New Delhi, India.

Tech stack: Next.js, TypeScript, SSE, PostgreSQL, NextAuth.js, Shadcn UI.

production visits: 10K+

Problem

Existing form builders force you to choose: either a clean drag-and-drop UI with shallow analytics (Typeform), or deep analytics with no first-class form composition (Posthog). Builders shipping a quick survey or lead-gen form had to glue together 3+ tools to get session-aware metrics.

Approach

Built a single-state form schema that drives both the editor and the renderer — one source of truth, no drift between what you compose and what users see. Drag-and-drop composition via dnd-kit. AI-assisted form generation streams field suggestions over SSE so the user sees the form being built field-by-field instead of waiting for a full response. The analytics pipeline aggregates raw events (impressions, focus, blur, submit) into session-aware rollups with bounce rate, partial-completion buckets, and a live visitor counter.

Outcome

Shipped as a production SaaS with 10K+ visits. 1st Runner Up at Appocalypse 2.0 MAIT. The schema-driven approach made adding new field types a 50-line change instead of touching three places, which kept the iteration loop tight enough that I could ship features the same day a user requested them.

Live link: https://thunderforms.in