AI-powered prompts for recreating mobile and web app UIs. Browse a curated library of app screenshots and get one-shot AI prompts optimized for v0, Claude CLI, Cursor, React Native, and SwiftUI.

• Framework: Next.js 16.1 (App Router, React 19, TypeScript)
• Database: PostgreSQL + Drizzle ORM
• Auth: better-auth (email/password, Google OAuth, GitHub OAuth)
• Payments: Lemon Squeezy (checkout, webhooks, customer portal)
• UI: Tailwind CSS 4, shadcn/ui (Radix primitives)
• State: Zustand (client), React Query (caching)
• Validation: Zod

• Browse iOS and Web app screenshots in a responsive grid
• App detail pages with screens, UI elements, and user flows
• Screen patterns and UI element taxonomy
• Highlight screens with badge indicators

• 5 prompt variants per screen: v0/Lovable, Claude CLI, Cursor, React Native, Swift
• Tabbed prompt panel with copy-to-clipboard
• Blurred paywall overlay for free users
• Prompt quality rating (thumbs up/down)

• Email + OAuth authentication (Google, GitHub)
• Save screens to personal library
• Create and organize collections (public/private)
• Rate apps and prompts

• Platform toggle (iOS / Web)
• Sort by Latest, Popular, Top Rated
• Category filtering with multi-select dropdowns
• Screen pattern and UI element filters
• Dedicated search page with combined filters
• Infinite scroll pagination

• Public collection browsing (Featured, Popular, Latest)
• Collection cards with preview thumbnails

• Free tier: full browse access, 50 saves limit
• Pro tier ($29/mo): unlimited prompts, unlimited saves
• Lemon Squeezy checkout integration
• Webhook-driven subscription state management
• Customer billing portal

src/
├── app/
│   ├── (public)/              # Public routes
│   │   ├── discover/apps/     # App browse grid
│   │   ├── apps/[slug]/       # App detail (screens, ui-elements, flows)
│   │   ├── screens/[id]/      # Screen detail
│   │   ├── flows/[id]/        # Flow detail
│   │   ├── search/            # Search with filters
│   │   └── pricing/           # Pricing page
│   ├── (auth)/                # Auth-required routes
│   │   ├── saved/             # Saved screens
│   │   ├── community/         # Public collections
│   │   └── account/           # Profile & subscription
│   ├── api/
│   │   ├── auth/              # better-auth endpoints
│   │   ├── prompts/           # Pro-only prompt API
│   │   ├── checkout/          # Lemon Squeezy checkout
│   │   ├── billing-portal/    # Customer portal
│   │   └── webhooks/          # Lemon Squeezy webhooks
│   └── actions/               # Server actions
├── components/
│   ├── ui/                    # shadcn/ui (do not modify)
│   ├── layout/                # Header
│   ├── apps/                  # App card, grid
│   ├── screens/               # Screen card, grid, modal, UI element card
│   ├── flows/                 # Flow card
│   ├── filters/               # Filter bar, dropdown
│   ├── pricing/               # Pricing modal, Get Pro link
│   └── shared/                # Collection card
├── db/
│   ├── schema/                # Drizzle schema (apps, users, auth)
│   └── index.ts               # Database connection
├── lib/
│   ├── auth/                  # better-auth config & server helpers
│   ├── queries/               # Shared DB queries
│   ├── env.ts                 # Zod-validated environment variables
│   ├── rate-limit.ts          # In-memory rate limiter
│   └── utils.ts               # Utility functions
├── stores/                    # Zustand stores
└── types/                     # TypeScript type definitions

• Node.js 20+
• PostgreSQL 15+
• pnpm (recommended)

Copy .env.example to .env.local and fill in:

DATABASE_URL=postgresql://user:password@localhost:5432/promptui
BETTER_AUTH_SECRET=your-secret-key-min-32-chars
BETTER_AUTH_URL=http://localhost:3000

# OAuth (optional)
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

# Lemon Squeezy (optional for dev)
LEMONSQUEEZY_API_KEY=
LEMONSQUEEZY_WEBHOOK_SECRET=
LEMONSQUEEZY_STORE_ID=
LEMONSQUEEZY_VARIANT_ID=

# Install dependencies
pnpm install

# Push schema to database
pnpm db:push

# Seed data (optional)
pnpm db:seed

# Start dev server
pnpm dev

pnpm db:generate  # Generate migration files
pnpm db:migrate   # Run migrations
pnpm db:push      # Push schema directly (dev)
pnpm db:studio    # Open Drizzle Studio
pnpm db:seed      # Seed sample data

• Server Components for data fetching (zero client JS for browse pages)
• Server Actions for mutations (save, rate, collection ops)
• Rate limiting on all sensitive endpoints (in-memory, 20-30 req/min)
• Env validation via Zod on startup
• Connection pooling optimized for serverless (max 3 connections)