116 lines
2.2 KiB
Markdown
116 lines
2.2 KiB
Markdown
# 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
|