🚀 Prompt Repository SaaS Platform

A modern, production-ready Next.js application for managing AI prompts with advanced features and professional UI/UX.

✨ Features

Core Features

• 🔍 Smart Search & Discovery - Advanced search with filters, tags, and AI-powered recommendations
• 📚 Browse & Organize - Grid/list view, categories, favorites, and personal collections
• ⭐ Community Ratings - Rate and review prompts to help others discover quality content
• 📤 Export Functionality - Export prompts to JSON, CSV, or Markdown formats
• 👥 User Management - Authentication with Google/GitHub OAuth
• 🎨 Professional UI/UX - Dark theme with glassmorphism effects and smooth animations

Technical Features

• ⚡ Next.js 14+ with App Router for optimal performance
• 🔷 TypeScript for type safety and better developer experience
• 🎨 Tailwind CSS with custom design system and animations
• 🔐 NextAuth.js for secure authentication
• 🗄️ Prisma ORM with SQLite database (production-ready for PostgreSQL)
• 🔄 React Query for efficient data fetching and caching
• 🎭 Framer Motion for smooth animations and micro-interactions
• 📱 Responsive Design - Mobile-first approach with accessibility compliance

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Git

Installation

1. Clone the repository

git clone <your-repo-url>
cd prompt-repository-saas

2. Install dependencies

npm install

3. Set up environment variables

cp .env.example .env.local

Edit .env.local with your configuration:

# Next.js
NEXTAUTH_SECRET=your-nextauth-secret-key-here
NEXTAUTH_URL=http://localhost:3000

# Database
DATABASE_URL="file:./dev.db"

# OAuth Providers (Optional - for authentication)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GITHUB_CLIENT_ID=your-github-client-id  
GITHUB_CLIENT_SECRET=your-github-client-secret

4. Set up the database

# Generate Prisma client
npm run db:generate

# Push schema to database
npm run db:push

# Seed with sample data
npm run db:seed

5. Start the development server

npm run dev

Visit http://localhost:3000 to see your application!

📁 Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── api/               # API routes
│   ├── prompts/           # Prompt browsing pages
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Homepage
├── components/            # React components
│   ├── ui/                # Reusable UI components
│   ├── navbar.tsx         # Navigation component
│   ├── hero.tsx           # Landing page hero
│   ├── features.tsx       # Features section
│   ├── prompt-card.tsx    # Prompt display card
│   └── ...
├── lib/                   # Utility functions
│   ├── prisma.ts          # Prisma client
│   ├── auth.ts            # Authentication config
│   └── utils.ts           # Helper functions
prisma/
├── schema.prisma          # Database schema
└── seed.ts                # Database seeding script

🎨 Design System

Color Palette

• Primary: Blue (#3B82F6) to Purple (#8B5CF6) gradients
• Secondary: Various accent colors for categories
• Background: Dark gradients with glassmorphism effects
• Text: White primary, gray secondary with proper contrast ratios

Components

• Glass Cards: Subtle transparency with backdrop blur
• Gradient Buttons: Smooth hover states and micro-interactions
• Typography: Inter font family with consistent sizing scale
• Spacing: 4px base unit (4, 8, 12, 16, 20, 24px)
• Animations: Framer Motion for page transitions and interactions

🗄️ Database Schema

Core Models

• User: Authentication and profile information
• Prompt: Core prompt data with content, metadata, and relationships
• Category: Prompt categorization with colors and icons
• Favorite: User bookmark system
• Rating: Community rating and review system

Relationships

• Users can create multiple prompts
• Prompts belong to categories
• Users can favorite and rate prompts
• Many-to-many relationships for complex data modeling

🔌 API Endpoints

Prompts

• GET /api/prompts - List prompts with filtering, search, and pagination
• POST /api/prompts - Create new prompt
• GET /api/prompts/[id] - Get specific prompt details
• PUT /api/prompts/[id] - Update prompt (owner only)
• DELETE /api/prompts/[id] - Delete prompt (owner only)

Categories

• GET /api/categories - List all categories with prompt counts
• POST /api/categories - Create new category (admin only)

Search & Discovery

• GET /api/search - Advanced search across prompts
• GET /api/prompts/trending - Get trending prompts
• GET /api/prompts/featured - Get featured/curated prompts

🚀 Deployment

Vercel (Recommended)

1. Push code to GitHub
2. Connect repository to Vercel
3. Set environment variables in Vercel dashboard
4. Deploy automatically on push

Manual Deployment

# Build the application
npm run build

# Start production server
npm start

Database Migration

For production, update DATABASE_URL to PostgreSQL:

DATABASE_URL="postgresql://user:pass@host:5432/dbname"

🔧 Development

Scripts

npm run dev          # Start development server
npm run build        # Build for production  
npm run start        # Start production server
npm run lint         # Run ESLint
npm run db:generate  # Generate Prisma client
npm run db:push      # Push schema changes
npm run db:seed      # Seed database with sample data

Code Quality

• ESLint - Code linting and formatting rules
• Prettier - Consistent code formatting
• TypeScript - Strict type checking enabled
• Husky - Git hooks for code quality (optional)

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Write meaningful commit messages
• Test your changes thoroughly
• Update documentation as needed
• Follow the existing code style and patterns

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js - The React framework for production
• Tailwind CSS - A utility-first CSS framework
• Prisma - Modern database toolkit
• Radix UI - Low-level UI primitives
• Framer Motion - Production-ready motion library
• Lucide React - Beautiful & consistent icons

---

Built with ❤️ for the AI community

For questions or support, please open an issue or contact the development team.