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

> Portfolio website builder for photographers, artists and designers

- Site: https://pixpa.com
- Category: SaaS / Website Builder
- Verdict: **Serious undertaking** (42/100 vibecodeable)
- Estimated effort: 6-8 weeks of part-time work

## Verdict

You can build a personal portfolio and client gallery subset, but replicating the full visual builder, multi-tenant media engine, and e-commerce workflows requires substantial engineering time.

While AI coding tools excel at scaffolding Next.js frontends and basic database schemas, Pixpa represents a sprawling multi-system SaaS. Replicating the visual template editor with live customization, high-resolution image processing pipelines, token-protected client proofing galleries, and zero-commission checkout flows involves heavy state management and edge cases. A solo developer will spend weeks wrestling with file upload chunking, responsive layout schemas, and media storage costs rather than just using an existing tool.

### What you can't replicate

- 12 years of battle-tested template polish and responsive layout edge cases
- Established print lab fulfillment integrations like WHCC
- The zero-friction community trust and human support network

## What it does

An all-in-one portfolio website builder, client proofing gallery system, and zero-commission e-commerce store tailored for creatives.

### Core features

- Visual drag-and-drop website builder with responsive template rendering
- Client proofing galleries with multi-user favoriting and image comments
- Secure high-resolution original file delivery and watermarking
- Zero-commission e-commerce store for physical products, prints, and digital downloads
- Integrated blogging engine with categories and RSS feeds
- On-site SEO management, custom forms, and marketing popups
- Custom domain mapping and SSL termination

## The business

### Pricing

- Basic: $5.40/mo (billed yearly)
- Creator: $9.00/mo (billed yearly)
- Professional: $12.00/mo (billed yearly)
- Advanced: $15.00/mo (billed yearly)

Founded 2013.
Team size: Unknown.

## The hard parts

- Building a performant visual page builder with reliable live-preview and custom CSS overrides
- Architecting secure multi-gigabyte RAW/JPEG asset upload, thumbnail generation, and CDN delivery pipelines
- Implementing granular access control lists (ACLs) and tokenized private URLs for client proofing galleries
- Handling transactional order workflows, inventory tracking, and localized tax/shipping rules without commissions

## How to vibe code Pixpa

### Prerequisites

- Node.js (free): Required runtime for modern full-stack web development.
- GitHub (free): Code repository hosting and deployment integration.

### Recommended AI tools

- Claude Code: Best-in-class multi-file agentic coding tool for scaffolding complex full-stack features and debugging workflows.
- Cursor: Ideal AI-native editor for iterative UI component building and reviewing complex frontend diffs.

### Stack

- Frontend: Next.js
- Backend: Next.js API Routes
- Database: Supabase
- Auth: better-auth
- Payments: Stripe
- Other: Tailwind CSS, Cloudflare R2, Resend

### Hosting

- Vercel (Hosting the Next.js frontend and serverless API functions with zero-config deploys.): $0/mo (Hobby tier)
- Supabase (Relational database storage for users, templates, products, and gallery metadata.): $0/mo (Free tier)
- Cloudflare R2 (S3-compatible object storage for high-resolution portfolio and client gallery images with zero egress fees.): $0-5/mo

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js application with Tailwind CSS, configure Supabase client connections, and establish core database tables for users, websites, pages, galleries, images, and products.

```
Scrape and initialize a new Next.js project using App Router, TypeScript, and Tailwind CSS. Configure Supabase as the relational database provider. Create a comprehensive database schema migration file using SQL that includes tables for 'users', 'sites' (linking to users with custom domain fields), 'pages' (storing JSON layout blocks and custom CSS), 'galleries' (with token fields for secure client access), 'images' (storing R2 asset URLs, original filenames, dimensions, and gallery references), and 'products' (for e-commerce items, pricing, and inventory). Set up proper foreign key constraints, indexes on gallery tokens and user IDs, and row-level security policies. Ensure all TypeScript types are automatically generated from the database schema.
```

2. **Authentication & User Dashboard** — Implement authentication flows using better-auth and build a creator dashboard to manage sites, navigation, and settings.

```
Integrate better-auth into the Next.js application supporting email/password and magic link authentication. Build a protected creator dashboard layout under `/dashboard` featuring sidebar navigation for Sites, Client Galleries, E-commerce, and Settings. Create API endpoints and React server components that allow a logged-in user to create a new portfolio site, update their site title, map a custom domain string, and configure basic site-wide branding settings stored in Supabase.
```

3. **Visual Website Builder & Template Renderer** — Build a block-based visual editor allowing creators to assemble portfolio pages, arrange galleries, and apply custom CSS overrides.

```
Build a visual page builder interface at `/dashboard/sites/[id]/builder`. Implement a block-based layout engine supporting hero sections, image grids, text blocks, and footer sections. Create a real-time preview canvas that renders these blocks dynamically based on JSON state stored in the 'pages' table. Add a custom CSS/HTML override editor panel that injects custom styles safely scoped to the published portfolio view. Ensure public portfolio pages render responsively at `/p/[siteSlug]/[pageSlug]` with optimized server-side rendering.
```

4. **High-Resolution Media Upload & Cloud Storage Pipeline** — Implement secure multipart file uploads to Cloudflare R2, generating optimized web thumbnails and storing original RAW/JPEG references.

```
Implement an image upload pipeline for portfolio galleries and client proofing. Create a server-side API route that generates pre-signed PUT URLs for Cloudflare R2 storage. Build a drag-and-drop React dropzone component that uploads high-resolution images directly to R2, tracks upload progress, and creates corresponding records in the 'images' table. Ensure background processing generates responsive web variants while preserving original files securely for digital downloads and print fulfillment.
```

5. **Private Client Proofing Galleries & Multi-User Favoriting** — Develop secure token-protected client galleries with multi-user favoriting, comments, and high-resolution file delivery.

```
Build a client gallery proofing system at `/gallery/[token]`. Implement token-based route protection so clients can access private albums without logging into the creator dashboard. Create interactive gallery views supporting lightbox image inspection, image commenting, and multi-user favoriting (allowing families or couples to tag favorite shots collaboratively). Add secure download buttons for individual images or zipped original archives, respecting storage limits and client access permissions.
```

6. **Zero-Commission E-Commerce Store & Checkout** — Build an integrated online store supporting physical products, digital downloads, and Stripe checkout integration with zero platform commissions.

```
Build a zero-commission e-commerce store module allowing creators to list physical products, services, and digital downloads. Create a public storefront view at `/p/[siteSlug]/store` with a shopping cart and checkout flow. Integrate the Stripe API to process payments directly to the creator's connected Stripe account via webhooks. Implement order management views in the dashboard to track fulfillment status, customer shipping addresses, and inventory counts.
```

7. **Marketing, SEO, and Polish** — Add built-in blogging, SEO meta tag management, custom contact forms, marketing popups, and announcement banners.

```
Add marketing and SEO extensions to the portfolio platform. Build a built-in blogging module supporting markdown post creation, categories, and public listing pages. Implement customizable contact and newsletter subscription forms with automatic database storage and email notifications sent via Resend. Create management tools for site-wide SEO meta titles, descriptions, open-graph tags, custom marketing popups, and announcement bars.
```

### Cost vs paying

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

- AI Coding Assistant (Claude Pro / Cursor): $20.00
- Custom Domain (Optional): $12.00/yr
- Total: ~$32.00 one-time

**Ongoing costs (monthly):**

- Vercel Hobby Hosting: $0.00
- Supabase Database Free Tier: $0.00
- Cloudflare R2 Storage (Bandwidth & Assets): ~$2.00/mo
- Total: ~$2.00/mo

- Paying for the SaaS instead: $20.00/mo (Professional Plan)
- Build time: 45-60 hours
- AI tool credits: $20.00 (1 month of Claude Pro / Cursor)
- Break-even: 2 months

## Sources

- [Pixpa Official Website & Pricing Pages](https://pixpa.com)