🎨 THUMBLIFY

AI-Powered Thumbnail Generator

THUMBLIFY is a full-stack AI-powered thumbnail generator designed for YouTubers, content creators, and digital marketers. Create stunning, professional thumbnails in seconds using the power of Gemini AI.

Features • Demo • Installation • Usage • Tech Stack • Contributing

---

✨ Features

Feature	Description
🧠 AI Generation	Powered by Google's Gemini AI for high-quality thumbnail creation
✍️ Prompt-Based	Simply describe what you want and let AI do the magic
🎨 Style Control	Choose from multiple artistic styles and color schemes
📐 Aspect Ratios	Support for YouTube (16:9), Instagram (1:1), and custom ratios
👁️ Live Preview	Real-time preview before downloading
⬇️ Quick Download	Download thumbnails in high resolution (PNG/JPG)
🔐 Authentication	Secure user login and signup with JWT
📂 Image Upload	Upload and enhance your own images
⚡ Modern UI	Sleek, responsive interface built with React + TypeScript
💬 AI Chatbot	Floating chatbot assistant on homepage for instant help and guidance
🌙 Dark Mode	Eye-friendly dark theme (optional)

---

🛠️ Tech Stack

Frontend

• React.js - UI library
• TypeScript - Type safety
• Vite - Fast build tool
• Context API - State management
• CSS/Tailwind - Styling

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• TypeScript - Type safety
• MongoDB - Database
• Mongoose - ODM
• Multer - File upload handling
• JWT - Authentication

AI & APIs

• Google Gemini AI - Thumbnail generation
• Cloudinary (optional) - Image storage

---

📂 Project Structure

THUMBLIFY/
│
├── client/                    # Frontend application
│   ├── public/               # Static assets
│   ├── src/
│   │   ├── assets/          # Images, icons, fonts
│   │   ├── components/      # Reusable UI components
│   │   │   ├── Chatbot/    # AI chatbot component
│   │   │   ├── Header/     # Navigation header
│   │   │   ├── Footer/     # Page footer
│   │   │   └── ...         # Other components
│   │   ├── configs/         # Configuration files
│   │   ├── context/         # React Context providers
│   │   ├── data/            # Static data & constants
│   │   ├── pages/           # Page components
│   │   ├── sections/        # Page sections
│   │   ├── global.css       # Global styles
│   │   ├── main.tsx         # Application entry point
│   │   └── types.ts         # TypeScript type definitions
│   ├── index.html
│   ├── package.json
│   ├── tsconfig.json
│   └── vite.config.ts
│
├── server/                    # Backend application
│   ├── configs/              # Configuration files
│   │   └── database.ts      # MongoDB connection
│   ├── controllers/          # Route controllers
│   │   ├── auth.controller.ts
│   │   └── thumbnail.controller.ts
│   ├── middlewares/          # Express middlewares
│   │   ├── auth.middleware.ts
│   │   └── upload.middleware.ts
│   ├── models/               # Mongoose models
│   │   ├── User.model.ts
│   │   └── Thumbnail.model.ts
│   ├── routes/               # API routes
│   │   ├── auth.routes.ts
│   │   └── thumbnail.routes.ts
│   ├── uploads/              # Uploaded files (gitignored)
│   ├── server.ts             # Server entry point
│   ├── package.json
│   └── tsconfig.json
│
├── .gitignore
├── LICENSE
└── README.md

---

🚀 Installation

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• MongoDB (local or Atlas)
• Gemini API Key from Google AI Studio

📖 Usage

Quick Start Guide

1. Sign Up / Login

   • Create a new account or login with existing credentials

2. Use AI Chatbot (Homepage)

   • Click on the floating chatbot icon at the bottom-right corner
   • Ask questions about features, get guidance, or troubleshoot issues
   • Available 24/7 for instant support

3. Generate Thumbnail

   • Navigate to the generation page
   • Enter a descriptive prompt (e.g., "Epic gaming thumbnail with neon effects")
   • Select style, color scheme, and aspect ratio
   • Click "Generate"

4. Preview & Download

   • View the generated thumbnail
   • Make adjustments if needed
   • Download in your preferred format

API Endpoints

View API Documentation

Authentication

POST /api/auth/register    # Register new user
POST /api/auth/login       # Login user
GET  /api/auth/me          # Get current user (requires auth)

Thumbnails

POST /api/thumbnails/generate       # Generate thumbnail (requires auth)
GET  /api/thumbnails/user/:userId   # Get user's thumbnails
GET  /api/thumbnails/:id            # Get specific thumbnail
DELETE /api/thumbnails/:id          # Delete thumbnail

Chatbot

POST /api/chatbot/message           # Send message to AI chatbot
GET  /api/chatbot/history           # Get chat history (requires auth)

---

🎯 Use Cases

• YouTube Content Creators - Generate eye-catching video thumbnails
• Social Media Marketers - Create engaging post graphics
• Digital Agencies - Quick mockups for client presentations
• Bloggers - Featured images for blog posts
• Course Creators - Professional course thumbnails
• First-time Users - Get instant help via the AI chatbot assistant

---

🔐 Security

• ✅ Environment variables for sensitive data
• ✅ JWT-based authentication
• ✅ Password hashing with bcrypt
• ✅ Input validation and sanitization
• ✅ CORS configuration
• ✅ Rate limiting on API endpoints
• ✅ .gitignore for sensitive files

---

📝 Future Enhancements

• Batch thumbnail generation
• Template library
• Advanced editing tools
• Social media scheduling integration
• A/B testing for thumbnails
• Analytics dashboard
• Collaborative workspaces

---

🙏 Acknowledgments

• Google Gemini AI for powerful image generation
• React and TypeScript communities
• All contributors and supporters

---

Made with ❤️ by Riya Bansal