# 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

```bash
docker-compose up -d
```

### 2. Setup Backend

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

### 3. Setup Frontend

```bash
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)

```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](https://console.cloud.google.com/)
2. Create a new project
3. Enable "YouTube Data API v3"
4. Create credentials (API Key)
5. Add key to `.env` file

## License

MIT