Let me audit the full codebase to give you a precise handoff document.
Here's the exact production handoff document you can paste into any IDE:
A SaaS web app that lets users build from a prompt or clone from a URL/file upload any App, Sales Funnel, or Marketing Website. Currently a fully functional frontend prototype built in Next.js 16 (App Router). Needs backend integration, auth, AI, payments, and deployment to become production-ready.
app/
layout.tsx -- Root layout, Inter + JetBrains Mono fonts, dark theme
page.tsx -- Main state machine: input -> configure -> progress -> app
globals.css -- Custom dark theme tokens, keyframe animations
components/
url-input-screen.tsx -- Landing page: Build/Clone tabs, URL input, file upload, rotating headline
config-screen.tsx -- Configure: website type, page count slider, clone elements, purpose
progress-screen.tsx -- Animated step-by-step progress (v0-style), typewriter text, countdown
app-header.tsx -- Post-generation header: tabs (UX/Sitemap, Pages, Dashboard), Export, Publish
sitemap-editor.tsx -- Relume-style canvas: pannable/zoomable, page cards, section blocks, mini navigator
pages-browser.tsx -- Grid/list view of all pages with hi-fi section thumbnails
page-designer.tsx -- Visual page editor: inline editing, layers panel, section properties, add/delete
section-renderer.tsx -- Shared: renders section wireframe patterns (hero, nav, pricing, grid, etc.)
dashboard.tsx -- Full analytics dashboard with Recharts: metrics, area chart, bar chart, donut, funnel
export-modal.tsx -- Export formats: Code (locked/upgrade), DOC, JPG, PDF
publish-modal.tsx -- Publish plans: Studio ($9,999 one-time) and Growth ($999/mo)page.tsx)Phase 1: "input" -- UrlInputScreen (Build prompt OR Clone URL/file)
Phase 2: "configure" -- ConfigScreen (website type, page count, elements, purpose)
Phase 3: "progress" -- ProgressScreen (animated steps, adapts labels for build vs clone)
Phase 4: "app" -- AppHeader + tabs:
Tab "sitemap" (or "UX" for App/Funnel) -> SitemapEditor
Tab "pages" -> PagesBrowser -> PageDesigner
Tab "dashboard" -> Dashboard (sample data banner until published)config-screen.tsx, re-exported)type WebsiteType = "App" | "Sales Funnel" | "Marketing Website"
type CloneElement = "Everything" | "Sitemap" | "Wireframe" | "Copy" | "Design" | "Code"
type ClonePurpose = "Clone and Export" | "Customize and Publish"
interface CloneConfig {
websiteType: WebsiteType
pageCount: number
elements: CloneElement[]
purpose: ClonePurpose
}1. Authentication & User Accounts
2. Database (projects, pages, sections)
3. AI Integration (the core engine)
4. Real Page Rendering
Currently sections render as wireframe patterns (placeholder blocks). Need to:
5. Visual Page Editor (upgrade current)
6. Export Functionality
7. Payments (Stripe)
Two plans already defined in the publish modal:
8. Publishing / Deployment
project-name.clonekit.app) or custom domain9. Dashboard Analytics (replace sample data)
10. Environment Variables Needed
# Auth
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
# AI
OPENAI_API_KEY= # or use Vercel AI Gateway (zero config)
# Scraping
FIRECRAWL_API_KEY= # or equivalent scraping service
# Payments
STRIPE_SECRET_KEY=
STRIPE_PUBLISHABLE_KEY=
STRIPE_WEBHOOK_SECRET=
# Deployment
VERCEL_TOKEN= # for programmatic deploysglobals.css142.1 76.2% 36.3%)sm: / md: / lg: breakpoints, touch support on canvasCopy this entire spec into your IDE. The frontend is complete -- you need to wire up the 10 backend systems listed above to make it production-ready.
Yes -- the spec is verbose, has too many "options/recommended" hedges, and lacks a clear build order. Let me tighten it into something an AI IDE can actually execute against without ambiguity.
Here's the optimized spec. No hedging, no options, exact decisions made, strict build order with dependency chains, and file-level integration points so the AI knows exactly where to hook in.
Website builder + cloner SaaS. User inputs a URL (clone mode) or prompt (build mode), configures options, watches animated generation, then edits pages in a visual editor. Frontend is 100% complete. This spec covers the 6 backend systems needed to ship.
Step 1: Supabase Auth + Database Schema
Create these tables:
-- users: handled by Supabase Auth (auth.users)
create table projects (
id uuid primary key default gen_random_uuid(),
user_id uuid references auth.users(id) on delete cascade not null,
name text not null,
mode text check (mode in ('build','clone')) not null,
input_url text,
input_prompt text,
config jsonb not null, -- stores CloneConfig
website_type text not null,
status text check (status in ('generating','ready','published')) default 'generating',
published_url text,
stripe_payment_id text,
created_at timestamptz default now(),
updated_at timestamptz default now()
);
create table pages (
id uuid primary key default gen_random_uuid(),
project_id uuid references projects(id) on delete cascade not null,
name text not null,
sort_order int not null,
created_at timestamptz default now()
);
create table sections (
id uuid primary key default gen_random_uuid(),
page_id uuid references pages(id) on delete cascade not null,
title text not null,
description text,
section_type text not null, -- 'hero','nav','pricing','grid','cta','testimonial','footer','features','howItWorks','faq','contact','custom'
content jsonb, -- stores generated HTML/component data
sort_order int not null,
created_at timestamptz default now()
);
-- RLS: users can only access their own projects
alter table projects enable row level security;
create policy "users own projects" on projects for all using (auth.uid() = user_id);
alter table pages enable row level security;
create policy "users own pages" on pages for all using (
project_id in (select id from projects where user_id = auth.uid())
);
alter table sections enable row level security;
create policy "users own sections" on sections for all using (
page_id in (select id from pages where project_id in (select id from projects where user_id = auth.uid()))
);Auth integration points:
app/layout.tsx with Supabase providerapp/login/page.tsx and app/signup/page.tsx/login, /signup, and /page.tsx: after auth, load user's projects list; clicking a project loads its data into the existing state machineStep 2: AI Generation Engine
Two API routes:
app/api/generate/route.ts -- Accepts { mode, input, config }, streams SSE events matching the progress screen steps.
For clone mode:
scrape endpoint with the URL to get page content + structureprogress-screen.tsx can display real progressFor build mode:
Integration point in progress-screen.tsx (line ~88, the useEffect that drives step timing):
setTimeout-based step simulation with an EventSource that reads from /api/generatecurrentStep and updates typingText with real AI outputonComplete as beforeapp/api/generate/section/route.ts -- Regenerate a single section. Accepts { sectionId, pageContext, prompt }. Used by the page editor's "regenerate" action.
Step 3: Wire Database to UI
Replace all hardcoded SAMPLE_PAGES in page.tsx (lines 21-109) with Supabase queries:
supabase.from('pages').select('*, sections(*)').eq('project_id', id).order('sort_order')sitemap-editor.tsx: replace local useState<SitemapPage[]> with SWR fetching from Supabase. All add/delete/edit/rename operations should call Supabase mutations + optimistic updates.page-designer.tsx: same pattern. Section edits (title, description, content) persist to sections table.pages-browser.tsx: reads from the same SWR cache.Step 4: Section Content Rendering
Replace wireframe placeholders in section-renderer.tsx with real rendered content:
section_type maps to a React component that renders the content JSONB fieldhero section with content: { heading: "...", subheading: "...", cta: "...", image: "..." } renders an actual hero layout with that contentcomponents/section-templates/ folder with: hero.tsx, nav.tsx, pricing.tsx, grid.tsx, cta.tsx, testimonial.tsx, footer.tsx, features.tsx, faq.tsx, contact.tsx, custom.tsxsection-renderer.tsx becomes a switch that delegates to the correct templatecontent + isEditing props; in edit mode, text becomes contentEditableStep 5: Stripe Payments
Two API routes:
app/api/checkout/route.ts -- Creates Stripe Checkout session. Two price IDs:
studio: $9,999 one-time (mode: 'payment')growth: $999/mo (mode: 'subscription')app/api/webhooks/stripe/route.ts -- Handles checkout.session.completed. Updates projects.stripe_payment_id and projects.status = 'published'.
Integration points:
publish-modal.tsx (the "Get Started" buttons): call /api/checkout with plan type + project ID, redirect to Stripeexport-modal.tsx (the "Code" card): check projects.stripe_payment_id; if null, redirect to checkout. If paid, trigger code export.dashboard.tsx: read projects.status; if 'published', hide the sample data bannerStep 6: Export + Deploy
app/api/export/route.ts -- Accepts { projectId, format }:
jpg: Use html2canvas to render each page server-side, return zip of imagespdf: Use jsPDF with html2canvas captures, return multi-page PDFdoc: Use docx npm package to generate a Word doc with sitemap structure + copycode: Use JSZip to generate a Next.js project with the section templates + content data. Gate behind Stripe payment.app/api/deploy/route.ts -- Accepts { projectId }:
POST /v13/deployments)projects.published_urlIntegration point in publish-modal.tsx: after Stripe webhook confirms payment, call /api/deploy, show the live URL.
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
OPENAI_API_KEY=
FIRECRAWL_API_KEY=
STRIPE_SECRET_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_WEBHOOK_SECRET=
STRIPE_PRICE_STUDIO=
STRIPE_PRICE_GROWTH=
VERCEL_TOKEN=
VERCEL_TEAM_ID=app/page.tsx -- State machine. Hook: replace SAMPLE_PAGES, add auth gate
app/layout.tsx -- Add Supabase provider wrapper
components/url-input-screen.tsx -- No changes needed
components/config-screen.tsx -- No changes needed. Exports CloneConfig type used everywhere
components/progress-screen.tsx -- Hook: replace setTimeout simulation with SSE from /api/generate
components/app-header.tsx -- No changes needed
components/sitemap-editor.tsx -- Hook: replace local state with Supabase SWR
components/pages-browser.tsx -- Hook: reads from same SWR cache
components/page-designer.tsx -- Hook: section edits persist to Supabase
components/section-renderer.tsx -- Hook: replace wireframe patterns with real template components
components/dashboard.tsx -- Hook: replace sample data with real analytics after publish
components/export-modal.tsx -- Hook: call /api/export, gate code behind payment
components/publish-modal.tsx -- Hook: call /api/checkout, then /api/deploy after payment// from components/config-screen.tsx
type WebsiteType = "App" | "Sales Funnel" | "Marketing Website"
type CloneElement = "Everything" | "Sitemap" | "Wireframe" | "Copy" | "Design" | "Code"
type ClonePurpose = "Clone and Export" | "Customize and Publish"
interface CloneConfig { websiteType, pageCount, elements, purpose }That's 60% shorter, zero ambiguity, strict build order, and every integration point references the exact file and line. Paste this directly into the IDE and it should be able to execute each step sequentially.