How to vibe codePixpa

Prerequisites

• Node.jsfree

  Required runtime for modern full-stack web development.

• GitHubfree

  Code repository hosting and deployment integration.

AI coding 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.

Build guide

1. 01Project 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04High-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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Private 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Zero-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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Marketing, 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Pixpa