tidal-meme

bySyeda Nabiya

Build a full-stack AI-powered Meme Creator Platform with the following specifications: --- PROJECT OVERVIEW Create a web application that allows users to generate, customize, and share memes using AI. The platform should combine text-to-image generation, meme template management, and social sharing features. --- TECH STACK - Frontend: Next.js 14 with App Router, TypeScript, Tailwind CSS - UI Components: shadcn/ui - Backend: Next.js API routes - Database: Supabase (PostgreSQL) for user data, meme storage, and templates - Authentication: Supabase Auth (Google OAuth + email/password) - AI Integration: OpenAI API (GPT-4 for caption generation, DALL-E 3 for image generation) - Image Processing: Sharp for image manipulation, Canvas API for text overlay - Storage: Supabase Storage for meme images - Deployment: Vercel --- CORE FEATURES 1. AI MEME GENERATION - Text prompt input where users describe the meme they want - AI generates both the image and suggests multiple caption options - Option to generate meme from scratch OR use existing templates - "Surprise Me" button for random meme generation based on trending topics 2. TEMPLATE LIBRARY - Pre-loaded collection of 50+ classic meme templates (Drake, Distracted Boyfriend, etc.) - Users can upload custom templates - Template categorization: Reaction, Wholesome, Dark Humor, Work, Relationships, etc. - Search and filter functionality - "Trending Templates" section based on usage analytics 3. MEME EDITOR - Drag-and-drop text positioning - Multiple text boxes with individual styling - Font selection (Impact, Arial, Comic Sans, custom fonts) - Text color, outline, shadow controls - Text size and rotation - Image filters (brightness, contrast, saturation) - Crop and resize tools - Undo/Redo functionality - Real-time preview 4. AI CAPTION SUGGESTIONS - Based on selected template, suggest contextually relevant captions - "Make it funnier" button to regenerate captions - Tone selector: Sarcastic, Wholesome, Dark, Professional, Gen-Z - Caption history for each session 5. USER FEATURES - User profiles with avatar and bio - Personal meme gallery (created memes) - Saved/bookmarked memes - Following system - Activity feed 6. SOCIAL & SHARING - Public meme feed with infinite scroll - Like, comment, and share functionality - Direct download (PNG, JPG, GIF support) - One-click sharing to Twitter/X, Instagram, Reddit, Discord - Copy link to clipboard - Embed code generation - Watermark toggle (optional platform branding) 7. DISCOVERY & TRENDING - Trending memes section (based on likes/shares in last 24h) - Categories/tags for browsing - Search by caption text, template name, or creator - "Meme of the Day" featured section - Weekly top creators leaderboard --- DATABASE SCHEMA Users Table: - id (UUID, primary key) - email (string, unique) - username (string, unique) - display_name (string) - avatar_url (string) - bio (text) - created_at (timestamp) - updated_at (timestamp) Memes Table: - id (UUID, primary key) - user_id (foreign key -> Users) - image_url (string) - template_id (foreign key -> Templates, nullable) - caption_top (text) - caption_bottom (text) - caption_custom (jsonb for multiple text boxes) - is_public (boolean, default true) - is_ai_generated (boolean) - generation_prompt (text, nullable) - likes_count (integer, default 0) - comments_count (integer, default 0) - shares_count (integer, default 0) - created_at (timestamp) Templates Table: - id (UUID, primary key) - name (string) - image_url (string) - category (string) - tags (array of strings) - usage_count (integer) - is_custom (boolean) - uploaded_by (foreign key -> Users, nullable) - created_at (timestamp) Likes Table: - id (UUID, primary key) - user_id (foreign key -> Users) - meme_id (foreign key -> Memes) - created_at (timestamp) - unique constraint on (user_id, meme_id) Comments Table: - id (UUID, primary key) - user_id (foreign key -> Users) - meme_id (foreign key -> Memes) - content (text) - created_at (timestamp) Follows Table: - id (UUID, primary key) - follower_id (foreign key -> Users) - following_id (foreign key -> Users) - created_at (timestamp) Bookmarks Table: - id (UUID, primary key) - user_id (foreign key -> Users) - meme_id (foreign key -> Memes) - created_at (timestamp) --- API ROUTES Authentication: - POST /api/auth/signup - POST /api/auth/login - POST /api/auth/logout - GET /api/auth/session Memes: - GET /api/memes (paginated feed, query params: page, limit, sort, category) - GET /api/memes/trending - GET /api/memes/[id] - POST /api/memes (create new meme) - PUT /api/memes/[id] - DELETE /api/memes/[id] - POST /api/memes/[id]/like - DELETE /api/memes/[id]/like - GET /api/memes/[id]/comments - POST /api/memes/[id]/comments AI Generation: - POST /api/ai/generate-image (body: {prompt, style}) - POST /api/ai/generate-captions (body: {templateId, context, tone, count}) - POST /api/ai/enhance-caption (body: {caption, instruction}) Templates: - GET /api/templates (query params: category, search, page) - GET /api/templates/[id] - POST /api/templates (upload custom template) - GET /api/templates/trending Users: - GET /api/users/[username] - GET /api/users/[username]/memes - PUT /api/users/profile - POST /api/users/[username]/follow - DELETE /api/users/[username]/follow - GET /api/users/[username]/followers - GET /api/users/[username]/following --- PAGE STRUCTURE / (Home) - Hero section with CTA - Trending memes carousel - Quick create button - Featured templates /create - Two tabs: "From Template" | "AI Generate" - Template selector (if from template) - AI prompt input (if AI generate) - Full meme editor canvas - Caption input fields - AI caption suggestions panel - Style controls sidebar - Preview and publish buttons /explore - Category filters - Search bar - Meme grid with infinite scroll - Sort options: Trending, New, Top (Today/Week/Month/All Time) /templates - Template gallery - Category navigation - Upload custom template button - Template preview modal /meme/[id] - Full meme display - Like, comment, share buttons - Comments section - Creator info card - Related memes /profile/[username] - User info header - Stats (memes created, likes received, followers) - Tab navigation: Memes | Liked | Bookmarked - Meme grid /settings - Profile editing - Account settings - Privacy preferences - Connected accounts --- UI/UX REQUIREMENTS - Dark mode by default with light mode toggle - Mobile-responsive design (mobile-first approach) - Skeleton loaders for async content - Toast notifications for actions (saved, shared, error, etc.) - Modal dialogs for confirmations - Smooth animations using Framer Motion - Drag-and-drop for editor using dnd-kit - Keyboard shortcuts for power users (Ctrl+S to save, Ctrl+Z undo, etc.) - Accessibility: proper ARIA labels, keyboard navigation, screen reader support --- AI PROMPT ENGINEERING For caption generation, use this system prompt: "You are a meme caption writer. Generate funny, relatable, and shareable meme captions. Match the tone requested (sarcastic/wholesome/dark/professional/gen-z). Keep captions short (under 100 characters for top/bottom text). Understand internet culture and current trends. Output JSON array of 5 caption options." For image generation, prepend user prompts with: "Create a meme-style image that is: clear, simple composition, suitable for text overlay, high contrast, expressive subjects. Style: " --- ADDITIONAL REQUIREMENTS 1. Rate limiting on AI endpoints (10 generations per hour for free users) 2. Image optimization before storage (compress, resize to max 1200px) 3. Content moderation: flag inappropriate content using OpenAI moderation API 4. Analytics tracking: meme creation events, popular templates, user engagement 5. SEO optimization: dynamic meta tags for shared memes 6. Error boundaries and graceful error handling 7. Loading states for all async operations 8. Optimistic UI updates for likes/bookmarks --- SEED DATA Include 20 pre-loaded classic meme templates with proper categorization. Create 3 demo user accounts with sample memes. Add sample comments and likes for demonstration. --- Please generate the complete codebase with all files, proper folder structure, environment variable templates, and setup instructions.