rustic-application
Macv 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.
Comments (0)
Sign in to leave a comment
Project Tasks19
Design Prisma Database Schema
Create the full Prisma schema for all models: User, Subscription, Generation, SavedThumbnail, UsageTracking, Template. Include relations, enums, and indexes. This is a prerequisite for all backend API tasks.
Setup Zustand Global State
Configure Zustand stores for the application: user/session store, generation store (current generation, history), UI store (sidebar, modals, theme). Export typed hooks. Note: all studio and dashboard frontend sections depend on this global state layer.
Setup Design System & Theme
Configure Tailwind CSS with the SRD color palette (primary #3A3D40, secondary #FF6F61, accent #FFD700, etc.). Set up shadcn/ui component library, global CSS variables for light/dark mode, Framer Motion global variants, and shared typography scales. All frontend pages depend on this.
Cloudinary Storage Integration
Integrate Cloudinary SDK for image upload, transformation, and delivery: configure upload presets, signed uploads from server actions, CDN URL generation, and secure deletion. Used by thumbnail generation and the thumbnail editor export flow.
AI Prompt Engineering Templates
Design and implement structured internal prompt templates for all AI generation types: viral captions, high-CTR thumbnails, Instagram hooks, YouTube titles/descriptions, short-form reel titles, and hashtag packs. Templates should be language-aware (EN/HI/Hinglish/GU) and platform-aware. Store as typed constants or a template registry.
Run DB Migrations & Seed
Run Prisma migrations to create all tables in PostgreSQL. Create seed scripts for plan tiers (Free, Pro), default templates, and sample data for local development.
Configure Clerk Auth Middleware
Set up Clerk Auth for the Next.js 15 App Router: configure middleware.ts for protected routes, sync Clerk user webhooks to create/update User records in PostgreSQL, and expose user context via server actions. Supports social auth (Google, etc.). Note: frontend dashboard and studio pages depend on this task being complete.
SEO Metadata & Sitemap Setup
Implement Next.js 15 App Router metadata API for static and dynamic SEO: page titles, descriptions, OG images, canonical URLs. Generate sitemap.xml and robots.txt. Create dynamic SEO pages for key landing sections. Supports the SRD SEO requirement.
Multi-language i18n Configuration
Set up multi-language support for English, Hindi, Hinglish, and Gujarati using next-intl or i18next. Configure locale routing, translation files, RTL support if needed, and language switcher utility. All content-facing frontend pages depend on this.
Thumbnail PNG Export Service
Implement server-side or client-side PNG export for the thumbnail editor: use html2canvas or a canvas-based approach to flatten the editor canvas (text layers, uploaded images, fonts, resize elements) into a single PNG. Upload final export to Cloudinary and return download URL. Supports ThumbnailStudio Export flow.
Caption Generation API Endpoint
Build the Next.js API route / server action for AI caption generation: accept topic, platform, tone, language inputs; apply structured prompt templates for viral captions, hooks, hashtags, CTA, emoji-rich versions; call OpenAI API; persist Generation record; enforce usage limits per subscription tier. Supports CaptionStudio frontend page.
Thumbnail Generation API Endpoint
Build the Next.js API route / server action for AI thumbnail generation: accept video title, niche, style, color theme; apply structured prompt templates for high-CTR thumbnails; call OpenAI Images API; upload generated images to Cloudinary; persist Generation + SavedThumbnail records; enforce usage limits. Supports ThumbnailStudio frontend page.
Generations History CRUD API
Build API routes / server actions for history management: list user generations (paginated), save generation, delete generation, toggle favorite. Filter by type (caption/thumbnail), platform, date range. Supports History and Dashboard frontend pages.
Usage Stats & Limits API
Build API routes / server actions for usage tracking: fetch daily generation counts per user, enforce free plan (5/day) vs Pro (unlimited) limits, return usage stats for dashboard display. Supports Dashboard and Billing frontend pages.
Stripe Subscription Integration
Integrate Stripe for subscription management: create products/prices for Free and Pro plans, build checkout session API, handle Stripe webhooks (subscription created/updated/deleted) to sync subscription status in DB, expose subscription status via server action. Supports Billing and Pricing frontend pages.
Admin Users Management API
Build admin-only API routes for user account management: list users (paginated, with search/filter), view user details, update user roles/status, view subscription info per user. Restricted to admin role. Supports Admin Users page.
Admin Analytics & Reports API
Build admin-only API routes for platform analytics: total users, active subscriptions, generation counts by type/day/platform, revenue metrics. Include CSV/JSON export endpoint. Supports Admin Analytics page.
API Rate Limiting & Security
Implement rate limiting on all public and authenticated API routes using a token-bucket or sliding-window approach (e.g., Upstash Redis or in-memory for Vercel Edge). Add input sanitization, Zod validation schemas for all API inputs, and security headers (CSP, HSTS). Enforce protected routes via Clerk middleware.
Vercel Deployment Configuration
Configure Vercel project: set environment variables (Clerk, OpenAI, Stripe, Cloudinary, DATABASE_URL), configure vercel.json for API timeouts and regions, set up preview and production environments, and connect PostgreSQL via Vercel Postgres or external provider. Create .env.example file.
No comments yet. Be the first!