magic-a

byLucifer

Build a production-ready, revenue-generating micro SaaS similar to Carrd (one-page website builder). This should be a complete, deployable application with the following specifications: ## PRODUCT OVERVIEW Create a drag-and-drop, browser-based one-page website builder that allows users to: - Create unlimited single-page websites (landing pages, portfolios, link-in-bio, product showcases) - Use 50+ pre-built responsive templates - Customize layouts, colors, fonts, images, and content blocks - Add forms (contact, email signup, payment-enabled) - Connect custom domains with automatic SSL - Publish instantly with subdomain (yoursite.myapp.com) or custom domain ## TECH STACK (optimized for quick launch) - Frontend: React + Next.js 14 (App Router) + Tailwind CSS + shadcn/ui components - Drag-and-drop: dnd-kit or react-beautiful-dnd - Backend: Node.js + Express or Next.js API routes - Database: PostgreSQL (Supabase or Neon) with Prisma ORM - Auth: Clerk or NextAuth (Google/GitHub login) - Hosting: Vercel (frontend) + Supabase (backend/db) - Payments: Stripe (subscription billing) - Domains: Vercel Domains API or custom domain routing - Email: Resend or SendGrid for notifications - Storage: Vercel Blob or AWS S3 for images ## CORE FEATURES (MVP) ### 1. User Authentication - Sign up/login with email + password or Google OAuth - User dashboard to manage all their sites - Profile settings (name, email, password reset) ### 2. Website Builder (Drag-and-Drop Editor) - Visual editor with live preview - Left sidebar: element library (Text, Image, Button, Form, Video, Icons, Social Links, Embed) - Main canvas: drag elements to position, resize, reorder - Right sidebar: element properties (color, font, size, spacing, alignment) - Mobile/tablet/desktop preview toggle - Undo/redo functionality - Auto-save every 5 seconds ### 3. Template Library - 50+ pre-built templates (categories: Portfolio, Landing Page, Product, Event, Link-in-Bio, Coming Soon) - One-click template apply (replaces content, keeps user's branding) - Template preview before applying ### 4. Customization Options - Global site settings: primary color, font family, background color/image - Typography: heading fonts, body fonts, font sizes - Spacing: padding, margins, section gaps - Animations: fade-in, slide-up, subtle hover effects - Custom code injection (Pro plans only): HTML/CSS/JS in head/body ### 5. Forms & Integrations - Contact form (sends to user's email) - Email signup form (integrates with Mailchimp, ConvertKit, or custom webhook) - Payment form (Stripe Checkout integration for selling products/services) - Embed widgets: YouTube, Vimeo, Google Maps, Typeform, Calendly, Gumroad ### 6. Publishing & Domains - Free subdomain: username.myapp.com - Custom domain support (CNAME routing via Vercel or custom DNS setup) - Automatic SSL certificate (Let's Encrypt) - One-click publish button - Site status (draft/published) ### 7. Analytics (Basic) - Visitor count (daily/weekly/monthly) - Page views - Traffic sources (direct, social, search) - Google Analytics integration (user can paste their GA4 ID) ### 8. Pricing & Monetization (Stripe) - FREE plan: 3 sites, subdomain only, "Made with [YourApp]" badge - PRO LITE: $9/year - 1 site, custom domain, remove badge - PRO STANDARD: $19/year - 10 sites, all features, custom domains, forms - PRO PLUS: $49/year - 25 sites, payment forms, custom code, priority support Implement Stripe Checkout with: - Annual billing only (simpler than monthly) - Customer portal for subscription management - Webhook handling for payment success/failure/cancellation ## DATABASE SCHEMA (Prisma) User { id: String (UUID) email: String (unique) name: String stripeCustomerId: String plan: Enum (FREE, PRO_LITE, PRO_STANDARD, PRO_PLUS) createdAt: DateTime } Site { id: String (UUID) userId: String (FK) name: String slug: String (unique, for subdomain) customDomain: String (nullable, unique) template: String config: JSON (colors, fonts, etc.) content: JSON (all elements and their properties) published: Boolean analytics: JSON (views, sources) createdAt: DateTime updatedAt: DateTime } Subscription { id: String (UUID) userId: String (FK) stripeSubscriptionId: String status: Enum (active, canceled, past_due) currentPeriodEnd: DateTime } ## UI/UX REQUIREMENTS - Clean, modern interface (inspired by Carrd, Webflow, Framer) - Dark mode support - Mobile-responsive editor - Onboarding tutorial (interactive walkthrough for first-time users) - Empty states with helpful CTAs - Toast notifications for actions (save, publish, error) - Loading states for async actions ## SECURITY & COMPLIANCE - Rate limiting on API routes - Input sanitization (XSS prevention) - CSRF protection - Secure password hashing (bcrypt) - GDPR-compliant (user data export/delete) - Terms of Service + Privacy Policy pages ## DEPLOYMENT - Deploy to Vercel with environment variables - Set up Supabase project with migrations - Configure Stripe webhooks - Add custom domain DNS instructions in docs - Include .env.example file with all required variables ## BONUS FEATURES (If Time Permits) - AI-powered content generator (fill template with AI-written copy) - A/B testing (split traffic between two versions) - Team collaboration (invite editors) - Site cloning (duplicate existing site) - Version history (restore previous versions) - Export site as HTML/CSS (Pro Plus feature) ## DELIVERABLES 1. Complete Next.js project with all components 2. Prisma schema with migrations 3. Stripe integration (checkout, webhooks, customer portal) 4. Drag-and-drop editor with live preview 5. Template library with 10+ starter templates 6. User dashboard to manage sites 7. Public site rendering (SSR for SEO) 8. Documentation (README.md with setup instructions) ## SUCCESS METRICS - User can sign up → create a site → publish in under 5 minutes - Stripe checkout works end-to-end - Custom domains resolve correctly - Sites load in under 1 second (Lighthouse score >90) - Mobile-responsive out of the box Build this as a production-ready MVP that can launch and start generating revenue within 7 days.