ModelHub - Premium Modeling Agency Platform 🎭

A comprehensive role-based modeling agency website built with Next.js, TypeScript, Tailwind CSS, ShadCN, and PostgreSQL.

🚀 Features

Multi-Role System

• Models: Portfolio management, booking system, analytics
• Clients: Model discovery, project posting, direct booking
• Agencies: Team management, white-label options, advanced tools
• Admins: Full platform management and analytics

Membership Tiers

• Free: Basic profile, 5 photos, community access
• Professional ($29/month): Unlimited photos, priority search, booking system, analytics
• Enterprise ($99/month): API access, white-label, team management, dedicated support

Core Features

• ✅ Modern responsive design with Tailwind CSS
• ✅ Component library with ShadCN/UI
• ✅ Advanced search and filtering
• ✅ Real-time messaging system
• ✅ Secure payment processing (Stripe)
• ✅ Portfolio builder with image management
• ✅ Booking and project management
• ✅ Review and rating system
• ✅ Advanced analytics dashboard
• ✅ Mobile-optimized interface

🛠️ Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS 4, ShadCN/UI
• Database: PostgreSQL with Prisma ORM
• Authentication: NextAuth.js
• Payment: Stripe
• File Upload: Cloudinary/AWS S3
• Deployment: Vercel (recommended)

📋 Prerequisites

• Node.js 18+
• PostgreSQL database
• npm or yarn

🚀 Quick Start

1. Clone and Install Dependencies

git clone <your-repo>
cd modeling
npm install

2. Environment Setup

Copy the example environment file:

cp .env.example .env.local

Update .env.local with your configuration:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/modeling_agency?schema=public"

# NextAuth.js
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-super-secret-nextauth-secret-here"

# Optional: OAuth Providers
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""

# File Upload (choose one)
CLOUDINARY_CLOUD_NAME=""
CLOUDINARY_API_KEY=""
CLOUDINARY_API_SECRET=""

# Payment Processing
STRIPE_PUBLISHABLE_KEY=""
STRIPE_SECRET_KEY=""
STRIPE_WEBHOOK_SECRET=""

3. Database Setup

Initialize Prisma and run migrations:

npx prisma generate
npx prisma migrate dev --name init

Optional: Seed the database with sample data:

npx prisma db seed

4. Start Development Server

npm run dev

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

📂 Project Structure

modeling/
├── app/                    # Next.js app router
│   ├── (auth)/            # Authentication pages
│   ├── (dashboard)/       # Protected dashboard pages
│   ├── api/               # API routes
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # Reusable UI components
│   ├── ui/               # ShadCN components
│   ├── layout/           # Layout components
│   └── forms/            # Form components
├── lib/                   # Utility functions
├── types/                 # TypeScript type definitions
├── prisma/               # Database schema and migrations
└── public/               # Static assets

🎨 Design System

Color Palette

• Primary: Purple gradient (#8B5CF6 → #EC4899)
• Secondary: Neutral grays for text and backgrounds
• Accent: Pink (#EC4899) for highlights and CTAs

Typography

• Font: Inter (Google Fonts)
• Headings: Bold, tracking-tight
• Body: Regular weight, good contrast

Components

All UI components are built with ShadCN/UI and are fully customizable.

🔧 Key Implementation Suggestions

1. Authentication & Authorization

// Implement role-based access control
const requireAuth = (roles: UserRole[]) => {
  // Check user role and permissions
}

2. File Upload System

// Use Cloudinary for image optimization
const uploadImage = async (file: File) => {
  // Auto-resize, optimize, and generate thumbnails
}

3. Search & Filtering

// Implement advanced search with faceted filters
const searchModels = (filters: ModelSearchFilters) => {
  // Location, skills, rates, availability
}

4. Payment Integration

// Stripe for subscription management
const createSubscription = (tier: MembershipTier) => {
  // Handle tier upgrades/downgrades
}

5. Real-time Features

// WebSocket for live messaging
const sendMessage = (messageData: Message) => {
  // Real-time chat between users
}

📊 Database Schema Highlights

User Management

• Multi-role system (Admin, Model, Client, Agency)
• Flexible profile system with role-specific fields
• Membership tier management

Portfolio System

• Unlimited image storage for Pro/Enterprise
• Image optimization and thumbnail generation
• Portfolio categorization and tagging

Booking System

• Project-based booking workflow
• Status tracking (Pending, Confirmed, Completed)
• Integration with payment system

🚀 Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Add environment variables in Vercel dashboard
3. Deploy automatically on push to main branch

Environment Variables for Production

DATABASE_URL="your-production-postgres-url"
NEXTAUTH_URL="https://your-domain.com"
NEXTAUTH_SECRET="production-secret"
# ... other production variables

🔒 Security Features

• ✅ Input validation with Zod
• ✅ CSRF protection
• ✅ Rate limiting
• ✅ Secure file uploads
• ✅ SQL injection prevention (Prisma)
• ✅ XSS protection

📈 Performance Optimizations

• ✅ Image optimization with Next.js
• ✅ Code splitting and lazy loading
• ✅ CDN for static assets
• ✅ Database query optimization
• ✅ Caching strategies

🧪 Testing

# Run unit tests
npm run test

# Run integration tests
npm run test:integration

# Run e2e tests
npm run test:e2e

📱 Mobile Experience

The platform is fully responsive and optimized for mobile devices:

• Touch-friendly interface
• Progressive Web App (PWA) capabilities
• Offline functionality for basic features

🔄 API Documentation

Models API

• GET /api/models - Search and filter models
• POST /api/models - Create model profile
• PUT /api/models/:id - Update model profile

Bookings API

• GET /api/bookings - Get user bookings
• POST /api/bookings - Create new booking
• PUT /api/bookings/:id/status - Update booking status

Payments API

• POST /api/payments/create-checkout - Create Stripe checkout
• POST /api/payments/webhook - Handle Stripe webhooks

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🆘 Support

• 📧 Email:
• 💬 Discord:
• 📚 Documentation:

---

ModelHub - Connecting talent with opportunity in the modeling industry. ✨