How to vibe codeCarbonmade
An online portfolio builder for creatives
carbonmade.com ↗Portfolio Builder SaaS
The verdict: can you vibe code Carbonmade?
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.
Estimated effort: 3-4 weekends of focused building
What you can't replicate
- The 2-decade brand legacy trusted by millions of creatives
- The active Talent Pool hiring marketplace
Founded
2005
Raised
—
Team
1-10
Cheapest paid tier
$9.99/mo
What Carbonmade 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
Funding
Unknown / bootstrapped
Pay vs build, cumulative
Break-even at month 2 — after that, every month is money kept.
The hard parts of vibe coding Carbonmade
- 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 vibecode Carbonmade
Prerequisites
Node.jsfree
Required for running the Next.js frontend and build tooling.
GitHubfree
Version control and deployment pipeline source repository.
Cloudflare Accountfree
Provides edge hosting, serverless SQLite, and S3-compatible object storage for media.
AI coding tools
Recommended 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 & infrastructure
| Cloudflare | Full-stack hosting (Next.js via OpenNext, D1/Turso DB, and R2 object storage) | $0-5/mo |
Build guide
01Scaffold 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.02Build 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.03Implement 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.04Create 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.05Add 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 for Carbonmade
What will you build it with?
Starting total with Claude Code$0 one-time
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 Carbonmade
$9.99/mo - $24.99/mo
Your time to build
30-40 hours
AI tool credits
$20 (Claude Pro)
Break-even
1 month
Vibe code Carbonmade: FAQ
- Can you vibe code Carbonmade yourself?
- Solid side project — 72/100 vibecodeable. 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.
- How long does it take to vibe code Carbonmade?
- 3-4 weekends of focused building — roughly 30-40 hours of hands-on time with an AI coding agent.
- How do you build your own Carbonmade?
- Scoped to personal use: Next.js with Tailwind CSS and dnd-kit on the front, Next.js Server Actions / API Routes behind it, Turso for data. Follow the 5-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Carbonmade without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 3-4 weekends of focused building. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Carbonmade instead of paying?
- About ~$12 one-time to start and ~$3/mo to run, versus $9.99/mo - $24.99/mo for Carbonmade. Break-even: 1 month.
- What stack should you use to vibe code Carbonmade?
- Next.js with Tailwind CSS and dnd-kit; Next.js Server Actions / API Routes; Turso; plus Cloudflare R2 for image and video asset storage.