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

> AI-powered website builder and CMS platform

- Site: https://dorik.com
- Category: SaaS / No-Code Builder
- Verdict: **Serious undertaking** (48/100 vibecodeable)
- Estimated effort: 4-6 weeks of dedicated development

## Verdict

Build a personal clone of the core AI site generator and static editor, but skip the agency white-label and billing subsystems.

Replicating Dorik means building a visual drag-and-drop builder, a reliable LLM generation loop that outputs clean component trees, and a static compilation pipeline. While AI coding tools can scaffold the Next.js frontend and database schemas quickly, perfecting the block editor interactions and managing custom domain proxy routing involves significant debugging and edge-case handling.

### What you can't replicate

- The 100k+ active user base and community-driven template library
- Mature multi-tenant agency billing and white-label infrastructure
- Years of edge-case bug fixes across diverse hosting environments

## What it does

An AI-powered, no-code website building and content management system platform enabling users to generate multi-page websites, landing pages, and blogs using text prompts, templates, and drag-and-drop UI blocks.

### Core features

- AI website generation from text prompts
- WYSIWYG drag-and-drop website editor with UI blocks
- Static site generation and export
- Built-in blogging platform and CMS collections
- Airtable integration as a live data source
- Custom domain management and free SSL generation
- Client billing and white-label agency dashboard
- Native SEO controls and Open Graph meta tags

## The business

### Pricing

- Free: Free
- Personal: $29/mo
- Business: $59/mo
- Agency: $99/mo

### Funding

$3M raised.
- Pre-seed
- Seed
Investors: Early-stage venture syndicates

Founded 2019.
Team size: 31.

## The hard parts

- Building a performant visual drag-and-drop canvas that outputs responsive HTML/CSS cleanly
- Orchestrating LLM structured JSON output into complex component trees
- Managing isolated multi-tenant white-label dashboards and custom domain routing
- Implementing bidirectional sync and caching wrappers for Airtable databases

## How to vibe code Dorik

### Prerequisites

- Node.js (free): Required for running the Next.js full-stack development environment.
- GitHub (free): Source control and deployment pipeline integration.
- Anthropic API Key (pay-as-you-go): Powers the AI website and copy generation pipelines.

### Recommended AI tools

- Claude Code: Best-in-class agentic CLI for multi-file scaffolding, database setup, and debugging loops.
- Cursor: Ideal for iterative refinement of the visual canvas UI and complex React component states.

### Stack

- Frontend: Next.js with Tailwind CSS and a drag-and-drop canvas library
- Backend: Next.js API routes / Server Actions
- Database: Turso (SQLite at the edge for tenant data and site schemas)
- Auth: better-auth
- Payments: Stripe
- Other: Anthropic API, PostHog

### Hosting

- Vercel (Hosting the SaaS dashboard, editor interface, and preview applications.): $0-20/mo
- Cloudflare (Edge routing, custom domain CNAME handling, and serving generated static sites.): $0/mo

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js project with Tailwind CSS, configure better-auth with SQLite via Turso, and set up database schemas for users, sites, pages, and blocks.

```
Create a new Next.js 16 project with Tailwind CSS and TypeScript. Configure better-auth with a Turso SQLite database adapter. Define database tables for users, websites (id, userId, subdomain, customDomain, settings), pages (id, siteId, title, slug, contentJson), and cms_collections (id, siteId, name, schemaJson, itemsJson). Set up clean folder structure under app/ directory.
```

2. **AI Website Generation Pipeline** — Build an API route that accepts user prompts, calls the Anthropic API with a structured JSON schema prompt, and returns a multi-page layout tree with pre-designed UI block configurations.

```
Build a Server Action in Next.js that accepts a business description prompt. Call the Anthropic API using structured JSON mode to generate a complete website layout consisting of a header, hero section, features grid, testimonial block, and footer. Each block must include heading, subheading, CTA text, and image placeholders. Store the generated site tree into the pages table.
```

3. **Visual Drag-and-Drop Editor Canvas** — Implement an interactive browser-based canvas editor allowing users to reorder UI blocks, edit text inline, swap images, and preview responsive viewports.

```
Create a visual drag-and-drop editor component in React using dnd-kit or native drag events. The canvas must render a vertical list of website blocks (Hero, Features, Pricing, Footer). Users can reorder blocks, click any text element to edit inline, and select blocks to modify styles via a right-hand sidebar inspector. Save state changes back to the site database with auto-save debounce.
```

4. **CMS and Airtable Integration** — Add a blogging platform and an Airtable connector module that fetches records from Airtable bases to render dynamic collection lists on the site.

```
Implement a CMS collection management interface where users can create blog posts or custom items with custom fields. Build an Airtable integration settings panel allowing users to input an Airtable API key, base ID, and table name. Create an API route that fetches records from Airtable, caches them briefly, and renders them dynamically inside collection grid components on the generated site.
```

5. **Static Export and Edge Deployment** — Create a static site generator utility that compiles site JSON models into production-ready HTML/CSS assets and configures dynamic routing for custom domains.

```
Write a build utility that takes a site's JSON block tree and compiles it into static HTML and CSS files bundled with Tailwind classes. Implement a custom domain routing handler that inspects incoming request host headers, matches them against registered custom domains in Turso, and serves the corresponding compiled static site content via Cloudflare edge workers.
```

### Cost vs paying

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

- Domain name for platform: $12
- AI coding credits: $20
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Vercel / Cloudflare hosting: $5/mo
- Turso database: $0/mo
- Anthropic API usage: $10/mo
- Total: ~$15/mo

- Paying for the SaaS instead: $59/mo
- Build time: 60 hours
- AI tool credits: $20
- Break-even: 1 month

## Sources

- [Dorik Official Website & Features Pages](https://dorik.com)
- [GetLatka - Dorik Revenue & Valuation Profile](https://getlatka.com)
- [Tracxn - Dorik Company Profile & Competitors](https://tracxn.com)