PromptForge - AI Prompt Optimizer SaaS

A fully deployable AI Prompt Optimizer SaaS built with modern tech stack. Transform your prompts for better LLM outputs from GPT-4o, Claude 3.5, and Gemini 1.5 Pro.

Features

• Email + Password Authentication with JWT httpOnly cookies
• Google OAuth (via Supabase Auth)
• Dashboard with search, filter, and history
• Prompt Optimizer with:
  • Multiple LLM models (GPT-4o, Claude 3.5, Gemini 1.5)
  • Chain-of-thought, few-shot, role-playing, JSON mode
  • Side-by-side comparison with quality scores
  • Copy, export to PDF/JSON
• Pro Subscriptions via Stripe
• API Keys management (user provides their own keys)
• Responsive dark/light mode design
• Rate limiting and security middleware

Tech Stack

Frontend

• Vite + React 19
• TypeScript
• Tailwind CSS + shadcn/ui
• TanStack Query
• React Hook Form + Zod
• Framer Motion
• Lucide Icons
• Sonner (toasts)

Backend

• Node.js + Express
• Drizzle ORM
• PostgreSQL (Neon/Supabase)
• JWT Authentication
• Stripe Webhooks
• Helmet + Rate Limiting

Project Structure

promptforge/
├── backend/
│   ├── lib/
│   │   └── db.js          # Database schema & connection
│   ├── middleware/
│   │   └── auth.js        # JWT auth middleware
│   ├── routes/
│   │   ├── auth.js        # Register, login, API keys
│   │   ├── optimize.js    # Prompt optimization
│   │   ├── prompts.js     # CRUD for prompts
│   │   ├── subscriptions.js # Stripe checkout
│   │   ├── webhooks.js    # Stripe webhooks
│   │   └── analytics.js   # Usage analytics
│   ├── server.js          # Express app
│   ├── schema.sql         # Database schema
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── ui/        # shadcn/ui components
│   │   │   └── Navbar.tsx
│   │   ├── hooks/
│   │   │   └── useAuth.ts
│   │   ├── lib/
│   │   │   ├── api.ts     # API client
│   │   │   └── utils.ts
│   │   ├── pages/
│   │   │   ├── LandingPage.tsx
│   │   │   ├── LoginPage.tsx
│   │   │   ├── RegisterPage.tsx
│   │   │   ├── DashboardPage.tsx
│   │   │   ├── OptimizerPage.tsx
│   │   │   ├── SettingsPage.tsx
│   │   │   └── UpgradePage.tsx
│   │   ├── types/
│   │   │   └── index.ts
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── index.css
│   ├── package.json
│   ├── tailwind.config.js
│   ├── vite.config.ts
│   └── index.html
├── package.json
├── vercel.json
└── README.md

Quick Start

Prerequisites

• Node.js 18+
• PostgreSQL database (Neon/Supabase)
• Stripe account
• OpenAI/Anthropic/Google API keys (optional, users can add their own)

Installation

# Clone the repository
cd promptforge

# Install root dependencies
npm install

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

Database Setup

1. Create a PostgreSQL database on Neon or Supabase
2. Run the SQL schema:

# Connect to your database and run:
psql $DATABASE_URL -f backend/schema.sql

Environment Variables

# Backend (.env)
cp backend/.env.example backend/.env
# Edit with your values

# Frontend (.env)
cp frontend/.env.example frontend/.env

Development

# Run both frontend and backend
npm run dev

# Or run separately:
npm run dev:backend  # http://localhost:3001
npm run dev:frontend # http://localhost:5173

Deployment

Option 1: Vercel + Neon (Recommended)

1. Database (Neon)

   • Create project at https://neon.tech
   • Get connection string

2. Stripe

   • Create account at https://stripe.com
   • Create Pro plan product ($9/mo)
   • Get secret key and webhook secret

3. Deploy Backend

   # Install Vercel CLI
   npm i -g vercel
   
   # Deploy
   vercel --prod

4. Deploy Frontend

   • Connect GitHub repo to Vercel
   • Set environment variables
   • Deploy

Option 2: Docker

# Build and run
docker build -t promptforge backend/
docker run -p 3001:3001 promptforge

Environment Variables Reference

Variable	Description	Required
DATABASE_URL	PostgreSQL connection string	Yes
JWT_SECRET	Secret for JWT tokens	Yes
STRIPE_SECRET_KEY	Stripe API key	Yes (for payments)
STRIPE_WEBHOOK_SECRET	Stripe webhook secret	Yes (for payments)
STRIPE_PRO_PRICE_ID	Stripe price ID for Pro plan	Yes (for payments)
FRONTEND_URL	Frontend URL for CORS	Yes

Usage

1. Register/Login - Create an account
2. Add API Keys - Go to Settings and add your OpenAI/Anthropic/Google API keys
3. Optimize Prompts - Enter a prompt, select model and options, click Optimize
4. View History - See all your optimizations in the Dashboard
5. Upgrade Pro - Get unlimited optimizations and premium features

Security Features

• JWT authentication with httpOnly cookies
• Rate limiting (100 req/min, 5 optimizations/min)
• Helmet.js for security headers
• Input validation with Zod
• SQL injection prevention (Drizzle ORM)
• API key encryption (base64)

License

MIT License - feel free to use for personal or commercial projects.

Support

• Create an issue for bugs or feature requests
• Star the repo if you find it useful!

---

Built with ❤️ using React 19, Vite, TypeScript, Tailwind, and Node.js