ChatAI with ImageAI Bot
Budget: $25 – $50 USD
1. Frontend Developer Tasks
A) UI/UX Screens
[ ] Signup/Login Screen → Google/Email/Phone OTP (Firebase Auth).
[ ] Dashboard → Show chats left, images left, referral code.
[ ] Chat Window → Text input, reply display, disable when limit reached → popup "Upgrade Plan".
[ ] Image Window → Prompt input + “Generate” button (disable when credits = 0).
[ ] Popup System → Buy Pack, Referral reward messages, Upgrade prompts.
[ ] Plans Page → Starter ₹299, Pro ₹599, Premium ₹1199 + Image Packs (₹79, 199, 399, 999).
[ ] Referral Section → Show invite link + “Invite & Earn” banner.
B) Integrations
[ ] Call backend API for chat (/api/chat).
[ ] Call backend API for image (/api/image/generate).
[ ] Call backend API for credits (/api/credits).
[ ] Razorpay Checkout UI integration.
---
2. Backend Developer Tasks
A) Auth & Users
[ ] Firebase/Supabase Auth integration.
[ ] users table → name, email, plan, referral_code, referred_by.
B) Subscriptions
[ ] /api/subscribe endpoint → create Razorpay order.
[ ] Razorpay webhook → activate plan, assign chat & image credits.
[ ] Credits reset monthly on renewal.
C) Image Packs
[ ] /api/image/buy endpoint → create Razorpay order.
[ ] Webhook → add image credits (10, 25, 50, 200).
[ ] Expiry system (15–90 days validity).
D) Usage Management
[ ] /api/chat → deduct chat credit, call GPT API.
[ ] /api/image/generate → deduct image credit, call DALL·E API.
[ ] Atomic transactions (no double deduction).
E) Referral System
[ ] Store referred_by on signup.
[ ] On signup → +5 images to inviter + invitee.
[ ] On first paid subscription → +10 images to inviter.
F) Logging
[ ] usage_logs table → track each chat/image + cost estimate.
[ ] Admin panel → total revenue, cost, profit calculation.
---
3. Infra / Fullstack Dev Tasks
[ ] Deploy Frontend → Vercel/Netlify.
[ ] Deploy Backend → Railway/Render/Fly.io.
[ ] Database → Firebase (simple) or Supabase (SQL).
[ ] Image storage → Cloudinary (free tier) or Firebase Storage.
[ ] Monitoring → Sentry for errors, Google Analytics for usage.
---
Flow Examples
Chat Flow
User → Chat UI → /api/chat → Check credits → GPT API → Reply + Decrement credit.
Image Flow
User → Image UI → /api/image/generate → Check image credits → If >0 → Call DALL·E → Return URL + Deduct 1 credit.
If 0 → Popup → “Buy Pack”.
Referral Flow
User shares referral link → Friend signup → Backend adds +5 credits both.
Friend buys Starter+ plan → Inviter gets +10 credits.
---
Priority Build Order (MVP)
1. Auth + DB setup
2. Subscription flow (Starter ₹299 with chats+images)
3. Image pack purchase (10 images @ ₹79)
4. Chat & Image API integration
5. Referral system basic (signup reward)
6. Popups & UX for locked features
7. Deployment (Vercel + Railway)
A) UI/UX Screens
[ ] Signup/Login Screen → Google/Email/Phone OTP (Firebase Auth).
[ ] Dashboard → Show chats left, images left, referral code.
[ ] Chat Window → Text input, reply display, disable when limit reached → popup "Upgrade Plan".
[ ] Image Window → Prompt input + “Generate” button (disable when credits = 0).
[ ] Popup System → Buy Pack, Referral reward messages, Upgrade prompts.
[ ] Plans Page → Starter ₹299, Pro ₹599, Premium ₹1199 + Image Packs (₹79, 199, 399, 999).
[ ] Referral Section → Show invite link + “Invite & Earn” banner.
B) Integrations
[ ] Call backend API for chat (/api/chat).
[ ] Call backend API for image (/api/image/generate).
[ ] Call backend API for credits (/api/credits).
[ ] Razorpay Checkout UI integration.
---
2. Backend Developer Tasks
A) Auth & Users
[ ] Firebase/Supabase Auth integration.
[ ] users table → name, email, plan, referral_code, referred_by.
B) Subscriptions
[ ] /api/subscribe endpoint → create Razorpay order.
[ ] Razorpay webhook → activate plan, assign chat & image credits.
[ ] Credits reset monthly on renewal.
C) Image Packs
[ ] /api/image/buy endpoint → create Razorpay order.
[ ] Webhook → add image credits (10, 25, 50, 200).
[ ] Expiry system (15–90 days validity).
D) Usage Management
[ ] /api/chat → deduct chat credit, call GPT API.
[ ] /api/image/generate → deduct image credit, call DALL·E API.
[ ] Atomic transactions (no double deduction).
E) Referral System
[ ] Store referred_by on signup.
[ ] On signup → +5 images to inviter + invitee.
[ ] On first paid subscription → +10 images to inviter.
F) Logging
[ ] usage_logs table → track each chat/image + cost estimate.
[ ] Admin panel → total revenue, cost, profit calculation.
---
3. Infra / Fullstack Dev Tasks
[ ] Deploy Frontend → Vercel/Netlify.
[ ] Deploy Backend → Railway/Render/Fly.io.
[ ] Database → Firebase (simple) or Supabase (SQL).
[ ] Image storage → Cloudinary (free tier) or Firebase Storage.
[ ] Monitoring → Sentry for errors, Google Analytics for usage.
---
Flow Examples
Chat Flow
User → Chat UI → /api/chat → Check credits → GPT API → Reply + Decrement credit.
Image Flow
User → Image UI → /api/image/generate → Check image credits → If >0 → Call DALL·E → Return URL + Deduct 1 credit.
If 0 → Popup → “Buy Pack”.
Referral Flow
User shares referral link → Friend signup → Backend adds +5 credits both.
Friend buys Starter+ plan → Inviter gets +10 credits.
---
Priority Build Order (MVP)
1. Auth + DB setup
2. Subscription flow (Starter ₹299 with chats+images)
3. Image pack purchase (10 images @ ₹79)
4. Chat & Image API integration
5. Referral system basic (signup reward)
6. Popups & UX for locked features
7. Deployment (Vercel + Railway)