Copy and paste this exact prompt to loveable.dev

Prompt for Loveable: SaaS Product Specification for UGC Ad Generator

Product Name: UGC Studio (User-Generated Content Studio)

Objective: Enable users to create branded UGC ads instantly using AI avatars (via HeyGen) and voice synthesis (via Eleven Labs), with a seamless, consumer-centric experience.

Core Features & Technical Specifications

1. Authentication & Onboarding

• Sign-in Options:
  • Email/Password (with secure hashing + JWT tokens).
  • Google OAuth (Firebase Auth or Auth0).
  • Session management with refresh tokens.
• Profile Creation Flow:
  • Multi-step form (React Hook Form/Zod validation).
  • Fields: Full name, work title (dropdown: "Marketer," "Content Creator," etc.), user intent (multi-select: "Social Ads," "Product Demos," etc.).
  • Dynamic follow-up questions based on intent (e.g., "What’s your industry?").

2. Avatar Library

• UI: Grid layout with lazy-loaded, high-resolution avatar thumbnails (CDN-hosted).
  • Filter avatars by gender, age, ethnicity, and style (corporate/casual).
  • Hover preview with a 3-sec demo video + "Use This Avatar" button.
• Backend: Pre-render 50+ avatars via HeyGen; store metadata (gender, voice compatibility) in PostgreSQL.

3. UGC Ad Creation Screen

• Text Prompt:
  • AI-assisted textbox (React) with character limit (500 chars) and example prompts.
  • Real-time validation for brand name/URL inclusion.
• Voice Selection:
  • Dropdown menu with 20+ Eleven Labs voices (categorized: "Friendly," "Authoritative").
  • Play button for instant voice preview (HTML5 audio + caching).
• Generate Button:
  • Disabled until avatar + voice + valid prompt are selected.
  • Loading state with progress % (WebSocket/Pusher for real-time updates).

4. Async Video Generation

• Job Queue: Celery/RabbitMQ to manage concurrent HeyGen API requests.
  • Users can submit up to 5 simultaneous jobs (configurable).
  • Dashboard queue status: "Pending," "Processing," "Completed" (React state management).