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

> A website builder for designers and artists

- Site: https://cargo.site
- Category: Website Builder
- Platforms: Web app
- Verdict: **Serious undertaking** (42/100 vibecodeable)
- Estimated effort: 6+ weeks of focused development

## Verdict

Build a personal static portfolio generator instead; replicating Cargo's complex visual spatial layout engine and wildcard multi-tenant routing from scratch requires heavy engineering.

While AI tools can generate boilerplate CRUD schemas and React components rapidly, Cargo's core value lies in its proprietary spatial layout engine and fluid grid controls. Crafting a WYSIWYG editor that supports overlapping elements, custom grid breakpoints, and secure user code sandboxing will demand intense manual frontend architecture and state-management debugging. Furthermore, wiring up wildcard subdomain mapping and automated SSL provisioning for multi-tenant publishing introduces significant DevOps friction.

### What you can't replicate

- The Cargo brand and curated peer design network
- Years of edge-case refinement in spatial layout rendering across browsers

## What it does

Specialized website builder and content management system tailored explicitly for designers, artists, and creative professionals, featuring avant-garde grid-breaking layouts and dual scrolling.

### Core features

- Visual drag-and-drop / spatial layout editor
- Multi-tenant site publishing and subdomain routing
- Custom CSS and JS injection sandbox
- High-res asset pipeline with automatic optimization
- Dual-pane scrolling and grid-breaking layout engines
- Thumbnail indexing and gallery views
- Multi-site account management

## The business

### Pricing

- Standard Plan (Annual): $14/mo — Billed annually, includes custom domain connections and full portfolio features.
- Standard Plan (Monthly): $19/mo — Billed monthly, full access to portfolio builder.
- Free Tier: Free — Build and test sites on *.cargo.site subdomains.

### Funding

$3.81M raised.
- Series A
Investors: Venture capital firms via Tracxn

Founded 2019.
Team size: ~27.

## The hard parts

- Building a snappy WYSIWYG spatial canvas that maintains mobile responsiveness
- Automated SSL certificate provisioning and wildcard custom domain routing
- Secure sandboxing for user-injected custom CSS/JS without breaking the parent app
- Optimized media pipeline for heavy images, animations, and video embeds

## How to vibe code Cargo

### Prerequisites

- Node.js (free): Required for running the Next.js development environment and build tooling.
- GitHub (free): Source code repository and deployment pipeline integration.
- Cloudflare account (free): Required for DNS management, wildcard domain routing, and global asset caching.

### Recommended AI tools

- Claude Code: Handles multi-file full-app scaffolding, database schema setup, and iterative debugging effectively in the terminal.
- Cursor: Provides precise inline editing and diff reviews for complex React-based drag-and-drop canvas components.

### Stack

- Frontend: Next.js with Tailwind CSS and a custom spatial layout canvas using interactive DOM manipulation primitives
- Backend: Next.js Server Actions and API routes
- Database: Turso (SQLite at the edge for tenant and page metadata)
- Auth: better-auth
- Payments: None (personal use clone)
- Other: Cloudflare R2 for asset storage and image optimization, Zod for schema validation

### Hosting

- Vercel (Hosting the Next.js builder application and frontend dashboard): $0/mo (Hobby tier)
- Cloudflare (Wildcard DNS routing, SSL management, and R2 asset storage CDN): $0-5/mo

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js 16 project with TypeScript, Tailwind CSS v4, better-auth, and Turso SQLite database schema for users, sites, pages, and layout blocks.

```
Create a new Next.js 16 project with Tailwind CSS v4 and TypeScript. Set up a Turso SQLite database connection using Drizzle ORM or a direct HTTP client. Define the schema tables: `users` (id, email, createdAt), `sites` (id, userId, name, subdomain, customDomain, settings), `pages` (id, siteId, slug, title, contentJson), and `assets` (id, siteId, url, filename, size). Configure better-auth for email/password authentication with session handling. Ensure clean directory structure with App Router, server actions, and strict TypeScript types. Test the database connection and run initial migrations.
```

2. **Spatial Layout Canvas & Visual Editor** — Build an interactive WYSIWYG visual editor canvas allowing users to place, resize, and style elements on an infinite or grid-snapped board.

```
Build a responsive visual layout editor component in Next.js using React state or a lightweight drag-and-drop library. The canvas should support adding layout blocks (text, image gallery, video embed, custom HTML/CSS block). Implement an inspector sidebar where users can modify positioning (absolute/grid), padding, margins, custom CSS overrides, and typography. Serialize the entire page layout tree into a JSON structure (`contentJson`) stored in the database. Ensure the editor UI is clean, snappy, and handles window resizing gracefully.
```

3. **Asset Management & Media Pipeline** — Implement media upload functionality with automatic optimization and storage integration using Cloudflare R2.

```
Implement a file upload manager for the site builder using Cloudflare R2 (S3-compatible API). Build an asset drawer component that lets users upload high-res images and videos, store metadata in the `assets` table, and insert media items directly into active layout blocks. Add client-side validation for image types, max sizes, and generate optimized thumbnails or responsive srcset attributes where applicable. Handle upload progress states and error handling gracefully.
```

4. **Custom Code Sandbox & Preview Mode** — Create a live preview mode and a secure sandbox mechanism for injecting custom user CSS and JavaScript without compromising the parent app shell.

```
Develop a live preview mode toggle in the editor that renders the serialized `contentJson` layout tree as production-ready HTML and CSS. Implement a custom CSS/JS code injection modal where users can write arbitrary styles and scripts. In preview and published views, render user custom CSS safely inside scoped style tags or sanitized iframe wrappers to prevent cross-site scripting (XSS) attacks on the core builder app. Verify that custom styles correctly override default block styling.
```

5. **Multi-tenant Publishing and Routing** — Configure dynamic routing to render published user sites via subdomains (`*.cargo.site`) or custom domains.

```
Implement a dynamic Next.js catch-all route (e.g., `app/[subdomain]/[[...slug]]/page.tsx`) that inspects incoming request headers (`host`), extracts the subdomain or custom domain, queries the Turso database for the matching site record, and SSR-renders the serialized `contentJson` layout tree into a fully responsive public web page. Set up proper caching headers, 404 handling for unpublished or missing sites, and fallback states for root marketing domains.
```

### Cost vs paying

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

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

**Ongoing costs (monthly):**

- Vercel Hobby + Cloudflare / Turso: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $14 - $19/mo
- Build time: 45-60 hours
- AI tool credits: $20 (Claude Pro / Cursor)
- Break-even: Never (built for personal portfolio hosting and learning)

## Sources

- [Cargo Site Builder Overview](https://cargo.site)
- [Tracxn - Cargo Company Profile & Metrics](https://tracxn.com)
- [Cargo Support - Rates & Services Documentation](https://cargo.site)