Skip to content

CREDITS_SYSTEM.md

Latest commit

 

History

History
144 lines (112 loc) · 4.5 KB

CREDITS_SYSTEM.md

File metadata and controls

144 lines (112 loc) · 4.5 KB

Credit System Implementation Summary

✅ Completed Implementation

1. Database Migration (004_add_credits_system.sql)

  • Created user_credits table with:
    • credits_remaining: Default 50 credits for new users
    • total_credits_used: Tracking lifetime usage
    • Unique constraint on user_id
  • Updated handle_new_user() trigger to create credits entry on signup
  • Created deduct_credit() function for safe credit deduction
  • Implemented RLS policies for secure access

2. Credits Hook (src/hooks/useCredits.ts)

  • Anonymous Users (localStorage-based):

    • Max 3 free generations
    • Max 3 free prompt views
    • Tracked in vibe_anonymous_limits
    • Cleared on login

  • Logged-in Users (database-based):

    • 50 credits on signup
    • Real-time credit checking
    • Credit deduction with database transaction

  • Functions:

    • hasCredits(): Check if user can generate
    • deductCredit(): Deduct 1 credit (works for both anonymous and logged-in)
    • getCreditsRemaining(): Get remaining credits count
    • canAnonymousView(): Check if anonymous user can view prompts
    • incrementAnonymousView(): Track prompt views for anonymous users

3. Navbar Updates (src/components/Navbar.tsx)

  • ✅ Removed "Generate" link from navbar
  • Users can only access /generate through:
    • Hero page example prompts
    • Direct URL (with credit checks)

4. Generate Page Updates (src/pages/GeneratePromptPage.tsx)

  • Credit Display: Shows remaining credits/generations in header
  • Credit Check: Validates credits before generation
  • Credit Deduction: Automatic 1 credit deduction on successful generation
  • Limit Modal: Shows when credits exhausted with:
    • Anonymous users: Sign up prompt
    • Logged-in users: "No credits remaining" message
  • Toast Notifications: Shows remaining credits after generation

5. Prompts Page Updates (src/pages/MyPromptsPage.tsx)

  • Anonymous Users:
    • Limited to viewing 3 prompts max
    • Tracks view count in localStorage
    • Shows limit modal after 3 views with signup prompt
  • Logged-in Users:
    • Full access to all public prompts + own prompts
    • No view limits

🎯 User Flow

Anonymous User Flow:

  1. Visit Home Page ✅ Free access
  2. Click Example Prompt → Goes to /generate
  3. Generate Prompt → Uses 1 of 3 free generations
  4. After 3 Generations → Modal: "Sign up to continue"
  5. View Prompts → Can view 3 prompts
  6. After 3 Views → Modal: "Sign up for full access"

Logged-in User Flow:

  1. Sign Up → Receives 50 credits automatically
  2. Navigate to /generate (via hero examples)
  3. See Credits → Display shows "X credits remaining"
  4. Generate Prompt → Deducts 1 credit
  5. View All Prompts → No limits, full access
  6. No Credits Left → Modal: "More features coming soon"

🔒 Security

  • ✅ RLS policies protect user_credits table
  • ✅ deduct_credit() function uses SECURITY DEFINER
  • ✅ Anonymous tracking can't be manipulated server-side
  • ✅ Credit deduction is transactional (atomic)
  • ✅ No direct user access to modify credits

📊 Credit System Details

User Type Generations Prompt Views Storage
Anonymous 3 free 3 free localStorage
Signed Up 50 credits Unlimited Database
Out of Credits 0 Unlimited views -

🚀 Future Enhancements

  • Add credit purchase system
  • Add credit top-up functionality
  • Track token usage (advanced pricing)
  • Add subscription tiers
  • Credit history/analytics page
  • Email notifications for low credits

📝 Migration Instructions

To apply the credit system:

# Option 1: Apply specific migration
npx supabase migration up

# Option 2: Reset database (development only)
npx supabase db reset

# Option 3: Apply to remote Supabase (production)
npx supabase db push

🧪 Testing Checklist

  • Anonymous user can generate 3 times
  • Anonymous user sees limit modal after 3 generations
  • Anonymous user can view 3 prompts
  • Anonymous user sees limit modal after 3 views
  • Signup creates user with 50 credits
  • Credits display correctly in generate page
  • Credit deduction works on generation
  • Logged-in user with 0 credits sees modal
  • Generate link removed from navbar
  • Hero example prompts still work
  • localStorage cleared on login

Implementation Date: November 13, 2025
Status: ✅ Complete and Functional