A full-stack YouTube optimization tool that helps creators analyze thumbnails, titles, descriptions, competitors, and get AI-powered insights — all in one place.
Built with Java 21 + Spring Boot, React 18 + Vite, PostgreSQL, and Docker.
| Feature | Description |
|---|---|
| Thumbnail Analyzer | Upload or paste a thumbnail URL. Google Vision API detects labels, text (OCR), faces, dominant colors, dark pixel percentage, and safe search ratings. |
| Title & Description | Analyze your video title and description with Google NLP API. Get sentiment scores, entity extraction, category classification, and Wikipedia entity linking. |
| Video Analyzer | Upload a video clip or provide a GCS URL. Google Video Intelligence API detects labels, explicit content, and shot changes asynchronously. |
| Competitor Research | Search YouTube for competitor videos, look up any video by URL, track tags across your niche, and benchmark your channel against competitors. |
| A/B Workshop | Upload multiple thumbnail variants, run Vision API analysis on each, then get an AI-powered side-by-side comparison with a winner recommendation. |
| Content Score | Combine a thumbnail analysis + text analysis to get an overall upload readiness score. AI evaluates synergy between your visual and text elements. |
| AI Insights Hub | View all AI-generated insights in one place. Filter by type (thumbnail, text, video, competitor, strategy, content score). |
| YouTube Analytics | Connect your YouTube channel via OAuth 2.0. View channel stats, daily trends, per-video performance, traffic sources, and audience demographics. |
| Dashboard | Project overview with stats, competitor benchmarks, top tags by frequency, and recent activity timeline. |
| Settings | Manage API keys (AES-256 encrypted), create/switch projects, connect YouTube accounts. |
Click to expand all screenshots
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────────────┐
│ │ │ │ │ External APIs │
│ React 18 │──────▶│ Spring Boot 3 │──────▶│ │
│ Vite │◀──────│ REST API │◀──────│ Google Vision API │
│ Tailwind CSS │ │ WebClient │ │ Google NLP API │
│ Zustand │ │ JPA / Hibernate │ │ Video Intelligence API │
│ Recharts │ │ │ │ YouTube Data API v3 │
│ Framer Motion │ │ │ │ YouTube Analytics API │
│ │ │ │ │ Gemini / Claude API │
└─────────────────┘ └────────┬─────────┘ └─────────────────────────┘
Port 5173 │
┌──────▼─────────┐
│ PostgreSQL 16 │
│ │
│ 12 tables │
│ JSONB columns │
│ AES-256-GCM │
│ encrypted keys │
└─────────────────┘
Port 5432
- Frontend sends requests to the Spring Boot REST API (port 8080)
- Backend decrypts the relevant API key from PostgreSQL
- Backend calls the external API (Vision, NLP, YouTube, AI) using WebClient
- Response is parsed, stored in PostgreSQL (raw JSON in JSONB columns), and returned to the frontend
- AI insights are generated by sending analysis data + competitor context to Gemini or Claude
| Layer | Technology | Details |
|---|---|---|
| Frontend | React 18 + Vite | SPA with client-side routing |
| Styling | Tailwind CSS | Custom warm theme with amber accent |
| State | Zustand 5 | Lightweight store with localStorage persist |
| Charts | Recharts | Line, bar, pie, and area charts |
| Animations | Framer Motion | Page transitions and micro-interactions |
| Backend | Java 21 + Spring Boot 3.3.5 | REST API with WebFlux WebClient |
| ORM | Spring Data JPA + Hibernate | Auto-managed schema with JSONB support |
| Database | PostgreSQL 16 | JSONB columns for flexible API response storage |
| AI | Google Gemini (free) or Anthropic Claude | Pluggable AI provider abstraction |
| Security | AES-256-GCM | All API keys encrypted at rest |
| Auth | OAuth 2.0 | YouTube Analytics channel connection |
| Infrastructure | Docker + Docker Compose | Three-container setup |
- Docker and Docker Compose
- A Google Cloud Platform account with billing enabled
- At least one API key (see API Keys Setup below)
# 1. Clone the repository
git clone https://github.com/ayushwing/yt-studio-ai.git
cd yt-studio-ai
# 2. Copy the environment template
cp .env.example .env
# Edit .env with your Google OAuth credentials (optional, for YouTube Analytics)
# 3. Start everything
docker compose up -d
# 4. Open the app
open http://localhost:5173The app will be running at:
- Frontend: http://localhost:5173
- Backend API: http://localhost:8080/api
- PostgreSQL: localhost:5432
After launching the app, go to Settings and add your API keys:
| Key | Required? | How to Get |
|---|---|---|
| Google Cloud API Key | Yes | console.cloud.google.com/apis/credentials — Enable Vision API and Natural Language API |
| YouTube Data API v3 | For competitor research | Same console — Enable YouTube Data API v3 |
| Google Gemini API | For AI insights (free) | aistudio.google.com/apikey |
| Anthropic Claude API | For AI insights (paid, optional) | console.anthropic.com |
| GCloud Bearer Token | For video analysis | Run gcloud auth print-access-token (expires hourly) |
All keys are AES-256-GCM encrypted before being stored in the database. Keys never reach the frontend — all API calls are proxied through the backend.
To connect your YouTube channel for analytics:
- Create OAuth 2.0 credentials in Google Cloud Console
- Set the redirect URI to
http://localhost:8080/api/oauth/google/callback - Enable YouTube Analytics API and YouTube Data API v3
- Add your credentials to
.env:GOOGLE_CLIENT_ID=your-client-id GOOGLE_CLIENT_SECRET=your-secret - Restart the backend:
docker compose restart backend - Go to YouTube Analytics in the app and click Connect Channel
Go to Settings and create a project. A project represents a YouTube channel workspace — all analyses, competitors, and insights are scoped to it.
Go to Thumbnail Analyzer, upload an image or paste a URL. The Vision API will detect labels, text, faces, colors, and more.
Go to Title & Description, enter your video title and description. The NLP API returns sentiment scores, entities, and content categories.
Go to Content Score, select a thumbnail analysis and a text analysis, then click Get Content Score. The AI evaluates how well your thumbnail and title work together and gives an upload readiness verdict.
Go to Competitor Research, search for competitor videos, and save them. The app tracks tags, view counts, and provides benchmarks on your Dashboard.
Go to A/B Workshop, create a test, upload multiple thumbnail variants, analyze them with Vision API, then get an AI comparison with a winner recommendation.
After running any analysis, click the AI insight button to get detailed recommendations. All insights are saved and viewable in the AI Insights Hub.
The app supports two AI providers through a pluggable abstraction layer:
| Provider | Cost | Model | Setup |
|---|---|---|---|
| Google Gemini | Free tier (recommended) | gemini-2.5-flash | Add Gemini API key in Settings |
| Anthropic Claude | Paid | claude-sonnet-4-20250514 | Add Anthropic API key in Settings |
The app automatically selects Gemini if available, falling back to Claude. Both produce the same structured JSON insights.
yt-studio-ai/
├── docker-compose.yml # Three services: db, backend, frontend
├── .env.example # Environment template
├── LICENSE # MIT License
│
├── backend/
│ ├── Dockerfile # Multi-stage: JDK 21 build → JRE 21 runtime
│ ├── pom.xml # Spring Boot 3.3.5 + dependencies
│ └── src/main/java/com/ytanalyzer/
│ ├── config/ # CORS, WebClient beans, encryption config
│ ├── controller/ # 11 REST controllers
│ ├── service/ # 11 services (Vision, NLP, YouTube, AI, etc.)
│ ├── model/ # 12 JPA entities with JSONB support
│ ├── repository/ # Spring Data JPA repositories
│ ├── dto/ # Request/response DTOs
│ └── util/ # AES-256-GCM encryption utility
│
├── frontend/
│ ├── Dockerfile # Node 20 Alpine + Vite dev server
│ ├── package.json # React 18 + Tailwind + Zustand + Recharts
│ └── src/
│ ├── App.jsx # Router with 10 routes
│ ├── api/client.js # Axios instance
│ ├── store/appStore.js # Zustand global state
│ ├── pages/ # 10 page components
│ ├── components/
│ │ ├── layout/ # Header, Sidebar
│ │ └── shared/ # ScoreGauge, InsightCard, ErrorAlert, etc.
│ └── utils/ # Constants, formatters
│
└── screenshots/ # App screenshots for README
- API Key Encryption: All API keys are encrypted with AES-256-GCM (SHA-256 key derivation, 12-byte random IV) before storage in PostgreSQL. Keys are decrypted only when making external API calls.
- No Frontend Exposure: API keys never leave the backend. All external API calls are proxied through Spring Boot.
- OAuth 2.0: YouTube Analytics uses standard OAuth 2.0 with PKCE. Tokens are encrypted at rest with automatic refresh.
- Masked Display: The Settings page shows only the first and last few characters of stored keys.
# Backend (Java) changes
docker compose build --no-cache backend && docker compose up -d --force-recreate backend
# Frontend (React) changes
docker compose build --no-cache frontend && docker compose up -d --force-recreate frontend
# View logs
docker compose logs -f backend
docker compose logs -f frontendThe schema is auto-managed by Hibernate (ddl-auto: update). No migrations needed. To reset:
docker compose down -v # Wipes all data
docker compose up -d # Fresh start