# AI Prompt Manager — Full-Stack Web Application Development Prompt ---- ## 🎯 Project Overview You are an expert full-stack engineer and UI/UX designer. Build a **production-ready AI Prompt Manager web application** that allows users to create, organize, search, share, and manage AI prompts. The application must be beautiful, responsive, accessible, and scalable to support unlimited prompts. ---- ## 🏗️ Tech Stack & Infrastructure ### Frontend - **Framework**: Next.js 14+ (App Router) - **Language**: TypeScript (strict mode) - **Styling**: Tailwind CSS v3+ with a custom design system - **UI Components**: shadcn/ui (built on Radix UI primitives) for accessible, composable components - **Icons**: Lucide React - **Fonts**: Use Google Fonts — pair a refined serif or geometric display font (e.g., *DM Serif Display* or *Playfair Display*) with a clean sans-serif body font (e.g., *DM Sans* or *Outfit*) - **Animations**: Framer Motion for page transitions and micro-interactions - **Form Handling**: React Hook Form + Zod for schema validation - **State Management**: Zustand for global UI state; React Query (TanStack Query) for server state and caching - **Toast Notifications**: Sonner ### Backend - **API**: Next.js Route Handlers (REST API within the same project) - **ORM**: Drizzle ORM (type-safe, lightweight) - **Database**: Vercel Postgres (Neon-based) - **File Storage**: Cloudflare R2 (S3-compatible) via AWS SDK v3 - **Auth** *(optional but recommended)*: NextAuth.js v5 or Clerk for user authentication ### DevOps / Deployment - **Hosting**: Vercel (with Edge Runtime where appropriate) - **Environment Variables**: Managed via Vercel dashboard and `.env.local` --- ## 🗄️ Database Schema (Vercel Postgres via Drizzle ORM) Design the following tables. Use UUIDs as primary keys. ### `prompts` table ```sql id UUID PRIMARY KEY DEFAULT gen_random_uuid() title VARCHAR(255) NOT NULL description TEXT content TEXT NOT NULL -- The actual prompt text category VARCHAR(100) tags TEXT[] -- Array of tag strings model VARCHAR(100) -- e.g. "GPT-4o", "Claude 3.5", "Gemini 1.5" variables JSONB -- Placeholder variables: [{name, description, default}] attachments JSONB -- Array of R2 file metadata: [{key, name, url, size, type}] is_public BOOLEAN DEFAULT false -- Controls share visibility share_token UUID DEFAULT gen_random_uuid() -- Unique token for share links use_count INTEGER DEFAULT 0 -- Track how many times prompt was copied/used created_at TIMESTAMPTZ DEFAULT now() updated_at TIMESTAMPTZ DEFAULT now() ``` ### `categories` table ```sql id UUID PRIMARY KEY DEFAULT gen_random_uuid() name VARCHAR(100) NOT NULL UNIQUE color VARCHAR(7) -- Hex color for category badge icon VARCHAR(50) -- Lucide icon name created_at TIMESTAMPTZ DEFAULT now() ``` --- ## ☁️ Cloudflare R2 Integration - Use `@aws-sdk/client-s3` and `@aws-sdk/s3-request-presigner` for R2 (S3-compatible API) - Generate **presigned URLs** server-side for secure uploads and downloads - Store file metadata (key, name, size, MIME type, public URL) in the `attachments` JSONB column of the prompt - Support file types: images (PNG, JPG, WEBP), text files (TXT, MD), JSON, and PDFs - Maximum file size: 10MB per file, up to 5 attachments per prompt - On prompt deletion, delete associated R2 files via the S3 API - Implement a `/api/upload` route handler that: 1. Validates file type and size 2. Generates a unique R2 object key: `prompts/{promptId}/{timestamp}-{filename}` 3. Returns a presigned PUT URL + the final public URL to the client --- ## 🔌 API Routes (Next.js Route Handlers) Implement the following REST endpoints: ### Prompts | Method | Endpoint | Description | |--------|----------|-------------| | GET | `/api/prompts` | List/search prompts with pagination | | POST | `/api/prompts` | Create a new prompt | | GET | `/api/prompts/[id]` | Get a single prompt by ID | | PUT | `/api/prompts/[id]` | Update a prompt | | DELETE | `/api/prompts/[id]` | Delete a prompt + R2 files | | POST | `/api/prompts/[id]/copy` | Increment use_count, return prompt text | | GET | `/api/prompts/share/[token]` | Fetch a prompt by share token (public) | ### Search (GET `/api/prompts`) Support these query parameters: - `q` — Full-text search across `title`, `description`, `content`, `tags` - `category` — Filter by category name - `model` — Filter by AI model - `tags` — Comma-separated tag filter - `sort` — `created_at`, `updated_at`, `use_count`, `title` - `order` — `asc` | `desc` - `page` — Page number (default: 1) - `limit` — Items per page (default: 20, max: 100) Implement **full-text search** using Postgres `tsvector` and `to_tsquery`, or use `ILIKE` for simpler implementation. Also use Drizzle's `sql` template for complex queries. ### Upload | Method | Endpoint | Description | |--------|----------|-------------| | POST | `/api/upload/presign` | Get a presigned R2 upload URL | | DELETE | `/api/upload/[key]` | Delete a file from R2 | ### Categories | Method | Endpoint | Description | |--------|----------|-------------| | GET | `/api/categories` | List all categories | | POST | `/api/categories` | Create a category | | DELETE | `/api/categories/[id]` | Delete a category | --- ## 🎨 Design System & UI Theme ### Color Palette ```css /* Use these as CSS variables in globals.css */ --background: #FAFAF8; /* warm off-white */ --surface: #FFFFFF; /* pure white for cards */ --surface-elevated: #F5F4F0; /* slightly warm grey for hover states */ --border: #E8E6E0; /* warm light border */ --border-muted: #F0EEE9; /* subtle border */ --text-primary: #1A1917; /* near-black warm */ --text-secondary: #6B6860; /* medium warm grey */ --text-muted: #A09D97; /* light warm grey */ --accent: #2563EB; /* blue accent */ --accent-hover: #1D4ED8; --accent-subtle: #EFF6FF; /* light blue bg */ --success: #16A34A; --warning: #D97706; --destructive: #DC2626; --shadow-sm: 0 1px 2px rgba(26,25,23,0.06); --shadow-md: 0 4px 12px rgba(26,25,23,0.08); --shadow-lg: 0 8px 24px rgba(26,25,23,0.10); ``` ### Typography Scale - **Display** (app name, hero): 2.25rem–3rem, display font, weight 600–700 - **Heading 1**: 1.875rem, weight 600 - **Heading 2**: 1.5rem, weight 600 - **Heading 3**: 1.25rem, weight 500 - **Body**: 0.9375rem, weight 400, line-height 1.6 - **Label**: 0.8125rem, weight 500, tracking 0.01em - **Caption/Meta**: 0.75rem, weight 400, text-muted ### Component Tokens - **Border radius**: cards `rounded-xl`, inputs `rounded-lg`, badges `rounded-full`, buttons `rounded-lg` - **Card style**: `bg-white border border-[--border] shadow-[--shadow-sm] rounded-xl` - **Focus rings**: 2px offset, accent color, accessible --- ## 🧩 Application Pages & Components ### 1. Layout Components #### `

` - Logo/brand mark on the left: "PromptVault" (or your chosen name) with a small geometric icon - Center: Global search bar (visible on desktop; collapses to icon on mobile) - Right: "New Prompt" CTA button + optional user avatar/auth state - Sticky on scroll with a subtle frosted glass effect (`backdrop-blur-sm bg-white/80 border-b`) - Height: 64px desktop, 56px mobile #### `

Edit prompt

Basic info

Prompt content

Variables

Attachments

Settings