Developer Documentation Overview

Welcome to the comprehensive developer documentation for the YouTube Analyzer application. This documentation is designed to help developers understand, maintain, and extend the application's functionality.

What is YouTube Analyzer?

YouTube Analyzer is a SaaS application that provides AI-powered analysis of YouTube channels and videos. Built on top of the Next.js SaaS Starter template, it integrates multiple services to deliver comprehensive YouTube analytics and insights.

Key Features

• YouTube Channel Analysis: Deep-dive analysis of YouTube channels including performance metrics, content strategies, and growth insights
• Video Analysis: Individual video performance analysis with sentiment analysis and engagement metrics
• Auto-Analysis Subscriptions: Automated recurring analysis for channels with configurable trigger types
• Convert Analysis to Subscription: One-click conversion of existing analyses into auto-analysis subscriptions without re-entering channel data
• AI-Powered Insights: Uses OpenAI GPT models to generate human-readable summaries and recommendations
• Credit-based System: Subscription-based credit system powered by Stripe
• Real-time Processing: Streaming analysis results with real-time updates
• Email Notifications: Automated email notifications for completed analyses
• User Management: Complete user authentication and role-based access control

Technology Stack

Frontend

• Next.js 14: React framework with App Router
• TypeScript: Type-safe JavaScript
• Tailwind CSS: Utility-first CSS framework
• Shadcn/ui: Component library built on Radix UI
• React Hook Form: Form handling with validation
• Contentlayer: Content management for documentation

Backend

• Next.js API Routes: Server-side API endpoints
• Prisma: Database ORM with PostgreSQL
• Auth.js v5: Authentication system
• Stripe: Payment processing and subscription management
• Resend + React Email: Email service
• OpenAI API: AI-powered content generation

Infrastructure

• PostgreSQL: Primary database (Neon/Supabase)
• Vercel: Hosting and deployment
• YouTube Data API v3: YouTube data integration
• Cron Jobs: Scheduled tasks for maintenance and automation

Project Structure

The application follows Next.js 14 App Router conventions with a well-organized directory structure:

youtube-analyzer/
├── app/                    # Next.js App Router pages and API routes
├── components/             # Reusable React components
├── content/               # Documentation and blog content
├── config/                # Configuration files
├── lib/                   # Utility libraries and core functionality
├── prisma/                # Database schema and migrations
├── emails/                # Email templates
├── actions/               # Server actions
├── hooks/                 # Custom React hooks
├── types/                 # TypeScript type definitions
└── scripts/               # Utility scripts and maintenance tools

Getting Started

Before diving into specific sections, ensure you have:

1. Environment Setup: Proper environment variables configured
2. Database: PostgreSQL database with Prisma migrations applied
3. External APIs: YouTube Data API, OpenAI API, and Stripe keys configured
4. Dependencies: All npm packages installed

Documentation Sections

This comprehensive developer documentation is organized into the following sections:

• Architecture Overview: High-level system architecture and data flow
• Frontend Structure: Components, pages, and UI organization
• Admin Tools: Centralized documentation for all admin features, including the Prompt Management System
• Backend Structure: Server-side logic, API routes, and data processing
• API Endpoints: Complete API reference with examples
• Database Schema: Database models, relationships, and migrations
• Configuration: Environment variables and configuration files
• Utilities & Libraries: Helper functions, custom hooks, and shared components
• Email System: Resend integration, React Email templates, and notifications
• Deployment & Scripts: Vercel deployment, build processes, and utility scripts
• Best Practices: Comprehensive guide to React, TypeScript, Prisma, and API best practices
• Authentication & Authorization: NextAuth.js setup, magic links, and role-based access

Development Workflow

1. Local Development: Use npm run dev for development server
2. Database Changes: Create migrations with npx prisma migrate dev
3. Testing: Run tests with npm test
4. Type Checking: TypeScript compilation with npx tsc --noEmit
5. Linting: Code quality with npm run lint

Contributing Guidelines

When working on this application:

• Follow TypeScript best practices
• Maintain consistent code formatting with Prettier
• Write comprehensive JSDoc comments for complex functions
• Update this documentation when adding new features
• Test thoroughly before deploying changes

Support and Resources

• GitHub Repository: [Link to repository]
• Production Environment: [Link to production app]
• Staging Environment: [Link to staging app]
• Error Monitoring: Check application logs and monitoring dashboards