Quick.AI

A full-stack AI-powered SaaS platform for text generation and image creation — built on the PERN stack with Clerk authentication, Gemini, and OpenAI.

---

🛠 Tech Stack

Frontend

Backend

Database

Auth & Billing

AI / APIs

---

✨ Features

• 🤖 AI Text Generation — Powered by Google Gemini for fast, accurate text prompts
• 🎨 AI Image Generation — Powered by OpenAI's image generation API
• 🔐 Authentication & Billing — Clerk handles sign-up, sign-in, and subscription billing
• 🗄️ PostgreSQL on NeonDB — Serverless, scalable database for user and usage data
• ⚡ Vite + React — Lightning-fast frontend with hot module replacement
• 💨 Tailwind CSS — Utility-first styling for a clean, responsive UI
• 🔄 Axios — HTTP client for clean API communication between frontend and backend
• 🛡️ Express Middleware — Auth guards, error handling, and request validation on the backend

---

📁 Project Structure

quick-ai/
├── client/                   # Vite + React frontend
│   ├── src/
│   │   ├── components/       # Reusable UI components
│   │   ├── pages/            # Route-level pages
│   │   ├── lib/              # Axios instance & helpers
│   │   └── main.jsx
│   ├── tailwind.config.js
│   └── vite.config.js
│
├── server/                   # Express backend
│   ├── controllers/          # Route handler logic
│   ├── middleware/           # Auth, error, validation middleware
│   ├── routes/               # API route definitions
│   ├── db/                   # NeonDB / PostgreSQL connection
│   └── index.js
│
└── README.md

---

🚀 Getting Started

Prerequisites

• Node.js ≥ 18
• A NeonDB account and database URL
• A Clerk account (API keys for auth + billing)
• Google Gemini API key
• OpenAI API key

1. Clone the repo

git clone https://github.com/theubaidistan/quick-ai.git
cd quick-ai

2. Configure environment variables

server/.env

DATABASE_URL=your_neondb_connection_string
CLERK_SECRET_KEY=your_clerk_secret_key
GEMINI_API_KEY=your_gemini_api_key
OPENAI_API_KEY=your_openai_api_key
PORT=5000

client/.env

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_API_BASE_URL=http://localhost:5000

3. Install dependencies & run

# Backend
cd server
npm install
npm run dev

# Frontend (in a new terminal)
cd client
npm install
npm run dev

---

🌐 Deployment

Service	Platform
Frontend	Vercel
Backend	Vercel
Database	NeonDB (Serverless PostgreSQL)

---

📚 Course Credit

Built as part of a full-stack JavaScript learning journey following Jonas Schmedtmann's courses on Udemy.

---

👨‍💻 Author

Ubaidistan

• GitHub: @theubaidistan
• Live: quick-ai-jet.vercel.app