Frontend Structure

This document provides a comprehensive overview of the frontend architecture, component organization, routing structure, and UI patterns used in the YouTube Analyzer application.

Overview

The frontend is built with Next.js 14 using the App Router pattern, TypeScript for type safety, and Tailwind CSS for styling. The application follows a component-based architecture with clear separation of concerns and reusable design patterns.

Data Fetching Patterns

The application employs different data fetching strategies depending on the component type and performance requirements:

Client Components

• Use React Query for data fetching, caching, and synchronization
• Call API routes via fetch with appropriate error handling and loading states

Server Components

• Direct database access via Prisma ORM for server-rendered content
• Example: fetchAnalysis in /app/(protected)/dashboard/results/[id]/ fetches analysis data directly from the database
• Benefits: Reduced latency, avoids API roundtrip, simplifies authentication

When to Use Each Pattern

• Direct Database Access: For server components requiring data for initial render
• API Routes: For client components, data mutations, or cross-domain requests

Directory Structure

App Router Organization (app/)

The application follows Next.js 14 App Router conventions with route groups for logical organization:

app/
├── (auth)/                 # Authentication routes
│   ├── login/
│   ├── register/
│   └── layout.tsx
├── (docs)/                 # Documentation routes
│   ├── docs/
│   ├── guides/
│   └── layout.tsx
├── (marketing)/            # Public marketing pages
│   ├── page.tsx           # Homepage
│   ├── pricing/
│   └── layout.tsx
├── (protected)/            # Protected user routes
│   └── dashboard/         # Main dashboard area
└── api/                   # API routes (see Backend Structure)

Protected Dashboard Routes (app/(protected)/dashboard/)

The dashboard is the main user interface where all analysis functionality is contained, including admin tools for privileged users:

dashboard/
├── page.tsx               # Dashboard homepage with overview
├── analysis/              # Analysis creation and management
│   ├── page.tsx          # Analysis form and interface
│   └── client.tsx        # Client-side analysis logic
├── history/               # Analysis history and results
│   ├── page.tsx          # History listing page
│   └── client.tsx        # History management logic
├── results/               # Individual analysis results
│   └── [id]/             # Dynamic route for specific analysis
│       ├── page.tsx      # Analysis result display
│       └── components/   # Result-specific components
├── subscriptions/         # Auto-analysis management
│   ├── page.tsx          # Subscription management interface
│   └── components/       # Subscription-related components
├── admin/                 # Admin-only tools and management
│   └── prompts/           # Prompt Management System UI
│       └── PromptsAdmin/  # Main admin prompt management interface
├── settings/              # User settings and preferences
├── billing/               # Subscription and payment management
└── feedback/              # User feedback system

Component Architecture

Component Organization (components/)

Components are organized by feature and functionality:

components/
├── ui/                    # Base UI components (shadcn/ui)
├── layout/                # Layout and navigation components
├── shared/                # Shared utility components
├── analysis/              # Analysis-specific components
├── dashboard/             # Dashboard-specific components
├── charts/                # Data visualization components
├── modals/                # Modal dialogs and overlays
├── forms/                 # Form components and validation
├── pricing/               # Pricing and subscription components
└── sections/              # Page section components

UI Component System (components/ui/)

The application uses shadcn/ui built on top of Radix UI primitives:

Core UI Components

• Button: Primary, secondary, and variant button styles
• Input: Text inputs with validation states
• Select: Dropdown selection components
• Dialog: Modal dialogs and alerts
• Card: Content containers with consistent styling
• Badge: Status indicators and labels
• Progress: Progress bars and loading indicators
• Tooltip: Contextual help and information

Form Components

• Form: Form wrapper with validation context
• Label: Accessible form labels
• Textarea: Multi-line text input
• Checkbox: Boolean input controls
• RadioGroup: Single-selection input groups

Navigation Components

• Tabs: Tabbed content navigation
• Breadcrumb: Hierarchical navigation
• Pagination: Data pagination controls

Layout Components (components/layout/)

Header Navigation (components/layout/navbar.tsx)

• Main Navigation: Primary site navigation with responsive behavior
• User Menu: Account dropdown with settings and logout
• Mobile Navigation: Collapsible mobile menu
• Brand Logo: Site branding and home link

Dashboard Layout (components/layout/dashboard-layout.tsx)

• Sidebar Navigation: Dashboard section navigation
• Content Area: Main content container with proper spacing
• Responsive Design: Mobile-friendly layout adaptation
• Breadcrumb Navigation: Contextual navigation within dashboard

Footer (components/layout/footer.tsx)

• Site Links: Important site navigation links
• Legal Links: Terms, privacy, and legal information
• Social Links: Social media and external links

Analysis Components (components/analysis/)

Analysis Form (components/analysis/analysis-form.tsx)

interface AnalysisFormProps {
  userId: string;
  initialCredits: number;
}
 
// Features:
// - Channel URL input with validation
// - Video count selection
// - Analysis type selection
// - Credit validation and display
// - Optimistic UI updates
// - Error handling and feedback

Past Analyses (components/analysis/past-analyses.tsx)

interface PastAnalysesProps {
  analyses: Analysis[];
  autoAnalyses: AutoAnalysis[];
}
 
// Features:
// - Analysis history display
// - Status indicators (processing, completed, failed)
// - Quick actions (view, share, delete)
// - Auto-analysis management
// - Pagination and filtering

Analysis Results (components/analysis/analysis-results.tsx)

interface AnalysisResultsProps {
  analysis: Analysis;
  videos: Video[];
}
 
// Features:
// - HTML content rendering
// - Video performance charts
// - Metadata display
// - Sharing functionality
// - Export options

Analysis Action Menu (components/analysis/analysis-action-menu.tsx)

interface AnalysisActionMenuProps {
  analysis: {
    id: string;
    channelUrl: string;
    channelName?: string;
    analysisType?: string;
    autoAnalysisId?: string | null;
  };
  userEmail: string;
  isPaid: boolean;
  showViewButton?: boolean;
  viewButtonText?: string;
  viewButtonHref?: string;
}
 
// Features:
// - Dropdown menu with View Summary, Share Analysis, and Create Subscription
// - Intelligent subscription validation (paid users, supported analysis types)
// - Prevents duplicate subscriptions for same channel
// - Extracts channel information automatically from analysis data
// - Clean UI that replaces multiple scattered action buttons
// - Context-aware button text and routing

Convert Analysis to Subscription Feature: This component enables users to convert any existing standard-summary or news-feed analysis into an auto-analysis subscription without re-entering channel information. The feature:

• Validates user has a paid plan before allowing subscription creation
• Checks analysis type compatibility (only supports standard-summary and news-feed)
• Prevents duplicate subscriptions by checking for existing autoAnalysisId
• Automatically extracts channel ID and name from the analysis URL
• Opens the AutoAnalysisSetupModal with pre-populated channel data

Dashboard Components (components/dashboard/)

Dashboard Cards (components/dashboard/dashboard-cards.tsx)

• Recent Analyses: Latest analysis results with quick access
• Processing Status: Real-time updates on ongoing analyses
• Quick Stats: Credit usage, subscription status, and key metrics
• Quick Actions: Fast access to common tasks

Credit Display (components/dashboard/credit-display.tsx)

interface CreditDisplayProps {
  availableCredits: number;
  reservedCredits: number;
  totalCredits: number;
}
 
// Features:
// - Real-time credit tracking
// - Visual credit meter
// - Subscription upgrade prompts
// - Usage history

Chart Components (components/charts/)

Video Performance Charts (components/charts/video-stats-chart.tsx)

interface VideoStatsChartProps {
  videos: VideoData[];
  yAxisWidth?: number;
}
 
// Features:
// - Interactive bar charts using Recharts
// - Performance metrics visualization
// - Responsive design
// - Tooltips and legends
// - Data filtering and sorting

Engagement Analytics (components/charts/engagement-chart.tsx)

• View Count Trends: Time-series view count visualization
• Engagement Metrics: Likes, comments, and engagement rates
• Comparative Analysis: Multi-channel comparison charts
• Export Functionality: Chart image and data export

Modal Components (components/modals/)

Modal Provider (components/modals/providers.tsx)

• Global Modal State: Centralized modal management
• Modal Stack: Support for nested modals
• Accessibility: Proper focus management and keyboard navigation

Analysis Modal (components/modals/analysis-modal.tsx)

• Quick Analysis: Fast analysis creation from anywhere
• Form Validation: Real-time validation and error handling
• Progress Tracking: Visual progress indicators

Confirmation Modals (components/modals/confirm-modal.tsx)

• Delete Confirmations: Safe deletion with double confirmation
• Action Confirmations: Important action verification
• Custom Messages: Flexible confirmation message system

Routing and Navigation

Route Groups

The application uses Next.js route groups for logical organization:

(auth) - Authentication Routes

• /login: User login with social and email options
• /register: User registration and onboarding
• /reset-password: Password reset functionality

(marketing) - Public Routes

• /: Homepage with product introduction
• /pricing: Subscription plans and pricing
• /features: Feature overview and benefits

(docs) - Documentation Routes

• /docs: User documentation and guides
• /guides: Tutorial and how-to content
• /developer-docs: This developer documentation

(protected) - Authenticated Routes

• /dashboard: Main dashboard with overview
• /dashboard/analysis: Analysis creation interface
• /dashboard/history: Analysis history and management
• /dashboard/results/[id]: Individual analysis results
• /dashboard/subscriptions: Auto-analysis management
• /dashboard/settings: User settings and preferences

Navigation Patterns

Responsive Navigation

• Desktop: Full navigation bar with all sections visible
• Tablet: Collapsed navigation with hamburger menu
• Mobile: Bottom navigation bar for primary actions

Dashboard Navigation

• Sidebar: Primary dashboard navigation (desktop)
• Tab Bar: Section navigation within dashboard areas
• Breadcrumbs: Hierarchical navigation for deep pages

State Management

Client-Side State

The application uses React's built-in state management with strategic patterns:

Local Component State

// Form state management
const [channelUrl, setChannelUrl] = useState('');
const [videoCount, setVideoCount] = useState(5);
const [loading, setLoading] = useState(false);
 
// UI state management
const [selectedTab, setSelectedTab] = useState('overview');
const [showModal, setShowModal] = useState(false);

Custom Hooks (hooks/)

// Credit management hook
export const useCredits = () => {
  const [credits, setCredits] = useState(0);
  const [reserved, setReserved] = useState(0);
  
  const reserveCredits = (amount: number) => {
    setReserved(prev => prev + amount);
  };
  
  return { credits, reserved, reserveCredits };
};
 
// Analysis status hook
export const useAnalysisStatus = (analysisId: string) => {
  const [status, setStatus] = useState('processing');
  const [progress, setProgress] = useState(0);
  
  // Polling logic for status updates
  useEffect(() => {
    const interval = setInterval(pollStatus, 2000);
    return () => clearInterval(interval);
  }, [analysisId]);
  
  return { status, progress };
};

Server State Management

Next.js App Router Patterns

// Server component data fetching
export default async function DashboardPage() {
  const session = await auth();
  const user = await getUserWithCredits(session.user.id);
  const recentAnalyses = await getRecentAnalyses(session.user.id);
  
  return (
    <DashboardClient
      user={user}
      recentAnalyses={recentAnalyses}
    />
  );
}
 
// Client component hydration
'use client';
export default function DashboardClient({ user, recentAnalyses }) {
  const [analyses, setAnalyses] = useState(recentAnalyses);
  
  // Client-side updates and interactions
  const refreshAnalyses = async () => {
    const updated = await fetch('/api/dashboard/recent').then(r => r.json());
    setAnalyses(updated.recentAnalyses);
  };
  
  return (
    <div>
      {/* Dashboard content */}
    </div>
  );
}

Styling and Design System

Tailwind CSS Configuration

The application uses Tailwind CSS with a custom configuration:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
        accent: {
          500: '#f59e42',
        }
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        heading: ['Cal Sans', 'system-ui', 'sans-serif'],
      }
    }
  }
}

Design Tokens

Color Palette

• Primary: Blue (#3b82f6) for primary actions and branding
• Secondary: Gray scale for text and backgrounds
• Accent: Orange (#f59e42) for highlights and CTAs
• Success: Green for positive states and confirmations
• Warning: Yellow for cautions and pending states
• Error: Red for errors and destructive actions

Typography Scale

• Heading: Cal Sans font family for headings and titles
• Body: Inter font family for body text and UI elements
• Mono: Fira Code for code snippets and technical content

Spacing System

• Base Unit: 4px (0.25rem) as the fundamental spacing unit
• Component Spacing: 8px, 12px, 16px, 24px for common component spacing
• Layout Spacing: 32px, 48px, 64px for major layout elements

Responsive Design

Breakpoint Strategy

// Tailwind breakpoints
sm: '640px',   // Small tablets and large phones
md: '768px',   // Tablets
lg: '1024px',  // Desktop
xl: '1280px',  // Large desktop
'2xl': '1536px' // Extra large screens

Mobile-First Approach

• Base Styles: Mobile-optimized by default
• Progressive Enhancement: Desktop features added via breakpoints
• Touch-Friendly: Appropriate touch targets and gestures
• Performance: Optimized for mobile connection speeds

Performance Optimization

Code Splitting

Route-Based Splitting

// Automatic code splitting by route
const AnalysisPage = lazy(() => import('./analysis/page'));
const HistoryPage = lazy(() => import('./history/page'));
 
// Component-level splitting for heavy components
const ChartComponent = lazy(() => import('./charts/video-stats-chart'));

Component Lazy Loading

// Conditional component loading
const HeavyModal = lazy(() => import('./modals/heavy-modal'));
 
function Dashboard() {
  const [showModal, setShowModal] = useState(false);
  
  return (
    <div>
      {/* Main content */}
      {showModal && (
        <Suspense fallback={<Loading />}>
          <HeavyModal />
        </Suspense>
      )}
    </div>
  );
}

Image Optimization

// Next.js Image component usage
import Image from 'next/image';
 
<Image
  src={channelThumbnail}
  alt={channelName}
  width={48}
  height={48}
  className="rounded-full"
  priority={false}
  placeholder="blur"
  blurDataURL="data:image/svg+xml;base64,..."
/>

Bundle Optimization

• Tree Shaking: Automatic removal of unused code
• Dynamic Imports: Lazy loading of non-critical components
• Vendor Splitting: Separate bundles for third-party libraries
• Compression: Gzip and Brotli compression for assets

Accessibility (A11Y)

Keyboard Navigation

• Tab Order: Logical tab order throughout the application
• Focus Management: Proper focus handling in modals and dynamic content
• Keyboard Shortcuts: Common shortcuts for power users

Screen Reader Support

• Semantic HTML: Proper HTML5 semantic elements
• ARIA Labels: Descriptive labels for complex interactions
• Alternative Text: Meaningful alt text for all images
• Live Regions: Dynamic content updates announced to screen readers

Color and Contrast

• WCAG AA Compliance: Color contrast ratios meet accessibility standards
• Color Independence: Information not conveyed by color alone
• High Contrast Mode: Support for system high contrast preferences

Testing Strategy

Component Testing

// Jest + React Testing Library
import { render, screen, fireEvent } from '@testing-library/react';
import AnalysisForm from './analysis-form';
 
test('submits analysis with valid input', async () => {
  render(<AnalysisForm userId="123" initialCredits={10} />);
  
  fireEvent.change(screen.getByLabelText(/channel url/i), {
    target: { value: 'https://youtube.com/@testchannel' }
  });
  
  fireEvent.click(screen.getByRole('button', { name: /analyze/i }));
  
  expect(await screen.findByText(/analysis started/i)).toBeInTheDocument();
});

Integration Testing

• Page-Level Tests: Full page rendering and interaction testing
• API Integration: Testing component integration with API endpoints
• User Flow Tests: End-to-end user journey testing

Visual Regression Testing

• Storybook Integration: Component documentation and visual testing
• Screenshot Testing: Automated visual regression detection
• Cross-Browser Testing: Consistent appearance across browsers

This frontend structure provides a solid foundation for building and maintaining the YouTube Analyzer user interface. The component-based architecture, clear routing patterns, and comprehensive styling system enable rapid development while maintaining code quality and user experience standards.

Configuration-Driven Design System

YouTube Analyzer employs a powerful configuration-driven design system that separates content and presentation concerns. This approach allows developers and content managers to modify site content without altering component code, and designers to update the visual presentation without touching content.

Configuration Pattern Overview

graph LR
    A[Config Files] -->|Content Data| B[Component Templates]
    C[Type Definitions] -->|Type Safety| B
    B -->|Rendered UI| D[Application Pages]
    E[Design System] -->|Styling| B

Config Directory Structure

The config/ directory contains structured content data used throughout the application:

config/
├── analysis-types.ts      # Analysis type configurations
├── blog.ts               # Blog content configuration
├── dashboard.ts          # Dashboard layout configuration
├── docs.ts               # Documentation structure
├── landing.ts            # Landing page content
├── marketing.ts          # Marketing page navigation
├── site.ts               # Global site configuration
└── subscriptions.ts      # Subscription plan details

Content/Design Separation Pattern

1. Content Configuration - Define content in configuration files
2. Component Templates - Create reusable component templates
3. Page Assembly - Import and map configurations to templates
4. TypeScript Integration - Ensure type safety with shared interfaces

Landing Page Configuration System

The landing page demonstrates this pattern clearly, with its content defined in config/landing.ts and template components in components/sections/.

Content Definition (config/landing.ts)

Content is defined as structured data objects:

// config/landing.ts
export const infos: InfoLdg[] = [
  {
    badge: "For Creators",
    title: "Analyze Competitor Strategies Like a Pro",
    description: "Discover what makes viral videos tick...",
    image: "dynamic-art-creator", 
    list: [
      {
        icon: "target",
        title: "Trending Topic Discovery",
        description: "Identify emerging trends before they go mainstream..."
      },
      // More list items...
    ],
    cta: {
      text: "Analyze Competitors Now",
      href: "/login"
    }
  },
  // More info sections...
];
 
export const features: FeatureLdg[] = [
  {
    title: "AI-Powered Analysis",
    description: "Advanced GPT models analyze video transcripts...",
    icon: "bot",
    gradient: "from-purple-500 to-indigo-600",
  },
  // More feature items...
];
 
export const testimonials: TestimonialType[] = [
  // Testimonial items...
];

Type Definitions (types/index.d.ts)

TypeScript interfaces define the structure of configuration data:

// types/index.d.ts
export type InfoList = {
  icon: keyof typeof Icons;
  title: string;
  description: string;
};
 
export type InfoLdg = {
  title: string;
  image: string;
  description: string;
  badge?: string;
  cta?: {
    text: string;
    href: string;
  };
  list: InfoList[];
};
 
export type FeatureLdg = {
  title: string;
  description: string;
  icon: keyof typeof Icons;
  gradient: string;
  link?: string;
};
 
export type TestimonialType = {
  name: string;
  job: string;
  image: string;
  review: string;
};

Component Templates (components/sections/)

Reusable component templates consume configuration data:

// components/sections/features.tsx
import { features } from "@/config/landing";
import { Icons } from "@/components/shared/icons";
 
export default function Features() {
  return (
    <section className="py-16 lg:py-24">
      {/* Component structure */}
      <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {/* Dynamically render each feature from config */}
        {features.map((feature, index) => {
          const Icon = Icons[feature.icon];
          return (
            <div key={index} className="group relative overflow-hidden rounded-3xl border...">
              <div className={`relative flex size-16 rounded-2xl... bg-gradient-to-br ${feature.gradient}`}>
                <Icon className="size-8 text-white" />
              </div>
              <h3 className="mt-6 text-xl font-bold">{feature.title}</h3>
              <p className="mt-3 pb-6 text-muted-foreground leading-relaxed">
                {feature.description}
              </p>
            </div>
          );
        })}
      </div>
      {/* More component structure */}
    </section>
  );
}

// components/sections/info-landing.tsx
// Reusable component that accepts configuration as props
export default function InfoLanding({
  data,
  reverse = false,
}: InfoLandingProps) {
  return (
    <div className="py-10 sm:py-20">
      {/* Component structure using data from props */}
      <h2>{data.title}</h2>
      <p>{data.description}</p>
      {data.list.map((item, index) => {
        const Icon = Icons[item.icon || "arrowRight"];
        return (
          <div key={index}>
            <Icon />
            <span>{item.title}</span>
            <dd>{item.description}</dd>
          </div>
        );
      })}
      {/* More component structure */}
    </div>
  );
}

Page Assembly (app/(marketing)/page.tsx)

Pages import both configuration and components to assemble the UI:

// app/(marketing)/page.tsx
import { infos } from "@/config/landing";
import Features from "@/components/sections/features";
import InfoLanding from "@/components/sections/info-landing";
 
export default function IndexPage() {
  return (
    <>
  {/* The hero is rendered via the server-side switcher in production to avoid client-side flicker. */}
  {/* Use `HeroSwitcherServer` to render the appropriate variant on the server. */}
  {/* @example */}
  {/* import HeroSwitcherServer from '@/components/sections/hero-switcher-server' */}
  {/* <HeroSwitcherServer /> */}
      {infos.map((info, i) => (
        <InfoLanding key={info.title} data={info} reverse={i % 2 === 1} />
      ))}
      <Features />
    </>
  );
}

Benefits of This Pattern

1. Content Management

   • Content changes can be made by updating configuration files
   • Marketing teams can modify messaging without touching component code
   • Multiple sections can be easily added, removed, or reordered

2. Design Consistency

   • Common UI patterns are enforced through shared templates
   • Design system changes propagate uniformly across components
   • Component styling remains consistent even as content changes

3. Development Efficiency

   • Clear separation of concerns speeds development workflow
   • Type safety ensures configuration errors are caught during development
   • Components are reusable across different pages with different content

4. Maintenance

   • Content changes don't require component modifications
   • Design system updates are centralized
   • Adding new sections follows a predictable pattern

Other Configuration-Driven Components

Site Configuration (config/site.ts)

Global site metadata, links, and shared configuration:

// config/site.ts
export const siteConfig: SiteConfig = {
  name: "VidsGenius",
  description: "VidsGenius is a powerful analytics platform...",
  url: site_url,
  ogImage: `${site_url}/_static/og.jpg`,
  links: {
    twitter: "https://twitter.com/miickasmt",
    github: "https://github.com/steffenfoerster/youtube-analyzer",
  },
  mailSupport: "admin@vidsgenius.com",
};
 
export const footerLinks: SidebarNavItem[] = [
  {
    title: "Company",
    items: [
      { title: "About", href: "#" },
      { title: "Terms", href: "/terms" },
      { title: "Privacy", href: "/privacy" },
    ],
  },
];

Marketing Navigation (config/marketing.ts)

Navigation structure for marketing pages:

// config/marketing.ts
export const marketingConfig: MarketingConfig = {
  mainNav: [
    {
      title: "Pricing",
      href: "/pricing",
    },
    // More navigation items...
  ],
}

Subscription Plans (config/subscriptions.ts)

Subscription plans and pricing details:

// config/subscriptions.ts
export const plans: SubscriptionPlan[] = [
  {
    title: "Hobbyist",
    description: "Perfect for beginners and hobbyists",
    benefits: [
      "100 analysis credits per month",
      "3 auto-analysis subscriptions",
      // More benefits...
    ],
    limitations: [
      "Standard analysis only",
      // More limitations...
    ],
    prices: {
      monthly: 9,
      yearly: 90,
    },
    stripeIds: {
      monthly: "price_hobbyist_monthly",
      yearly: "price_hobbyist_yearly",
    },
  },
  // More plans...
];

Best Practices for Config-Driven Design

1. Content Modifications

   • Always update content through config files, not inside components
   • Use descriptive content keys that clearly indicate purpose
   • Keep content focused on text and structure, not presentation

2. Component Development

   • Build components to be flexible and adapt to various content formats
   • Use TypeScript interfaces to enforce content structure
   • Include sensible defaults for optional configuration properties

3. Design Updates

   • Keep styling inside components or shared CSS
   • Use consistent design tokens for colors, spacing, typography
   • Test components with different configuration values

4. Adding New Sections

   • Create new config in appropriate config file
   • Create a corresponding component template
   • Add the component to the relevant page with its configuration
   • Define TypeScript interfaces for type safety

Workflow for Content Updates

When you need to update marketing content:

1. Navigate to the appropriate config file (e.g., config/landing.ts)
2. Locate the content section you wish to modify
3. Update text, links, or image references
4. The changes will automatically be reflected in the UI

For example, to update a feature description:

// config/landing.ts
export const features: FeatureLdg[] = [
  {
    title: "AI-Powered Analysis",
-    description: "Advanced GPT models analyze video transcripts...",
+    description: "State-of-the-art AI models transform video content into actionable insights with unprecedented accuracy.",
    icon: "bot",
    gradient: "from-purple-500 to-indigo-600",
  },
  // More features...
];

Workflow for Adding New Sections

To add a new landing page section:

1. Define content structure in types/index.d.ts
2. Add content data to appropriate config file
3. Create a component template in components/sections/
4. Import and use the component in page layout

With this pattern, content and design remain cleanly separated while maintaining a cohesive, type-safe relationship through TypeScript interfaces.

Prompt Management Admin UI (2025-06-22)

The prompt management admin UI enables admins to manage, edit, and version LLM prompt templates for each analysis type.

Full Technical Reference

For a complete, file-by-file technical breakdown of the Prompt Management System—including database schema, OpenAI API interactions, and testing details—see:

👉 Prompt Management System: Full Technical Documentation

This reference covers:

• File responsibilities and architecture
• Database and API interactions
• OpenAI integration
• Testing and validation
• Maintenance and troubleshooting

If you are working on prompt management features or need to understand the backend, always consult the Admin Tools documentation for up-to-date details. This is the new, consolidated reference for all admin and prompt management features.

Location

• /app/(protected)/dashboard/admin/prompts/PromptsAdmin/ (tab-based, versioned editing)

Features

• Tab navigation for each analysis type (e.g., standard summary, deep dive, etc.)
• Editable prompt template with syntax highlighting and variable support
• Version history: view, compare, and restore previous prompt versions
• Test rendering: inject sample variables and transcripts to preview prompt output
• Modal dialogs for creating new types or saving as new version
• All UI is client-side React with SWR for data fetching

Workflow

1. Admin selects an analysis type tab
2. Edits the prompt template in the editor
3. Optionally tests the prompt with sample data
4. Saves changes, which creates a new version
5. Can view and restore previous versions at any time

Access Control

• Only users with ADMIN role can access this UI (checked in page.tsx)
• All changes are versioned and auditable

Integration

• UI fetches and updates prompt templates via /api/prompts/ endpoints
• Used by the analysis workflow to select the correct prompt for each analysis type