ThumbPreview - YouTube Thumbnail Preview Tool

Preview your YouTube thumbnails against real competitors before publishing.

Tech Stack

Frontend:

• React 18 + TypeScript
• Tailwind CSS
• Vite
• React Query
• Zustand

Backend:

• NestJS + TypeScript
• PostgreSQL + TypeORM
• YouTube Data API v3

Quick Start

Prerequisites

• Node.js 20+
• Docker (for PostgreSQL)
• YouTube Data API key

1. Start Database

docker-compose up -d

2. Setup Backend

cd backend
cp .env.example .env
# Edit .env and add your YOUTUBE_API_KEY
npm install
npm run start:dev

3. Setup Frontend

cd frontend
npm install
npm run dev

4. Open App

• Frontend: http://localhost:3000
• Backend API: http://localhost:4000/api

Project Structure

thumbnail-preview-tool/
├── frontend/                 # React app
│   ├── src/
│   │   ├── components/       # UI components
│   │   ├── hooks/            # Custom hooks
│   │   ├── store/            # Zustand store
│   │   ├── api/              # API client
│   │   └── types/            # TypeScript types
│   └── ...
├── backend/                  # NestJS app
│   ├── src/
│   │   ├── modules/
│   │   │   ├── thumbnails/   # Thumbnail upload
│   │   │   └── youtube/      # YouTube API
│   │   └── entities/         # Database entities
│   └── ...
├── docker-compose.yml        # PostgreSQL
└── README.md

API Endpoints

Method	Endpoint	Description
POST	/api/thumbnails/upload	Upload thumbnail
DELETE	/api/thumbnails/:id	Delete thumbnail
GET	/api/youtube/search?q=query	Search YouTube

Environment Variables

Backend (.env)

PORT=4000
NODE_ENV=development

# Database
DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=thumbpreview
DB_PASSWORD=thumbpreview123
DB_DATABASE=thumbpreview

# YouTube API
YOUTUBE_API_KEY=your_api_key_here

Getting YouTube API Key

1. Go to Google Cloud Console
2. Create a new project
3. Enable "YouTube Data API v3"
4. Create credentials (API Key)
5. Add key to .env file

License

MIT