01. The Problem
Developers building onboarding flows, client portals, and internal tools spend hours writing the same form boilerplate every time — and existing visual builders don't help, because they produce hosted widgets you can't own. There was no tool that let a developer describe a form in plain English, refine it visually, persist their work across devices, and walk away with clean, production-ready source code.
02. Approach
The three-panel builder was composed around an accessible drag-and-drop engine supporting both pointer and keyboard input. Animated transitions were baked in at the component level rather than added after, keeping the building experience tactile and responsive throughout development.
Natural language input was connected to Gemini 2.5 Flash via a Next.js API route, with the AI treated as an untrusted data source from the start. A five-stage validation and repair pipeline — type normalisation, Zod validation, and semantic fixup — ensures every AI response produces a clean, fully editable schema, never a broken canvas state.
A Supabase backend was integrated early so that the storage model was right from the start. Supabase Auth handles email/password sign-up and sign-in via PKCE with httpOnly session cookies managed by `@supabase/ssr`. A Next.js edge middleware layer refreshes sessions on every request and protects builder routes before they render. Forms are stored in a Postgres table with a JSONB `content` column and row-level security, so users can only access their own data. Redux Toolkit listener middleware owns the sync responsibility: mutations are debounced and upserted 1 second after the last change; create and delete operations sync immediately. The decision to put sync logic in listener middleware — rather than thunks inside action creators — kept reducers pure and made the debounce/cancel pattern straightforward without leaking async concerns into the UI layer.
Multi-step forms were designed as a first-class mode of the schema, not a plugin or wrapper. Steps are named, reorderable, and independently configurable — with custom navigation labels, back button control, and four indicator styles — giving developers a complete multi-step authoring experience with no configuration outside the UI.
A rule evaluation system was built to handle cascading field dependencies correctly — where hiding one field automatically suppresses all downstream fields that depend on its value. A cycle-detection algorithm prevents users from creating circular dependency chains that would cause infinite evaluation loops.
The export engine was architected as two structurally distinct output strategies sharing a single schema input. Single-step forms produce a `react-hook-form` component with Zod or Yup validation. Multi-step forms produce an entirely different component — `useState`-driven, with per-step Zod schemas, animated directional transitions, and an inlined progress indicator.
03. Solution
FormCraft is a fullstack application where authentication, cloud persistence, AI generation, and code export are all first-class features. Developers get two paths into the same result: describe a form in plain English and have the AI scaffold it in seconds, or build field by field with drag-and-drop. Either way, their work is saved to the cloud and the output is a production-ready, accessible React component or HTML file they own outright.
The multi-step export is a self-contained React component with step navigation, per-step validation, animated transitions, and a progress indicator — ready to drop into any codebase without wrapping in a third-party widget.
The rules engine handles multi-condition chains with AND/OR logic and cascading evaluation, so hiding a parent field correctly suppresses all dependent fields downstream, matching the complexity of real-world form requirements.
All form work — including undo/redo history and AI-generated forms — is automatically saved locally with a migration system that keeps older schemas editable after structure updates.
Describing a form in natural language generates a fully editable schema — with correct field types, validation rules, and placeholder text — that lands directly in the live builder. No manual cleanup required.
04. Outcome
The form builder demonstrates not just UI competency but a disciplined approach to developer tooling: start with contracts, build for correctness, and deliver something that produces real, usable output.