# How to Vibe Code Your Own Outgrow (and Stop Paying for It)

> Build interactive quizzes, calculators, and lead magnets that convert

- Site: https://outgrow.co
- Category: Marketing & Lead Generation
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a subset with Next.js and Tailwind, but keep paying if you need their 1,000+ native CRM integrations.

Creating a personal clone of Outgrow requires tackling a robust multi-step form and quiz builder with live preview state, combined with a dynamic math formula evaluator for calculators. While AI coding agents handle frontend component scaffolding and CRUD database schemas efficiently, building a bulletproof secure expression parser for math formulas and handling edge cases in responsive iFrame embedding will demand careful debugging over a few focused weekends.

### What you can't replicate

- Pre-existing integrations with 1,000+ external martech tools and CRMs
- Extensive template library built over a decade
- SOC 2 compliance and enterprise trust

## What it does

Growth-marketing SaaS platform for creating dynamic calculators, outcome-based quizzes, assessments, and lead capture forms with customizable layouts and native CRM integrations.

### Core features

- WYSIWYG builder for adding and reordering quiz/calculator steps
- Dynamic math formula evaluation engine for real-time calculation inputs
- Conditional logic branching based on user responses
- Multi-layout responsive rendering engine (1-column, 2-column, chat, card styles)
- Lead generation gating form with submission tracking
- Interactive results view with charts and graphs

## The business

### Pricing

- Freelancer Limited: $14/mo — Basic entry tier billed annually
- Freelancer Pro: $25/mo — Standard professional tier billed annually
- Essentials: $95/mo — Advanced business tier billed annually
- Business: $600/mo — High-volume agency and business tier billed annually

Founded 2016.
Team size: 50-60.

## The hard parts

- Safe evaluation of arbitrary mathematical formulas and nested if/else logic trees without injection risks
- Complex state synchronization between the builder canvas and multi-step live preview
- Multi-layout responsive rendering engine that embeds cleanly without CSS leakage inside arbitrary client iFrames

## How to vibe code Outgrow

### Prerequisites

- Node.js (free): Required runtime for modern full-stack TypeScript web development
- GitHub (free): Version control and repository hosting for deployments

### Recommended AI tools

- Claude Code: Best-in-class terminal agent for scaffolding complex multi-file Next.js apps and managing end-to-end development loops
- Cursor: Ideal AI-native editor for iterative UI tweaking of responsive quiz and calculator layouts

### Stack

- Frontend: Next.js with Tailwind CSS and Shadcn UI
- Backend: Next.js App Router API Routes
- Database: Turso (SQLite at the edge for relational content trees)
- Auth: better-auth
- Payments: None (personal use clone)
- Other: Vercel AI SDK for text helpers, PostHog for analytics

### Hosting

- Vercel (Hosting the Next.js frontend, API routes, and preview deployments): $0/mo (Hobby tier)
- Turso (Serverless SQLite database storage for content pieces, questions, and lead submissions): $0/mo (Free tier)

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js project with Tailwind CSS, Shadcn UI, and set up the Turso database client with Drizzle ORM.

```
Create a new Next.js App Router project configured with TypeScript, Tailwind CSS, and Lucide icons. Set up Drizzle ORM connected to a Turso SQLite database. Create schema tables for 'contents' (id, title, type, user_id, theme_config, created_at), 'questions' (id, content_id, title, type, options_json, order_index), and 'leads' (id, content_id, email, answers_json, score, created_at). Implement a basic layout wrapper with sidebar navigation and configure environment variables in .env.local.
```

2. **Authentication and Dashboard** — Configure better-auth for user accounts and build the main dashboard listing user-created content pieces.

```
Install and configure better-auth with email/password authentication using the Turso database adapter. Build an authentication layout with sign-in and sign-up pages. Create the main dashboard page at /dashboard that fetches and displays the authenticated user's content pieces in a grid, with a 'Create New Content' modal supporting selection of content type (Quiz, Calculator, Form).
```

3. **WYSIWYG Builder Canvas** — Build the interactive content editor allowing users to add, reorder, and configure questions and logic branches.

```
Build a content editor page at /builder/[id] with a sidebar for adding questions and a central canvas preview. Implement state management using React Context or Zustand to allow editing question titles, selecting question types (multiple choice, numerical input, dropdown), adding options with associated scores or formula weights, and reordering questions via up/down controls or drag indicators. Persist changes to the backend via debounced API calls.
```

4. **Dynamic Formula and Calculation Engine** — Implement a secure expression evaluator for numerical calculators and outcome scoring logic.

```
Build a calculation engine utility for numerical calculators and outcome quizzes. For calculators, allow users to define mathematical formulas referencing variable input IDs (e.g., input_1 * input_2 / 100) and safely evaluate them using a secure math parsing library without eval risks. For quizzes, implement score summing logic and outcome mapping rules (e.g., if score >= 10, display Outcome A).
```

5. **Interactive Client Renderer and Lead Capture** — Create the public-facing runner view where respondents step through questions, see real-time calculations, and submit leads.

```
Build a public rendering page at /c/[id] that loads a published content piece. Implement a multi-step wizard component that renders questions one by one or in a single column layout depending on configuration. Wire up live calculation updates for numerical inputs. Add a mandatory or optional lead capture gate step before displaying the final results screen, storing submissions into the 'leads' table and triggering webhook notifications if configured.
```

6. **Analytics and Lead Management View** — Build analytics dashboards to view lead submission metrics, conversion rates, and individual lead details.

```
Create a lead management and analytics page at /dashboard/[id]/analytics. Implement summary statistic cards showing total visits, total leads, and conversion rate percentage. Build a data table displaying captured lead emails, submitted scores, answers json breakdown, and export-to-CSV functionality.
```

### Cost vs paying

**Starting costs (one-time):**

- AI coding tool subscription: $20
- Custom Domain (optional): $12/yr
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Vercel Hobby & Turso Free Tier: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $95/mo (Essentials plan)
- Build time: 35-50 hours
- AI tool credits: $20 (One month of Claude Code / Cursor Pro)
- Break-even: Immediate (open-source stack vs paid subscription)

## Sources

- [Outgrow Website & Pricing](https://outgrow.co)
- [Tracxn Company Profile on Outgrow](https://tracxn.com)
- [SaaS Mag Startup Profile: Outgrow](https://saasmag.com)
- [GetLatka Revenue & Metrics Tracker](https://getlatka.com)