Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/leosolar8/mvc-mini-test-project

CreatorPilot — Next.js 14 starter for creators: smart onboarding with Zapier, pricing A/B tests with Stripe + Supabase RLS, a secure progress dashboard with YouTube analytics, and an AI assistant for titles/thumbnails/scripts. Vercel-ready.
https://github.com/leosolar8/mvc-mini-test-project

ab-testing analytics creator-economy dashboard framer-motion growth nextjs15 openai pricing replicate saas-starter stripe subscription supabase-db tailwindcss typescript3 youtube-data-api zapier

Last synced: 2 months ago
JSON representation

CreatorPilot — Next.js 14 starter for creators: smart onboarding with Zapier, pricing A/B tests with Stripe + Supabase RLS, a secure progress dashboard with YouTube analytics, and an AI assistant for titles/thumbnails/scripts. Vercel-ready.

Awesome Lists containing this project

README 

          
# 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



```bash

git clone 

cd million-club-view

npm install

```



### 2. Environment Setup



Copy the example environment file and configure your API keys:



```bash

cp env.example .env.local

```



Configure the following environment variables:



```env

# 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:

   ```sql

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

   ```

3. Optionally run the seed data:

   ```sql

   -- 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



```bash

npm run dev

```



Open [http://localhost:3000](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



```bash

# 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: support@millionviewclub.com

- 💬 Discord: [Join our community](https://discord.gg/millionviewclub)

- 📖 Documentation: [docs.millionviewclub.com](https://docs.millionviewclub.com)



---



**Built with ❤️ for the creator economy**