Million View Club - Creator Growth Platform

A comprehensive Next.js 14 application for content creators to accelerate their journey to viral success with AI-powered tools, analytics, and growth strategies.

🚀 Features

1. Smart Onboarding Funnel

• Multi-step form with smooth animations using Framer Motion
• Personalized experience based on creator type and goals
• A/B testing for different onboarding flows
• Zapier webhook integration for marketing automation
• Supabase storage with RLS policies

2. Pricing Experimentation Sandbox

• Stripe Checkout integration with multiple pricing tiers
• A/B testing for different trial lengths and pricing strategies
• Subscription management with customer portal
• Webhook handling for subscription lifecycle events
• Real-time subscription status updates

3. Creator Progress Dashboard

• Secure, authenticated dashboard with role-based access
• YouTube Data API integration for real-time analytics
• Progress tracking towards growth milestones
• Interactive charts and visualizations using Recharts
• Responsive design optimized for all devices

4. AI Video/Thumbnail Assistant

• OpenAI GPT-4 integration for content generation
• Replicate API for AI-powered thumbnail image generation
• Three main tools:
  • Video Title Generator: Creates viral, click-worthy titles
  • Thumbnail Ideas: Provides detailed thumbnail concepts + generated images
  • Script Outlines: Structures video content with hooks and CTAs
• Generation history and usage tracking
• Rate limiting for free vs. paid users

🛠️ Tech Stack

• Framework: Next.js 14 (App Router) with TypeScript
• Database: Supabase (PostgreSQL with real-time subscriptions)
• Authentication: Supabase Auth with Google OAuth
• Payments: Stripe with webhook handling
• Styling: Tailwind CSS with custom design system
• Animations: Framer Motion for smooth UI interactions
• Charts: Recharts for data visualization
• AI Services: OpenAI GPT-4 + Replicate for image generation
• External APIs: YouTube Data API v3
• Deployment: Vercel (optimized configuration)

📁 Project Structure

src/
├── app/                          # Next.js 14 App Router
│   ├── (auth)/                   # Authentication routes
│   ├── api/                      # API endpoints
│   │   ├── ai/                   # AI generation endpoints
│   │   ├── webhooks/             # Stripe & Zapier webhooks
│   │   └── youtube/              # YouTube API integration
│   ├── dashboard/                # Protected dashboard routes
│   ├── onboarding/               # Multi-step onboarding
│   └── pricing/                  # Pricing & subscription pages
├── components/                   # Reusable React components
│   ├── auth/                     # Authentication forms
│   ├── dashboard/                # Dashboard-specific components
│   ├── landing/                  # Landing page sections
│   ├── onboarding/               # Onboarding flow components
│   ├── pricing/                  # Pricing components
│   └── ui/                       # Base UI components
├── lib/                          # Utility libraries
│   ├── providers/                # React context providers
│   ├── ab-testing.ts             # A/B testing logic
│   ├── ai.ts                     # AI service integrations
│   ├── stripe.ts                 # Stripe configuration
│   ├── supabase.ts               # Database client
│   ├── utils.ts                  # Helper functions
│   └── youtube.ts                # YouTube API wrapper
├── types/                        # TypeScript type definitions
└── globals.css                   # Global styles

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• Supabase account and project
• Stripe account (test mode for development)
• YouTube Data API key
• OpenAI API key
• Replicate API token

1. Clone and Install

git clone <repository-url>
cd million-club-view
npm install

2. Environment Setup

Copy the example environment file and configure your API keys:

cp env.example .env.local

Configure the following environment variables:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Stripe Configuration
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable_key
STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret

# YouTube Data API
YOUTUBE_API_KEY=your_youtube_data_api_key

# OpenAI API
OPENAI_API_KEY=sk-your_openai_api_key

# Replicate API
REPLICATE_API_TOKEN=r8_your_replicate_token

# Zapier Webhook (optional)
ZAPIER_WEBHOOK_URL=https://hooks.zapier.com/hooks/catch/your_webhook_id

# App Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret
AB_TEST_ENABLED=true

3. Database Setup

1. Create a new Supabase project
2. Run the database migrations:

   -- Copy and run the contents of supabase/migrations/001_initial_schema.sql

3. Optionally run the seed data:

   -- Copy and run the contents of supabase/seed.sql

4. Stripe Configuration

1. Create products and prices in your Stripe dashboard
2. Update the price IDs in src/lib/stripe.ts
3. Set up webhook endpoints for subscription events
4. Configure webhook secret in environment variables

5. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

🎯 Key Features Walkthrough

A/B Testing System

The app includes a sophisticated A/B testing framework that allows you to experiment with:

• Pricing Strategies: Different monthly/yearly prices and trial lengths
• Onboarding Flows: Skip certain steps or modify the sequence
• UI Components: Test different layouts and messaging

Users are automatically assigned to test groups, and you can analyze conversion rates through the dashboard.

AI Content Generation

The AI assistant provides three main tools:

1. Video Titles: Uses GPT-4 to generate 5 click-worthy title variations
2. Thumbnail Ideas: Creates detailed thumbnail concepts + actual images via Replicate
3. Script Outlines: Structures video content with hooks, main points, and CTAs

All generations are saved to the database for history tracking and usage analytics.

YouTube Integration

Connect YouTube channels to access:

• Real-time subscriber and view counts
• Video performance metrics
• Channel analytics and growth tracking
• Personalized AI recommendations based on actual content

Subscription Management

Full Stripe integration including:

• Multiple pricing tiers with trial periods
• A/B tested pricing experiments
• Subscription lifecycle management
• Customer portal for plan changes
• Usage-based rate limiting

🚀 Deployment

Vercel Deployment (Recommended)

1. Connect your GitHub repository to Vercel
2. Configure environment variables in the Vercel dashboard
3. Deploy with automatic CI/CD

# Or deploy manually
npm run build
vercel --prod

Environment Variables for Production

Ensure all environment variables are configured in your deployment platform:

• Set NEXTAUTH_URL to your production domain
• Use production API keys for all services
• Configure webhook URLs to point to your production endpoints

Database Migrations

Run the database schema in your production Supabase instance:

1. Copy the contents of supabase/migrations/001_initial_schema.sql
2. Execute in your Supabase SQL editor
3. Enable Row Level Security (RLS) policies
4. Optionally run seed data for A/B test experiments

🔧 Development

Available 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 type-check - Run TypeScript compiler

Code Organization

• Components: Follow atomic design principles with reusable UI components
• API Routes: RESTful endpoints with proper error handling and validation
• Database: Normalized schema with RLS policies for security
• Types: Comprehensive TypeScript definitions for type safety

Testing Strategy

• A/B Testing: Built-in framework for experimentation
• Error Handling: Comprehensive error boundaries and API error handling
• Performance: Optimized with Next.js 14 App Router and React Server Components
• Security: RLS policies, authentication middleware, and input validation

📊 Analytics & Monitoring

The application includes built-in analytics for:

• User onboarding conversion rates
• A/B test performance metrics
• AI generation usage patterns
• Subscription conversion and churn
• YouTube channel growth tracking

🤝 Contributing

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

📄 License

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

🆘 Support

For support and questions:

• 📧 Email: [email protected]
• 💬 Discord: Join our community
• 📖 Documentation: docs.millionviewclub.com

---

Built with ❤️ for the creator economy