Andre
130f35c4f8
- Add Google OAuth 2.0 login flow with passport-google-oauth20 - Create User and RefreshToken entities for session management - Implement JWT access tokens (15min) + HttpOnly refresh cookies (7 days) - Add auth endpoints: /google, /google/callback, /refresh, /me, /logout - Create LoginPage with Google sign-in button (shadcn/ui) - Add AuthGuard for protected routes with redirect preservation - Implement silent token refresh on app mount - Add UserMenu component with avatar and sign-out Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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
- Go to Google Cloud Console
- Create a new project
- Enable "YouTube Data API v3"
- Create credentials (API Key)
- Add key to
.envfile
License
MIT