Renderly - Full-Featured AI Image Generation Platform

A professional AI-powered web application that creates stunning visuals for any purpose - from YouTube thumbnails to product ads, banners, social media posts, logos, and more. Built with Next.js 15 App Router and TypeScript with full user authentication and cloud storage integration.

🚀 Features

Core Features

• Multi-Format Generation: Create thumbnails, product ads, banners, social posts, logos, infographics, cover photos, and story templates
• AI-Powered Creation: Combines OpenAI GPT for intelligent prompt enhancement and Gemini for high-quality image generation
• Template System: Professional templates for each image type with customizable elements and layouts
• Image Upload & Transform: Upload your photos and let AI transform them into professional marketing materials
• Smart Content Understanding: AI analyzes your input and creates contextually appropriate visuals for each format
• Brand-Aware Generation: Consistent styling across all image types with brand color and element integration
• Multiple Aspect Ratios: Support for all standard ratios (16:9, 9:16, 1:1, 4:5, 3:2, 2:3, 21:9, 16:10)
• Batch Generation: Creates multiple variations for each request with different styles and approaches
• Quality Options: Standard, High, and Ultra quality settings for different use cases

Advanced Features

• User Authentication: Complete sign-up/sign-in system with Clerk integration
• Visual History: Save and access all your generated images across all formats
• Cloud Storage: Automatic image storage with Cloudinary integration
• Memory System: AI-powered user preferences and brand learning with Mem0 integration
• Analytics Dashboard: Comprehensive analytics for image performance and usage
• Template Library: 50+ professional templates across all image types
• Brand Management: Save brand colors, fonts, and logos for consistent generation
• Rating & Feedback: Rate generations to improve AI quality over time
• Mobile Responsive: Fully optimized for desktop, tablet, and mobile devices
• Progress Tracking: Real-time generation progress with detailed status updates
• Export Options: Download individual images, batch downloads, and organized ZIP files
• Format Conversion: Automatically optimize images for different platforms and use cases

🛠️ Tech Stack

• Frontend: Next.js 15 with App Router, TypeScript, React 19
• Styling: Tailwind CSS 4.0 with responsive design
• Animations: Framer Motion, Lenis for smooth scrolling
• Authentication: Clerk with webhook integration
• Database: Neon PostgreSQL with Drizzle ORM
• AI Services:
  • OpenAI GPT-4 (Prompt Enhancement)
  • Google Gemini 2.0 Flash (Image Generation)
  • Mem0 (User Memory & Preferences)
• Storage: Cloudinary for image management
• State Management: Zustand
• File Processing: JSZip, File-Saver
• UI Components: Radix UI, Aceternity UI
• Icons: Lucide React
• Deployment: Vercel (recommended)

📋 Prerequisites

Before running this project, make sure you have:

• Node.js 18+ installed
• OpenAI API key with GPT-4 access
• Google Gemini API key with 2.0 Flash access
• Clerk account for authentication
• Neon PostgreSQL database
• Cloudinary account for image storage
• Mem0 API key for user memory
• Basic knowledge of Next.js and TypeScript

🚀 Quick Start

1. Install Dependencies

npm install

2. Environment Setup

Create a .env.local file in the root directory:

# AI Services
OPENAI_API_KEY=your_openai_api_key_here
GEMINI_API_KEY=your_gemini_api_key_here

# Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
CLERK_WEBHOOK_SECRET=your_clerk_webhook_secret

# Database
DATABASE_URL=your_neon_database_url

# Cloud Storage
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

# Memory & AI
NEXT_PUBLIC_MEM0_API_KEY=your_mem0_api_key

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

3. Database Setup

# Generate database schema
npx drizzle-kit generate:pg

# Run database migrations
npx drizzle-kit migrate:pg

4. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser to see the application.

📁 Project Structure

renderly/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── enhance-prompt/       # OpenAI prompt enhancement
│   │   │   ├── generate-image/       # General AI image generation
│   │   │   ├── generate-thumbnail/   # Legacy thumbnail generation
│   │   │   ├── templates/            # Template management API
│   │   │   ├── thumbnails/           # Thumbnail management APIs
│   │   │   │   ├── save/             # Save thumbnails to database
│   │   │   │   ├── history/          # User thumbnail history
│   │   │   │   ├── rate/             # Thumbnail rating system
│   │   │   │   └── download/         # Download management
│   │   │   └── webhooks/
│   │   │       └── clerk/            # User sync webhook
│   │   ├── app/                      # Protected app routes
│   │   │   ├── dashboard/            # User dashboard and image creation
│   │   │   ├── history/              # All generated images history
│   │   │   ├── library/              # Template library and management
│   │   │   ├── analytics/            # Usage analytics and performance
│   │   │   ├── settings/             # User settings and brand management
│   │   │   ├── templates/            # Template browsing and customization
│   │   │   └── create/               # Image creation interface
│   │   ├── sign-in/                  # Authentication pages
│   │   ├── sign-up/
│   │   ├── landing/                  # Landing page
│   │   ├── about/                    # About page
│   │   ├── features/                 # Features page
│   │   ├── how-it-works/             # How it works page
│   │   ├── pricing/                  # Pricing page
│   │   ├── globals.css               # Global styles
│   │   ├── layout.tsx                # Root layout with auth
│   │   └── page.tsx                  # Home page redirect
│   ├── components/
│   │   ├── ui/                       # Reusable UI components
│   │   ├── landing/                  # Landing page components
│   │   ├── layout/                   # Layout components
│   │   ├── thumbnail/                # Legacy thumbnail components
│   │   ├── image-generation/         # Multi-format image generation components
│   │   ├── templates/                # Template selection and customization
│   │   └── brand/                    # Brand management components
│   ├── db/
│   │   ├── schema.ts                 # Database schema
│   │   └── index.ts                  # Database connection
│   ├── lib/
│   │   ├── utils.ts                  # Utility functions
│   │   ├── constants.ts              # App constants
│   │   ├── image-templates.ts        # Template system and management
│   │   ├── brand-management.ts       # Brand settings and consistency
│   │   ├── mem0.ts                   # Mem0 integration
│   │   └── cloudinary.ts             # Cloudinary integration
│   ├── store/
│   │   ├── thumbnailStore.ts         # Legacy thumbnail state
│   │   ├── imageGenerationStore.ts   # Multi-format image generation state
│   │   ├── templateStore.ts          # Template selection and customization
│   │   └── brandStore.ts             # Brand settings and preferences
│   ├── types/
│   │   └── index.ts                  # TypeScript definitions
│   ├── scripts/
│   │   └── migrate.ts                # Database migration script
│   └── styles/
│       └── globals.css               # Additional global styles
├── drizzle.config.ts                 # Drizzle ORM configuration
├── .env.local.example                # Environment variables template
├── tailwind.config.js                # Tailwind CSS configuration
├── next.config.js                    # Next.js configuration
└── package.json

🎯 How to Use

Getting Started

1. Sign Up/Sign In: Create an account or sign in to access all features
2. Choose Image Type: Select from thumbnails, product ads, banners, social posts, logos, infographics, cover photos, or story templates
3. Pick Your Method: Use templates, upload images, or create from text prompts

Generation Methods

Method 1: Template-Based Generation

• Browse our library of 50+ professional templates
• Filter by image type, category, style, or aspect ratio
• Customize text areas and image elements
• Generate variations based on the template structure

Method 2: Image Upload & Transform

• Upload your photos (JPEG, PNG, WebP, up to 50MB)
• Choose image type and desired style
• Specify how to integrate your photo (placement, role)
• AI transforms your image into professional marketing material

Method 3: Text-to-Image Generation

• Describe what you want to create
• Select image type, category, style, and mood
• Choose aspect ratio and quality settings
• Add text content, brand elements, and advanced options

Customization Options

• Image Types: Thumbnails, Product Ads, Banners, Social Posts, Logos, Infographics, Cover Photos, Story Templates
• Content Categories: Gaming, Tutorial, Business, E-commerce, Social Media, Marketing, Personal, Education, Technology, Lifestyle
• Visual Styles: Modern, Vintage, Minimalist, Bold, Professional, Creative, Corporate, Artistic, Playful, Elegant
• Color Schemes: Vibrant, Monochrome, Pastel, Dark, Light, Gradient, Brand Colors, Complementary
• Aspect Ratios: 16:9, 9:16, 1:1, 4:5, 3:2, 2:3, 21:9, 16:10
• Quality Levels: Standard, High, Ultra (up to 4K resolution)

Brand Management

• Brand Settings: Save your brand colors, fonts, and logo
• Consistent Generation: AI learns your brand and maintains consistency
• Template Customization: Adapt templates to match your brand identity

Power User Features

• Batch Generation: Create multiple variations in one request
• History & Analytics: Track all your creations and their performance
• Export Options: Download individual files or organized ZIP packages
• Rating System: Improve AI quality by rating your generations

⚙️ Configuration

Environment Variables

Variable	Description	Required
OPENAI_API_KEY	OpenAI API key with GPT-4 access	Yes
GEMINI_API_KEY	Google Gemini API key	Yes
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk publishable key	Yes
CLERK_SECRET_KEY	Clerk secret key	Yes
CLERK_WEBHOOK_SECRET	Clerk webhook secret	Yes
DATABASE_URL	Neon PostgreSQL database URL	Yes
CLOUDINARY_CLOUD_NAME	Cloudinary cloud name	Yes
CLOUDINARY_API_KEY	Cloudinary API key	Yes
CLOUDINARY_API_SECRET	Cloudinary API secret	Yes
NEXT_PUBLIC_MEM0_API_KEY	Mem0 API key for user memory	Yes
NEXT_PUBLIC_APP_URL	Application URL for share links	No

Webhook Setup

1. Clerk Webhook: Set up user sync webhook at /api/webhooks/clerk
   • Events: user.created, user.updated, user.deleted
   • Endpoint: https://yourdomain.com/api/webhooks/clerk

📚 Documentation

Comprehensive documentation is available in the /docs folder:

Quick Links

• Documentation Index - Complete documentation overview
• Quick Start Guide - Get up and running fast
• Implementation Guide - Detailed setup instructions

🚨 Important Guides

• Apply Migration Now - Fix 500 errors (database migration required)
• Image Iteration Feature - How the iteration system works
• Testing Guide - Test the iteration feature

Feature Documentation

• mem0 Integration - AI memory system
• Dev Mode Guide - Development mode toggle
• Image Persistence - Database persistence solution

Troubleshooting

• Fix Chat History Error - Resolve chat loading issues
• Migration Testing - Post-migration verification

See the full documentation index for all available guides.

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• OpenAI for GPT-4 API
• Google for Gemini 2.0 Flash API
• Vercel for Next.js framework and deployment platform
• Tailwind CSS for styling framework
• flowmind for interface design inspiration

---

Made with ❤️ for YouTubers worldwide

Generate professional visuals for any purpose in seconds, not hours.