How to Clone Typeform

Create a full-stack Typeform-style conversational form builder called FlowForm using Next.js (App Router), Tailwind CSS, Framer Motion, Prisma and SQLite (swap to Postgres later).

## What to build
A SaaS where users build one-question-at-a-time forms, share a public link, and see responses in a dashboard. Free plan caps monthly responses; paid plans unlock more.

## Key screens
- Dashboard: grid of forms with response counts and status, create-form button
- Builder: question list (add/reorder via drag handles), center live preview, right settings panel; types: short text, long text, multiple choice, rating, email, number; required toggle
- Public fill page at /f/[id]: full-screen single question with Framer Motion slide transitions, Enter-to-continue, progress bar, thank-you screen
- Results: summary cards (responses, completion rate), per-question charts (bars for choices, list for text), responses table, CSV export
- Response detail drawer: every answer of one submission with timestamps
- Share modal: public link + embed snippet
- Theme panel in the builder: color, font and background controls reflected live in the preview
- Billing page: plan, monthly response usage, upgrade

## Schema (Prisma)
User (id, name, email, plan), Form (id, ownerId, title, theme Json, status, createdAt), Question (id, formId, type, label, required, choices Json, order), Response (id, formId, completed, startedAt, submittedAt), Answer (id, responseId, questionId, value Json)

## Logic that must work
- Only published forms accept responses; render the fill page server-side from the form's questions
- Persist a partial Response after the first answer so drop-offs are captured; mark completed on the final submit
- Validate each answer against its question type (email looks like an email, number is numeric, rating in range, required is non-empty)
- Completion rate = completed ÷ started, computed in one shared util used by UI and API
- Enforce the free-plan response cap (100/month) server-side; return an 'upgrade' state when exceeded
- The public submit endpoint is unauthenticated - validate strictly and rate-limit it
- A published form is publicly fillable; drafts return 404 / are not fillable

## Style
Modern and bold: deep-navy primary (#262627), bright accent, large rounded inputs, big question typography, generous whitespace, smooth motion between questions. The builder is utilitarian and dense; the fill page is calm and full-screen. Fully responsive.

## Quality
Store answers as typed JSON; snapshot the form's questions onto each Response so editing a live form doesn't corrupt old answers; add skeleton loaders in the dashboard; noindex draft forms.
Reset the monthly response counter on schedule; show a usage meter on the billing page; keep the completion-rate util shared between the results page and admin dashboard.

Seed with 4 demo forms (feedback survey, job screener, RSVP, product quiz), 5–8 questions each, and 15–30 responses per form so the dashboard and charts are populated. Use Stripe test mode for plan upgrades; if unavailable, mock the upgrade with a button that just sets the plan field.

You are building a production-quality Typeform clone. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion
- PostgreSQL via Prisma; Supabase for auth (email + Google OAuth)
- Stripe Billing for subscription plans with metered response limits
- Zod for all validation; react-hook-form on the fill page; Zustand for builder state

## Architecture requirements
- Route groups: (marketing), (app) for the builder/dashboard, and a public, auth-free /f/[id] fill route
- Responses are written by an unauthenticated server action with strict Zod validation and rate limiting - this is your most-abused endpoint, harden it
- Question schema is versioned: store a snapshot of the form's questions on each Response so editing a live form doesn't corrupt historical answers
- lib/stats.ts: single source of truth for completion rate, per-question aggregation; unit-test it

## Data model
users, forms (theme json, status), questions (type enum, choices json, order), responses (completed, question_snapshot json), answers (value json). Index questions(form_id, order), responses(form_id, submitted_at), answers(response_id).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with middleware-protected (app) routes
2. Builder: question CRUD with drag-reorder (dnd-kit), a live preview pane, per-type settings panels, autosave
3. Public fill page: SSR question flow, Framer Motion transitions, client validation per type, progress bar, autosave partials via the public server action
4. Response storage: write Answer rows + a question snapshot; mark completed on final step; rate-limit the endpoint
5. Results: summary stats, per-question charts (Recharts), responses table with row detail, CSV export
6. Conditional logic: a rules engine on questions (if answer X, jump to question Y / end) evaluated server-side and mirrored on the client
7. Billing: Stripe Checkout for plans, webhook updates user.plan, enforce monthly response cap with a usage counter

## Quality bar
- Loading.tsx skeletons and error.tsx boundaries on (app) routes; the public fill page must be fast and resilient
- SEO: generateMetadata on public form pages; noindex draft forms
- Store form themes and answers as typed JSON validated by Zod on read and write
- Money/usage counters stored as integers; reset the monthly response counter on a schedule
- The fill page must work without JavaScript errors on slow connections - autosave each answer as it's given
- Seed script: 4 forms, 6 questions each, 80 responses with varied completion

Start with step 1. After each step, tell me what to verify in the browser before moving on.

Design the complete UI for a Typeform-style conversational form builder called FlowForm. React + Tailwind, shadcn/ui components, lucide-react icons. Modern, bold aesthetic: lots of whitespace, deep-navy primary (#262627), one bright accent color, large rounded inputs, big friendly typography.

## Screens to generate

### 1. Dashboard
- Top bar: logo left, workspace switcher, 'Create form' primary button right, avatar menu
- Form grid (3 cols desktop / 2 tablet / 1 mobile): each card shows form title, a small thumbnail of the first question, response count, status badge (Draft gray / Published green), and a kebab menu

### 2. Form builder
- Three-panel layout: left = question list with type icons and drag handles plus an 'Add question' button opening a type picker; center = large live preview of the selected question exactly as respondents will see it; right = settings panel (question text, type, required switch, choice editor for multiple-choice)
- Top bar: form title (editable inline), Preview and Publish buttons

### 3. Public fill page
- Full-screen single question: big question text, a generously sized input (or large choice buttons labeled A/B/C with keyboard hints), an 'OK' button with a press-Enter hint, and a thin progress bar at the top
- A polished 'Thank you' end screen with a checkmark animation placeholder

### 4. Results dashboard
- Summary cards row: total responses, completion rate %, average completion time
- Per-question section: multiple-choice rendered as horizontal bar charts with percentages; text questions as a scrollable list of answers; rating questions as a distribution
- A responses table with a row per submission and a 'View' detail drawer; an 'Export CSV' button

### 5. Share modal
- Public link with a copy button, a QR code placeholder, an embed-code snippet box, and social share buttons

### 6. Question type picker
- A popover/menu opened from 'Add question': a searchable list of types each with an icon and one-line description - Short text, Long text, Multiple choice, Rating, Email, Number - with keyboard navigation

### 7. Billing / usage page
- A plan card showing the current plan, a usage meter (responses this month vs. cap with a progress bar that turns amber near the limit), a feature-comparison table of Free / Pro / Business, and an Upgrade button

### 8. Thank-you / end screen editor
- A small panel in the builder to customize the end screen: a headline, a subtext, an optional redirect URL or button label, and a confetti toggle - shown live in the preview pane

### 9. Empty state
- The dashboard with no forms yet: a friendly illustration, a one-line value prop, and a large 'Create your first form' button plus a row of template cards to start from

Make every screen fully responsive. On mobile: the builder collapses to a tabbed view (Questions / Preview / Settings), the fill page is already full-screen and touch-friendly, and the results charts stack vertically. Use realistic placeholder data - form titles like 'Customer Feedback 2026', response counts 12–1,840, completion rates 58–91%.

Build a conversational form and survey app (Typeform model) called FlowForm.

## Entities
- Form: title, theme (color + font), status (draft/published), owner (user reference), createdAt (date)
- Question: form reference, type (single-select: short_text/long_text/multiple_choice/rating/email/number), label, required (boolean), choices (text list, for multiple choice), order (number)
- Response: form reference, completed (boolean), startedAt (date), submittedAt (date)
- Answer: response reference, question reference, value (text)
- User: name, email, plan (single-select: free/pro/business)

## Roles & permissions
- Creators sign in to build forms and see only their own forms and responses
- Respondents need no account; they fill out published forms via a public link
- Admin role: view all users, manage plans, see a platform usage dashboard

## Pages
1. Dashboard: grid of the creator's forms with response counts and status, create-form button
2. Form builder: question list (add/reorder/delete), a live preview of the current question, and a settings panel for type/required/choices
3. Public fill page: one question at a time, full-screen, with a progress bar and a thank-you screen
4. Results: summary cards (responses, completion rate), per-question breakdown with charts, a responses table, and CSV export
5. Share: a public link and an embeddable snippet for the form
6. Billing: current plan, monthly response usage, upgrade action
7. Admin dashboard: all users and plans, total responses over time chart

## Rules
- Only published forms accept responses; drafts are private to the owner
- Save a partial response after the first answer so drop-offs are captured; mark completed on final submit
- Each answer must match its question type (email is an email, number is numeric, required is non-empty)
- Completion rate = completed responses ÷ started responses
- Each form gets a public shareable link; respondents need no account to fill it
- Free plan caps responses at 100 per month; block further responses with an upgrade prompt

## Look & feel
Typeform-inspired: bold and minimal, deep-navy primary with a bright accent, large rounded inputs, big question typography, smooth feel, generous whitespace. The fill page should feel conversational. Mobile responsive throughout.

Seed with 4 sample forms (feedback survey, job screener, event RSVP, product quiz), 5–8 questions each, and 15–30 sample responses per form so the dashboard and results charts have data.