# How to Vibe Code Your Own Carbonmade (and Stop Paying for It) > An online portfolio builder for creatives - Site: https://carbonmade.com - Category: Portfolio Builder SaaS - Platforms: Web app - Verdict: **Solid side project** (72/100 vibecodeable) - Estimated effort: 3-4 weekends of focused building ## Verdict Build a personal clone over a few weekends; the biggest catch is orchestrating reliable cloud object storage and asynchronous media handling for heavy video and imagery without hitting local bottlenecks. Carbonmade's core value is its snappy drag-and-drop portfolio builder and clean media presentation. A solo developer can successfully vibecode a robust personal clone using Next.js, Cloudflare R2 for asset storage, and Turso for layout definitions. However, replicating the exact multi-gigabyte video transcoding pipeline and zero-friction custom domain routing requires substantial plumbing that a paid subscription easily replaces if you just need a portfolio. ### What you can't replicate - The 2-decade brand legacy trusted by millions of creatives - The active Talent Pool hiring marketplace ## What it does An online portfolio builder and talent directory featuring modular drag-and-drop layout blocks, full-resolution media and video support, custom domains, and built-in analytics. ### Core features - Modular drag-and-drop layout blocks - Custom grid configurations - Unlimited high-res media uploads (images and video) - Custom subdomain and CNAME domain mapping - Built-in visitor analytics and project stats - Talent pool directory and creator profiles ## The business ### Pricing - Beginner: $9.99/mo - Professional: $14.99/mo - Unlimited: $24.99/mo Founded 2005. Team size: 1-10. ## The hard parts - Asynchronous media processing and video encoding pipelines for heavy assets - Custom domain routing with wildcard SSL provisioning at scale - Smooth drag-and-drop layout builder with responsive grid reflow ## How to vibe code Carbonmade ### Prerequisites - Node.js (free): Required for running the Next.js frontend and build tooling. - GitHub (free): Version control and deployment pipeline source repository. - Cloudflare Account (free): Provides edge hosting, serverless SQLite, and S3-compatible object storage for media. ### Recommended AI tools - Claude Code: Best-in-class agentic coding tool for scaffolding full-stack features, database schemas, and drag-and-drop interactions from terminal prompts. - Cursor: Ideal for iterative frontend styling and tweaking drag-and-drop block components with visual diffs. ### Stack - Frontend: Next.js with Tailwind CSS and dnd-kit - Backend: Next.js Server Actions / API Routes - Database: Turso - Auth: better-auth - Payments: None (personal use) - Other: Cloudflare R2 for image and video asset storage ### Hosting - Cloudflare (Full-stack hosting (Next.js via OpenNext, D1/Turso DB, and R2 object storage)): $0-5/mo ### Build guide 1. **Scaffold Project and Database Schema** — Initialize a Next.js full-stack application with Tailwind CSS and set up Turso SQLite using Drizzle ORM to define users, portfolios, blocks, and projects. ``` Create a new Next.js project with Tailwind CSS. Set up Drizzle ORM configured for Turso SQLite. Define schemas for users, portfolios (with custom subdomains), projects, and modular layout blocks (storing block type, order, and JSON configuration data). Implement better-auth for secure email/password authentication. ``` 2. **Build the Drag-and-Drop Portfolio Builder UI** — Implement an interactive dashboard and editor where users can add, remove, and reorder modular layout blocks using a drag-and-drop library. ``` Build an interactive portfolio builder dashboard using dnd-kit in Next.js. Create modular block components for headers, image galleries, video loops, text descriptions, and grids. Allow users to drag blocks to reorder them, edit their text/media content inline, and save the updated layout configuration to the database via server actions. ``` 3. **Implement Media Uploads and Storage Pipeline** — Set up Cloudflare R2 object storage for handling full-resolution images and videos with direct browser uploads. ``` Implement a secure media upload pipeline targeting Cloudflare R2 using presigned URLs. Build an upload component supporting high-resolution images, GIFs, and video files with drag-and-drop support, progress indicators, and gallery thumbnail generation. ``` 4. **Create Public Portfolio Renderer** — Build dynamic public portfolio pages that load user layouts and media assets with responsive grids. ``` Create a dynamic public portfolio route ([username].domain.com or /p/[username]) that fetches the user's active layout blocks and projects from Turso. Render the blocks responsively with full-screen galleries, lightbox image viewers, and custom typography settings. ``` 5. **Add Custom Domains and Analytics** — Implement lightweight visitor analytics tracking and custom domain lookup handling for portfolios. ``` Add a simple analytics tracker that logs page views and project clicks into Turso without cookies, displaying aggregate stats on the user dashboard. Implement middleware to resolve custom CNAME domains pointing to user portfolio slugs. ``` ### Cost vs paying **Starting costs (one-time):** - Custom Domain (optional): ~$12/yr - Total: ~$12 one-time **Ongoing costs (monthly):** - Cloudflare Workers & R2 Storage: $0-5/mo - Total: ~$3/mo - Paying for the SaaS instead: $9.99/mo - $24.99/mo - Build time: 30-40 hours - AI tool credits: $20 (Claude Pro) - Break-even: 1 month ## Sources - [Carbonmade Official Website](https://carbonmade.com) - [Carbonmade Pricing](https://carbonmade.com/pricing) - [Carbonmade Features](https://carbonmade.com/features) - [Carbonmade About](https://carbonmade.com/about)