rustic-application

byMacv Gaming (Faizan)

You are a senior full-stack engineer, UI/UX designer, AI integration expert, and scalable SaaS architect. Build a COMPLETE production-ready AI SaaS web application called: “AI Thumbnail + Caption Generator” The app helps YouTubers, Instagram creators, and short-form content creators generate: - AI thumbnails - Viral captions - Hooks - Hashtags - YouTube descriptions - Reel titles ================================================== TECH STACK ================================================== Frontend: - Next.js 15 (App Router) - TypeScript - Tailwind CSS - shadcn/ui - Framer Motion Backend: - Next.js server actions + API routes Database: - PostgreSQL - Prisma ORM Authentication: - Clerk Auth Payments: - Stripe subscription integration AI: - OpenAI API Image Generation: - OpenAI Images API OR Stability AI Storage: - Cloudinary Deployment: - Vercel State Management: - Zustand Forms: - React Hook Form + Zod ================================================== CORE FEATURES ================================================== 1. Authentication - Sign up - Login - Social auth - Protected dashboard 2. User Dashboard - Recent generations - Saved thumbnails - Usage stats - Subscription status 3. AI Caption Generator User inputs: - Topic - Platform - Tone - Language AI generates: - Captions - Hooks - Hashtags - CTA - Emoji-rich versions 4. AI Thumbnail Generator User inputs: - Video title - Niche - Style - Color theme AI generates: - Multiple thumbnail concepts - Thumbnail images - Thumbnail text - Viral suggestions 5. Thumbnail Editor - Drag/drop text - Change fonts - Upload image - Resize elements - Export PNG 6. Multi-language Support - English - Hindi - Hinglish - Gujarati 7. Subscription System Free Plan: - 5 generations/day Pro Plan: - Unlimited generations - Premium templates - HD export 8. History System - Save generations - Delete generations - Favorite generations 9. Responsive UI - Mobile optimized - Tablet optimized - Desktop optimized 10. SEO - Metadata - Dynamic SEO pages - Sitemap - Robots.txt ================================================== UI/UX REQUIREMENTS ================================================== Design style: - Modern SaaS - Dark/light mode - Glassmorphism - Smooth animations - Creator-focused aesthetic Pages: - Landing page - Pricing page - Dashboard - Thumbnail studio - Caption studio - Settings page - Billing page Landing page sections: - Hero section - Features - Testimonials - Pricing - FAQ - CTA section ================================================== AI PROMPT ENGINEERING ================================================== Create optimized prompts internally for: - Viral captions - High CTR thumbnails - Instagram hooks - YouTube titles - Short-form content Use structured prompt templates. ================================================== DATABASE SCHEMA ================================================== Create Prisma schema for: - Users - Subscriptions - Generations - Saved thumbnails - Usage tracking - Templates ================================================== SECURITY ================================================== Implement: - Rate limiting - API validation - Secure authentication - Environment variables - Protected routes - Input sanitization ================================================== PERFORMANCE ================================================== Optimize: - Image loading - Lazy loading - Code splitting - API caching - Streaming responses ================================================== DELIVERABLES ================================================== Generate: 1. Full folder structure 2. Full frontend code 3. Backend APIs 4. Prisma schema 5. Database setup 6. Stripe integration 7. AI integration 8. Cloudinary integration 9. Responsive UI components 10. Deployment guide 11. Environment variables example 12. README.md 13. Production best practices ================================================== BONUS FEATURES ================================================== Add: - AI content calendar - Trending hashtag finder - Viral score analyzer - Thumbnail A/B testing - Creator analytics ================================================== IMPORTANT ================================================== - Write clean scalable code - Use reusable components - Follow best practices - Use TypeScript everywhere - Keep architecture modular - Generate realistic UI - Avoid placeholder logic - Make app production-ready Now generate the COMPLETE application step-by-step with all files and code.

LandingThumbnailStudioLogin
Landing

Comments (0)

No comments yet. Be the first!

Architecture

Service Dependenciesv2
Deployment
Payments
Auth
Storage
AI Services
Next.js API Routes
Next.js 15 App :3000
Client
Vercel CDN
Stripe Billing
Clerk Auth Service
PostgreSQL
Cloudinary Storage
OpenAI API
Stability AI
Server Actions
API Routes
Rate Limiter
Next.js App Router
Zustand Store
Clerk Auth Client
Browser
Landing: View Info
Login: Sign In
Dashboard: View Overview
Dashboard: Monitor Usage
Users: Manage Accounts
Users: Edit User
Subscriptions: View Plans
Subscriptions: Manage Billing
Analytics: View Performance
Analytics: Export Reports
Settings: Configure App