Architecture

Architecture

Tech Stack

Layer	Technology
Frontend	Vanilla JavaScript (ES modules), single HTML file
Styling	Custom CSS with CSS variables (dark theme design system)
Auth	Google Identity Services (GSI) OAuth
Backend (optional)	PHP 7+ REST API
Cloud Backend	Supabase (PostgreSQL, Edge Functions, Auth, Realtime)
Media Processing	Cloudinary (upload, transform, CDN, AI)
AI Providers	Google Gemini, OpenAI GPT, Anthropic Claude
Image Gen	Google Imagen (Nano Banana), DALL-E 3
Video Gen	Google Veo 3.1
Local Storage	IndexedDB, localStorage

Application Structure

index.html                    # Single-page application shell
├── security-production.js    # Auth gate, HTTPS enforcement
├── validator-app.js          # Core app logic, navigation, asset management
├── validator.css             # Complete design system
│
├── ai-adapter.js             # AI outpainting, image-to-video
├── ai-enhanced-analysis.js   # Multi-model creative analysis
├── ai-intelligence-engine.js # Chained AI pipeline
├── ai-library-integration.js # Asset cards, channel specs, AI generation
├── ai-library-manager.js     # Session-based AI asset library
├── ai-model-selector.js      # User model selection UI
├── ai-models-config.js       # Provider/model configuration
├── ai-orchestrator.js        # Task routing across AI providers
├── ai-studio.js              # Text-to-image, outpainting UI
│
├── cloudinary-client.js      # Cloudinary upload, transform, resize
├── auto-fix.js               # Batch fix workflow
│
├── crm.js                    # Client/project management
├── integrations.js           # Google Drive, Sheets, Gmail, Dropbox, Slack
├── google-ads-builder.js     # Google Ads campaign builder
├── social-media-builder.js   # Meta/LinkedIn/X/TikTok ad builder
├── keyword-analyzer.js       # Keyword research + landing page analysis
├── strategy-module.js        # Campaign strategy planning
├── learn-module.js           # URL analyzer, swipe file, benchmarks
├── analyze-module.js         # Creative analysis (hook, CTA, brand)
├── settings-module.js        # API keys, preferences, brand profiles
├── logo-generator.js         # Brand kit generator
│
├── video-analyzer.js         # Video analysis orchestrator
├── video-analyzer-v2.js      # Advanced paid-media video analysis
├── video-analyzer-ui.js      # Video analysis UI
├── video-intelligence-engine.js  # Full video pipeline
├── video-intelligence-client.js  # Server-side video integration
├── video-frame-extractor.js  # Frame extraction (Cloudinary + canvas)
├── video-extraction-layer.js # URL normalization, metadata, thumbnails
│
├── security-core.js          # AES-256-GCM encryption, sessions
├── auth-config.production.js # OAuth client ID, admin list
│
├── supabase-backend.js       # Main Supabase client
├── supabase-full-integration.js  # CRM/asset Supabase wiring
├── supabase-video-client.js  # Video analysis Supabase client
├── supabase-video-processor.js   # Server-side video processing
│
├── data-models.js            # Data model definitions
├── unified-storage.js        # Storage abstraction (IDB + Supabase)
├── sync-engine.js            # Bidirectional sync
├── realtime-sync.js          # Real-time Supabase subscriptions
├── persistence-ui.js         # Save/load UI state
├── advanced-features.js      # Additional features
├── advanced-toolbar.js       # Toolbar components
└── sw.js                     # Service worker (offline support)

Data Flow

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│   Browser    │────▶│  Cloudinary  │────▶│     CDN      │
│  (IndexedDB) │     │  (Process)   │     │  (Deliver)   │
└──────┬───────┘     └──────────────┘     └──────────────┘
       │
       │ Sync
       ▼
┌──────────────┐     ┌──────────────┐
│   Supabase   │────▶│  Edge Func   │
│  (Postgres)  │     │  (Process)   │
└──────────────┘     └──────────────┘

Storage Architecture

Local (IndexedDB)

• Asset metadata and thumbnails
• CRM data (companies, projects, contacts)
• User preferences and API keys (encrypted)
• Analysis history
• Offline queue for pending changes

Cloud (Supabase)

• User profiles and auth
• Shared API keys
• CRM entities
• Video analyses
• Activity logs
• Real-time subscriptions

Media (Cloudinary)

• Original uploaded assets
• Transformed/resized derivatives
• CDN URLs for delivery
• Video frame extraction

Authentication Flow

Google Sign-In → Token Validation → Session Creation → Domain Check
                                          │
                                    ┌─────┼─────┐
                                    │           │
                              Personal     Corporate
                              (any Gmail)  (domain-restricted)

API Architecture (PHP)

Optional PHP backend for self-hosted deployments:

api/
├── index.php              # Router (REST endpoints)
├── core/
│   ├── Auth.php           # Google token validation, sessions
│   ├── Database.php       # MySQL connection
│   └── Response.php       # JSON response helpers
├── services/
│   └── CloudinaryService.php  # Signed transforms, quota
└── config/
    └── config.example.php # Database + Cloudinary credentials

Deployment Options

Platform	Config File	Notes
Netlify	netlify.toml	Static hosting + security headers
Vercel	vercel.json	Static hosting + security headers
Cloudflare Pages	_headers	Static hosting
Self-hosted	.htaccess	Apache + PHP for API