zen-content

byVijay Kandulna

Build 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.