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

> The simplest way to create forms

- Site: https://tally.so
- Category: SaaS
- Verdict: **Solid side project** (72/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

You can build a fully functional personal clone of Tally with AI coding tools, though crafting the Notion-like block editor and conditional logic engine requires careful prompt iteration.

Tally's core architecture is a straightforward React frontend paired with a relational database, but nailing the block-based editor experience (/ commands, keyboard traversal) and the formula/conditional logic engine takes genuine engineering effort. AI agents will spin up the CRUD and Tailwind styles rapidly, but you will spend considerable time debugging complex block state updates and edge cases in the form evaluation tree.

### What you can't replicate

- Tally's organic network effect and ecosystem of 500,000+ active teams
- Pre-built native integrations for dozens of niche third-party software tools

## What it does

An online form builder designed around a block-based text document layout that allows users to build surveys, contact forms, quizzes, and order forms with conditional logic, calculations, and integrations.

### Core features

- Notion-style block-based form editor with slash commands
- Diverse input blocks (text, choice, rating, file upload, stripe checkout, e-signature)
- Dynamic conditional logic and variable calculation engine
- Form response submission storage and dashboard analytics
- Webhook and external API integrations (Notion, Google Sheets, Airtable, Slack)
- Form publishing via standalone links, popups, and embeds

## The business

### Pricing

- Free Plan: Free — Includes unlimited forms and submissions under fair use guidelines.
- Pro Plan: $29/mo — Removes branding and unlocks custom domains and workspaces.
- Business Plan: $89/mo — Tailored for organizations needing data compliance controls.

Founded 2020.
Team size: Micro-startup (~4 core members).

## The hard parts

- Building a buttery-smooth Notion-like block editor in React with precise keyboard navigation and slash commands
- Designing a robust client-side and server-side conditional logic evaluator that handles nested branching and real-time calculations without UI lag
- Managing reliable asynchronous job queues to dispatch form submissions to third-party endpoints under traffic spikes

## How to vibe code Tally

### Prerequisites

- Node.js (free): Runtime environment required for Next.js and backend packages.
- GitHub (free): Version control and deployment integration.

### Recommended AI tools

- Claude Code: Best-in-class multi-file agent for scaffolding the React frontend editor and database schema iteratively.
- Cursor: Ideal for fine-tuning individual UI components like block renderers and form themes.

### Stack

- Frontend: Next.js with Tailwind CSS and Lucide icons
- Backend: Next.js Server Actions & API Routes
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: Stripe
- Other: Resend for email notifications, Vercel AI SDK for prompt-based form generation

### Hosting

- Vercel (Hosting the Next.js frontend and serverless API endpoints): $0/mo (Hobby tier)
- Turso (Lightweight serverless SQLite database for forms and submissions): $0/mo (Free tier)

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js repository with TypeScript, Tailwind CSS, and Turso database client configured via better-auth and Drizzle ORM.

```
Initialize a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up Drizzle ORM configured for Turso SQLite. Create database schemas for Users, Forms, Blocks, Submissions, and Answers. Implement better-auth for single-user authentication and workspace management. Ensure the setup is clean, modular, and ready for a Notion-style block editor.
```

2. **Notion-Style Block Editor Frontend** — Build the core form builder interface supporting block insertion via slash commands, drag-and-drop reordering, and inline text editing.

```
Build a React-based Notion-style block editor component for creating form questions. Support a '/' command menu to insert blocks such as Heading, Paragraph, Input Text, Multiple Choice, Dropdown, File Upload, and Stripe Checkout. Implement keyboard navigation (Arrow Up/Down, Enter, Backspace to delete empty blocks) and drag-and-drop reordering. Save block state changes reactively to the parent form model.
```

3. **Public Form Renderer and Response Collection** — Create the public-facing view where respondents can fill out published forms and submit answers.

```
Create a public form rendering route [formId] that loads form blocks from the database without requiring authentication. Implement responsive form layouts, multi-page form pagination, and input validation for email, number, and required fields. Handle form submission by writing response data and individual block answers to the Submissions and Answers tables, then display a customizable Thank You screen.
```

4. **Conditional Logic and Calculator Engine** — Implement client-side and server-side conditional rules to show/hide blocks and compute formulas dynamically.

```
Implement a conditional logic and formula calculation engine for forms. Allow form creators to define rules (e.g., if Question A equals X, show Block B). Evaluate these rules reactively on the client side as respondents type or select answers. Add a calculated field block that evaluates mathematical formulas using variables from previous form responses and displays real-time pricing or scores.
```

5. **Integrations and Webhooks** — Add background dispatching to send submissions to external webhooks, Google Sheets, or Slack.

```
Implement an integration settings panel for forms supporting custom Webhooks and Slack notifications. When a form submission is successfully saved, trigger an asynchronous background fetch to dispatch formatted payload data to configured webhook URLs. Include error logging and retry handling for failed webhook dispatches.
```

6. **Dashboard Submissions Analytics and Polish** — Build the creator dashboard to view submissions, export data, and manage form settings.

```
Build a creator dashboard view listing all created forms with submission counts, responses table view with filtering and sorting, and a CSV export feature for form submissions. Add form settings modals for closing forms, setting custom redirects, and managing email notifications via Resend. Polish UI aesthetics with consistent Tailwind styling and smooth transitions.
```

### Cost vs paying

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

- AI Coding Assistant Subscription: $20
- Total: ~$20 one-time

**Ongoing costs (monthly):**

- Hosting & Database: $0
- Total: ~$0/mo

- Paying for the SaaS instead: $29/mo (Pro)
- Build time: 35 hours
- AI tool credits: $20 (Claude Pro / Cursor)
- Break-even: 0 months (Free personal use)

## Sources

- [Tally.so Homepage & Pricing Scraped Context](https://tally.so)
- [GTM Strategist - Tally Bootstrapped Journey](https://www.gtmstrategist.com)