zen-content
Vijay KandulnaBuild a complete SaaS web app called ViralMindPro. I am uploading a UI design image. Match it exactly. WHAT IT DOES: AI powered content psychology analyzer for social media creators. Creators upload video/image/thumbnail or paste URL. AI analyzes psychological elements and explains why content will go viral or fail. Gives specific fixes. TECH STACK: React + Vite, Tailwind CSS, Supabase auth and database, Cloudinary file upload, OpenAI GPT-4o Vision for AI, HTML5 Canvas for video frame extraction (no FFmpeg), React Router DOM, Recharts for graphs, Lucide React icons, Razorpay UI ready but disabled showing Coming Soon. COLORS (match UI image exactly): Background #0a0a1a, Cards #1a1a3a, Sidebar #0f0f25, Purple #7c3aed, Cyan #06b6d4, Gradient linear-gradient 135deg #7c3aed to #06b6d4, Text white #ffffff, Gray #94a3b8, Border #2d2d5a, Green #10b981, Yellow #f59e0b, Red #ef4444. Fonts: Plus Jakarta Sans default, JetBrains Mono for numbers. ENV VARIABLES: VITE_OPENAI_API_KEY=add_later VITE_SUPABASE_URL=add_later VITE_SUPABASE_ANON_KEY=add_later VITE_CLOUDINARY_CLOUD_NAME=add_later VITE_CLOUDINARY_UPLOAD_PRESET=add_later VITE_RAZORPAY_KEY_ID=add_later App works in demo mode with mock data when keys not set. SUPABASE TABLES: profiles: id, email, full_name, avatar_url, bio, plan default free, credits default 20, daily_chat_count default 0, daily_analysis_count default 0, last_refill_date, last_chat_reset_date, last_analysis_reset_date, email_verified default false, total_analyses default 0, created_at. analyses: id, user_id, title, content_type, analysis_mode, file_url, thumbnail_url, cloudinary_public_id, file_hash, report jsonb, credits_used, created_at. chat_messages: id, user_id, analysis_id nullable, role, content, created_at. credit_transactions: id, user_id, amount, type, description, created_at. daily_refill_log: id, user_id, refill_date date, credits_given, created_at. Unique on user_id and refill_date. Enable RLS on all tables. Users access only their own data. Trigger on new user: insert profile with 20 credits and insert credit_transaction type signup. SIX PLANS: 1. FREE: 20 credits on signup, 10 credits daily refill, max 50 credits, 5 analyses per day, 10 chats per day, basic image and video only, deep analysis locked, URL locked, advanced features locked. Show lock icons on locked features never hide them. 2. STARTER $5/month 100 credits: deep image unlocked, unlimited chat. 3. CREATOR $15/month 350 credits: deep video unlocked, advanced psychology, full retention, URL analysis. 4. PRO $29/month 800 credits MOST POPULAR: everything, export PDF, priority processing. 5. BUSINESS $50/month 1500 credits: team 5 members, bulk analysis. 6. ENTERPRISE custom pricing: unlimited, custom solutions, Contact Sales. CREDIT COSTS: Image Basic 4, Image Deep 8, Video Basic 8, Video Deep 15, URL Basic 4, URL Deep 8, Chat 0.5 per message. DAILY REFILL LOGIC: On app load check if free plan user. Check daily_refill_log for today. If not refilled and credits below 50, add 10 credits capped at 50. Insert log record. Show toast Your daily 10 credits added. PAGES TO BUILD (match UI image exactly): 1. LANDING PAGE route /: Fixed navbar logo left links center Login Get Started Free right. Hero two column: left has badge H1 with gradient word viral paragraph two CTA buttons trust text social proof. Right has floating animated dashboard mockup. Below: 4 feature cards, 4 step how it works, pricing preview showing all 6 plans with FREE first, testimonials, platforms strip, CTA banner, footer with legal links. 2. LOGIN route /login: Dark centered card. Logo. Welcome Back. Google OAuth button. Divider. Email password inputs. Eye toggle. Forgot password. Sign In gradient button. Error display. Signup link. 3. SIGNUP route /signup: Same style. Create Account. Show 20 Free Credits badge. Google button. Name email password strength bar confirm password. Terms checkbox. Create Account button. After signup show welcome modal. 4. MAIN LAYOUT: Sidebar 240px desktop, 64px icons tablet, hidden mobile with bottom nav. Credits widget bottom: free users show number Daily Refill badge countdown Upgrade button. Top bar: search upgrade bell avatar dropdown. Mobile bottom nav 5 icons. 5. DASHBOARD route /dashboard: Welcome with name. FREE PLAN BANNER for free users showing credits countdown locked features upgrade CTA. 4 stat cards. 4 quick action cards. Recent analyses list. Daily Credits Countdown card. Right credits card and chat preview. Recharts engagement chart. 6. UPLOAD AND ANALYZE route /analyze: 3 tabs Upload File Paste Link From Device. Upload zone with drag drop preview. Right panel after file selected: file details content type toggle analysis mode selector with credit costs. LOCK SYSTEM: deep analysis locked for free users URL tab locked for free users daily limit banner at 5 analyses. Analyze Now button disabled when locked or insufficient. Disclaimer about refund on failure. 7. ANALYSIS REPORT route /report/:id: Fetch from Supabase. Breadcrumb. Title metadata. Score circle SVG animated arc filling from 0 to score on mount colored by score value. 6 tabs Overview Problems Psychology Retention Fixes Details. LOCK OVERLAYS for free users on Psychology advanced sections Retention detailed Fixes most of tab. Overview: two columns, left preview card and Recharts retention graph with red drop point marker, right 5 animated score bars whats working needs improvement AI recommendations. Re-analyze Ask AI Coach buttons. 8. AI CHAT COACH route /chat: FREE USERS: show X of 10 messages used. Disable input at limit. Full viewport. User bubbles right gradient. AI bubbles left dark with brain avatar. Suggestion chips after AI messages. Typing indicator auto scroll. Input textarea Enter sends send button. Disclaimer. Save to Supabase. 9. MY ANALYSES route /analyses: Search filter sort. Grid 3-2-1 columns. Skeleton empty state. Cards with thumbnail badges score date. 10. HISTORY route /history: Chronological grouped by date. Load more. 11. CREDITS AND PLANS route /credits: Monthly yearly toggle. 6 plan cards FREE FIRST AND PROMINENT. Pro Most Popular gold badge. All payment buttons open PaymentComingSoonModal. How Credits Work table. Upgrade motivation section. 12. SETTINGS route /settings: 5 tabs Profile Account Billing Notifications Legal. Legal tab: 4 rows Privacy Terms Refund Contact each with View link. Log Out red button. Billing shows daily credits countdown for free users. 13. PRIVACY POLICY /privacy-policy: Real legal content not Lorem Ipsum. 14. TERMS /terms: Real legal content. 15. REFUND /refund: Real legal content. AI ANALYSIS: OpenAI GPT-4o. If key not configured wait 2 seconds return mock data. If configured call API with image base64 or text prompt. Return JSON with: title, overallScore 0-100, viralPotential one of Great Potential Good Potential Needs Work Low Potential, primaryEmotion one word, contentSummary, hookScore, retentionScore, contentValueScore, engagementScore, trendPotentialScore, whatsWorking array 3 with emojis, needsImprovement array 3 with timestamps and emojis, aiRecommendations array 3 with emojis, retentionData array time and retention, dropPoint object, psychologyInsights object 5 fields, teacherInsight 4-5 warm mentor sentences, bestPlatform, targetAudience, bestPostTime. Deep analysis adds hookAnalysis colorPsychology eyeTracking emotionalTrigger dopamineTrigger mentalImpact. AI Chat system prompt: ViralMind AI Coach, warm mentor, respond in user language Hindi English Hinglish, use emojis, never viral percentage, under 150 words, reference analysis data. VIDEO PROCESSING: HTML5 Canvas only. Create video element seek to 1 second draw to canvas get base64 JPEG. No FFmpeg. CRITICAL RULES: 1. Never charge credits on failed analysis. Always refund. 2. Check credits before analysis. Show UpgradeModal if insufficient. 3. Check feature access before allowing locked features. 4. Only deduct credits after successful analysis AND successful Supabase save. 5. Demo mode: no credits deducted, show demo banner, mock data everywhere. 6. Email verification required for email signup users before analysis. 7. Never hide locked features. Always show with lock icon and upgrade prompt. 8. All errors in friendly Hinglish: Yaar internet check karo, Credits nahi hain upgrade karo, Analysis fail hua credits wapas kar diye. 9. Real-time credit updates via Supabase subscription. 10. PWA configured and installable. REUSABLE COMPONENTS: ScoreCircle SVG animated. RetentionChart Recharts. CreditBalance with countdown for free. DailyRefillCountdown timer to midnight UTC. FeatureLockOverlay with lock icon and upgrade button. FreePlanBanner for dashboard. UpgradeModal. Payment with email capture. Processing screen full overlay with steps. Analysis card. Chat message. PlanCard. PWA Install. Protected route. ROUTING: Public: / /login /signup /privacy-policy /terms /refund Protected: /dashboard /analyze /chat /analyses /history /credits /settings /report/:id Authenticated at / redirects to /dashboard. Build everything completely. Match UI image exactly. Mobile responsive at 375px with bottom navigation. Skeleton loading everywhere. No blank screens.
Comments (0)
Sign in to leave a comment
System Requirements
zen-content System Requirements Document
0. Application Specification
1. Introduction
The purpose of this document is to outline the system requirements for the zen-content project, an AI-powered content psychology analyzer designed for social media creators. This document will provide a comprehensive overview of the system's functionality, user personas, visual design, and technical specifications.
2. System Overview
The zen-content platform is a SaaS web application that allows social media creators to analyze the psychological elements of their content. By uploading videos, images, or thumbnails, or by pasting URLs, users can receive insights into why their content might go viral or fail, along with specific recommendations for improvement. The system leverages AI technology to provide these analyses and supports various user roles and subscription plans.
2. Pages / Screens
3. Functional Requirements
- As a Content Creator, I should be able to upload videos, images, or thumbnails for analysis.
- As a Content Creator, I should be able to paste URLs for content analysis.
- As a User, I should receive a detailed report explaining the psychological elements of my content.
- As a User, I should be able to view specific recommendations for improving my content's virality.
- As a User, I should be able to access different features based on my subscription plan.
- As a User, I should be able to manage my profile and subscription details.
- As a User, I should be able to view my analysis history and credit usage.
- As an Admin, I should be able to manage user accounts and subscription plans.
Landing Page
- Theme: Dark purple
- Logo: Brain + Play
- Tagline: "Know Why Your Content Goes Viral"
- Navigation: Sidebar on the left
- Feature: Pricing cards in a row
Dashboard
- Sidebar: Left, active purple
- Stats: 4 cards
- Quick Actions: 4 buttons
- Recent Analyses: List
- AI Chat: Right panel
- Free Plan: Daily Credits section
Pricing
- Plans:
- FREE PLAN: $0
- Creator: $5
- Pro: $15
- PRO MOST POPULAR: $29 (highlighted)
- Business: $50
- Enterprise: Custom
Upload
- Tab: Upload active
- Feature: Drag and drop zone
- Panel: Selected File on the right
- Content Type: Video/Image
- Analysis Mode: Basic/Deep
- Credit Cost: Shown
- Button: Analyze Now (purple)
Analysis Report
- Score: Circle 85/100
- Tabs: Overview, Hook, Retention, Psychology, Content, Audience, Recommendation
- Graph: Retention with drop point
- Score Breakdown: Bars
- Lists: What's Working, Needs Improvement
AI Chat
- Interface: Clean chat
- User Message: Right, purple
- AI Response: Left
- Suggestions: 3 fix suggestions below
- Buttons: Fix my hook, Improve retention, Make it viral
Settings
- Tab: Profile active
- Tabs: Profile, Billing, Credits, Notifications, Security, API
- Sections: Profile info, Plan info
- Credits: 10/10 with timer
- Payment History: Shown
- Legal Links: Right side
- Button: Log Out (red)
4. User Personas
- Content Creator: The primary user of the platform, interested in optimizing their social media content for virality.
- Admin: Responsible for managing user accounts, subscription plans, and overseeing platform operations.
5. Visuals Colors and Theme
The following color palette is designed specifically for the zen-content project:
- primary: #7c3aed (Purple)
- primary_light: #b794f4 (Light Purple)
- secondary: #06b6d4 (Cyan)
- accent: #f59e0b (Yellow)
- highlight: #ef4444 (Red)
- bg: #0a0a1a (Dark Background)
- surface: rgba(26, 26, 58, 0.8) (Card Background)
- text: #ffffff (White)
- text_muted: #94a3b8 (Gray)
- border: rgba(45, 45, 90, 0.2) (Subtle Border)
6. Signature Design Concept
The zen-content homepage will feature an interactive "Content Galaxy" concept. Users will navigate a 3D galaxy where each star represents a different content analysis feature. Using @react-three/fiber and @react-three/drei, users can click on stars to open feature details, drag to rotate the galaxy, and hover to highlight connections between features. This immersive experience will make exploring the platform's capabilities engaging and memorable.
7. Interaction Model & Motion Direction
The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative elements, such as atmospheric blobs and distant shapes, will move at different speeds, enhancing the storytelling aspect. Internal pages, such as the dashboard and settings, will follow a "static" interaction model for clarity and ease of use.
8. Non-Functional Requirements
- The system must support high availability and scalability to accommodate a growing user base.
- The platform should ensure data security and user privacy, complying with relevant regulations.
- The application should be responsive and perform optimally across various devices and screen sizes.
9. Tech Stack
- Frontend: React + Vite, Tailwind CSS
- Backend: Supabase (auth and database)
- File Upload: Cloudinary
- AI: OpenAI GPT-4o Vision
- Video Processing: HTML5 Canvas
- Routing: React Router DOM
- Graphs: Recharts
- Icons: Lucide React
- Payment: Razorpay (UI ready, disabled)
9.1 Environment Variables
- OpenAI API: VITE_OPENAI_API_KEY
- Supabase: VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY
- Cloudinary: VITE_CLOUDINARY_CLOUD_NAME, VITE_CLOUDINARY_UPLOAD_PRESET
- Razorpay: VITE_RAZORPAY_KEY_ID
10. Assumptions and Constraints
- The platform will initially target content creators in India, with potential expansion to other regions.
- The UI design must match the provided design image exactly.
- The application will operate in demo mode with mock data if environment variables are not set.
11. Glossary
- AI: Artificial Intelligence
- SaaS: Software as a Service
- UI: User Interface
- API: Application Programming Interface
- RLS: Row-Level Security
This document provides a comprehensive overview of the zen-content project, ensuring that all stakeholders have a clear understanding of the system's requirements and design.
Know Why Your Content Goes Viral
Decode the psychology behind viral content. Upload videos, images, or thumbnails and get AI-powered insights that reveal what makes audiences engage, share, and come back for more.
Explore the Content Galaxy
Each star represents a powerful feature of zen-content. Click to discover, drag to rotate, and explore the constellation of tools at your fingertips.
Everything you need to decode virality
Powerful AI tools that reveal the psychology behind high-performing content — so you can create with intention, not guesswork.
AI-Powered Analysis
Leverage GPT-4o Vision to decode the psychological triggers in your content — from color psychology to emotional pacing — and understand exactly what drives engagement.
Instant Insights
Upload a video, image, or thumbnail and receive a comprehensive psychology breakdown in seconds. No waiting, no queues — just fast, actionable intelligence.
Actionable Recommendations
Go beyond data. Get specific, prioritized suggestions to boost virality — from thumbnail tweaks to hook restructuring — tailored to your platform and audience.
Content History
Track every analysis in your personal timeline. Compare performance across posts, spot trends in your content strategy, and measure improvement over time.
From Upload to Action in Minutes
Four simple steps to unlock the psychology behind viral content. No guesswork, no complexity — just clear, data-driven insights.
Upload Content
Drop your video, image, or thumbnail — or paste a URL. We support all major social platforms and file formats.
Select Analysis Type
Choose from virality prediction, audience psychology profiling, emotional trigger mapping, or thumbnail effectiveness scoring.
Get AI Insights
Our GPT-4o Vision model dissects the psychological hooks, color theory, composition, and emotional resonance of your content.
Implement Recommendations
Receive prioritized, actionable recommendations you can apply immediately to boost engagement and reach.
Built for Creators Who Think Deeper
Go beyond vanity metrics. Understand the psychology behind every scroll, click, and share — then use it to craft content that truly connects.
Psychology-Driven Insights
Understand the subconscious triggers that make content resonate. Our AI decodes emotional patterns, cognitive biases, and persuasion techniques embedded in your posts.
- Emotional engagement scoring based on 12 psychological dimensions
- Cognitive bias detection for hooks, thumbnails, and CTAs
- Sentiment arc analysis across video timelines
- Cultural context awareness for global audiences
Real-Time Recommendations
Get instant, actionable suggestions as you create. Our engine analyzes trending patterns and delivers personalized optimization tips tailored to your niche and audience.
- Trending hook patterns updated every 30 minutes
- Platform-specific optimization for TikTok, YouTube, Instagram
- A/B thumbnail comparison with predicted CTR
- Timing recommendations based on audience activity peaks
Multi-Format Support
Analyze any content type from any platform. Upload videos, images, thumbnails, or paste URLs — zen-content adapts its psychology lens to each format automatically.
- Video frame-by-frame attention heatmaps
- Thumbnail composition and color psychology analysis
- Caption and copy persuasion scoring
- Cross-platform performance prediction models
Social Proof
Creators Who Leveled Up
Thousands of content creators trust zen-content to decode the psychology behind viral content. Here is what they have to say.
zen-content completely changed how I approach thumbnails. My click-through rate jumped 40% in just two weeks after following the psychology insights.
"The emotional trigger analysis is unreal."
I was stuck at 50K followers for months. After using the virality predictor and adjusting my hooks, I hit 200K in 6 weeks. This tool understands the algorithm.
"The hook analysis alone is worth the subscription."
Every reel I post now gets analyzed first. The color psychology and composition feedback helped me develop a visual style that actually stops the scroll.
"My Reels save rate tripled overnight."
Simple, Transparent Pricing
Choose the plan that matches your content strategy. Scale up as your audience grows — no hidden fees, cancel anytime.
- Basic psychology analysis
- Thumbnail effectiveness score
- Single content upload
- Standard AI model
- Everything in Free
- Enhanced psychology analysis
- URL paste analysis
- Content history access
- Email support
- Everything in Creator
- Deep analysis mode
- Batch content uploads
- Retention graph analysis
- PDF report export
- Priority support
- Everything in Pro
- GPT-4o Vision deep analysis
- Virality prediction score
- AI Chat coaching
- Competitor benchmarking
- Audience psychology profiles
- Priority processing
- Everything in Pro $29
- Team collaboration (up to 10)
- White-label reports
- API access
- Dedicated account manager
- Custom branding
- Everything in Business
- Unlimited team members
- Custom AI model tuning
- Webhooks & integrations
- SSO & advanced security
- SLA & premium support
Trusted by Creators Worldwide
Featured by leading platforms
Ready to Level Up Your Content?
Unlock AI-powered psychology insights that reveal why content goes viral. Analyze thumbnails, videos, and posts in seconds — and get actionable recommendations to boost engagement.
No spam, ever. Unsubscribe anytime.
Know Why Your Content Goes Viral
Decode the psychology behind viral content. Upload videos, images, or thumbnails and get AI-powered insights that reveal what makes audiences engage, share, and come back for more.
Explore the Content Galaxy
Each star represents a powerful feature of zen-content. Click to discover, drag to rotate, and explore the constellation of tools at your fingertips.
Everything you need to decode virality
Powerful AI tools that reveal the psychology behind high-performing content — so you can create with intention, not guesswork.
AI-Powered Analysis
Leverage GPT-4o Vision to decode the psychological triggers in your content — from color psychology to emotional pacing — and understand exactly what drives engagement.
Instant Insights
Upload a video, image, or thumbnail and receive a comprehensive psychology breakdown in seconds. No waiting, no queues — just fast, actionable intelligence.
Actionable Recommendations
Go beyond data. Get specific, prioritized suggestions to boost virality — from thumbnail tweaks to hook restructuring — tailored to your platform and audience.
Content History
Track every analysis in your personal timeline. Compare performance across posts, spot trends in your content strategy, and measure improvement over time.
From Upload to Action in Minutes
Four simple steps to unlock the psychology behind viral content. No guesswork, no complexity — just clear, data-driven insights.
Upload Content
Drop your video, image, or thumbnail — or paste a URL. We support all major social platforms and file formats.
Select Analysis Type
Choose from virality prediction, audience psychology profiling, emotional trigger mapping, or thumbnail effectiveness scoring.
Get AI Insights
Our GPT-4o Vision model dissects the psychological hooks, color theory, composition, and emotional resonance of your content.
Implement Recommendations
Receive prioritized, actionable recommendations you can apply immediately to boost engagement and reach.
Built for Creators Who Think Deeper
Go beyond vanity metrics. Understand the psychology behind every scroll, click, and share — then use it to craft content that truly connects.
Psychology-Driven Insights
Understand the subconscious triggers that make content resonate. Our AI decodes emotional patterns, cognitive biases, and persuasion techniques embedded in your posts.
- Emotional engagement scoring based on 12 psychological dimensions
- Cognitive bias detection for hooks, thumbnails, and CTAs
- Sentiment arc analysis across video timelines
- Cultural context awareness for global audiences
Real-Time Recommendations
Get instant, actionable suggestions as you create. Our engine analyzes trending patterns and delivers personalized optimization tips tailored to your niche and audience.
- Trending hook patterns updated every 30 minutes
- Platform-specific optimization for TikTok, YouTube, Instagram
- A/B thumbnail comparison with predicted CTR
- Timing recommendations based on audience activity peaks
Multi-Format Support
Analyze any content type from any platform. Upload videos, images, thumbnails, or paste URLs — zen-content adapts its psychology lens to each format automatically.
- Video frame-by-frame attention heatmaps
- Thumbnail composition and color psychology analysis
- Caption and copy persuasion scoring
- Cross-platform performance prediction models
Social Proof
Creators Who Leveled Up
Thousands of content creators trust zen-content to decode the psychology behind viral content. Here is what they have to say.
zen-content completely changed how I approach thumbnails. My click-through rate jumped 40% in just two weeks after following the psychology insights.
"The emotional trigger analysis is unreal."
I was stuck at 50K followers for months. After using the virality predictor and adjusting my hooks, I hit 200K in 6 weeks. This tool understands the algorithm.
"The hook analysis alone is worth the subscription."
Every reel I post now gets analyzed first. The color psychology and composition feedback helped me develop a visual style that actually stops the scroll.
"My Reels save rate tripled overnight."
Simple, Transparent Pricing
Choose the plan that matches your content strategy. Scale up as your audience grows — no hidden fees, cancel anytime.
- Basic psychology analysis
- Thumbnail effectiveness score
- Single content upload
- Standard AI model
- Everything in Free
- Enhanced psychology analysis
- URL paste analysis
- Content history access
- Email support
- Everything in Creator
- Deep analysis mode
- Batch content uploads
- Retention graph analysis
- PDF report export
- Priority support
- Everything in Pro
- GPT-4o Vision deep analysis
- Virality prediction score
- AI Chat coaching
- Competitor benchmarking
- Audience psychology profiles
- Priority processing
- Everything in Pro $29
- Team collaboration (up to 10)
- White-label reports
- API access
- Dedicated account manager
- Custom branding
- Everything in Business
- Unlimited team members
- Custom AI model tuning
- Webhooks & integrations
- SSO & advanced security
- SLA & premium support
Trusted by Creators Worldwide
Featured by leading platforms
Ready to Level Up Your Content?
Unlock AI-powered psychology insights that reveal why content goes viral. Analyze thumbnails, videos, and posts in seconds — and get actionable recommendations to boost engagement.
No spam, ever. Unsubscribe anytime.
No comments yet. Be the first!