✅ FINAL V0 FULL STACK PROMPT (Copy-Paste into V0.dev)

Design a complete, **full-stack** fun and edgy self-control tracking app called **FapFuel** using **Next.js with backend routes (app router)** and **MongoDB** as the database. The app should be **fully dynamic**, not static. All content, user data, roasts, coins, streaks, etc. must come from the backend.  
  
🎯 App Purpose: Gamified tracker for logging urges, tracking faps, building streaks, and roasting users with fun AI-style humor.  
  
### 🧱 Tech Stack  
  
- Framework: Next.js 14+ (App Router)  
- Backend: API Routes (e.g. `/api/log-fap`, `/api/streak`, etc.)  
- Database: MongoDB (with models for `User`, `FapLog`, `Streak`, `Roast`)  
- Auth: Simple login/signup via email/password (session or JWT)  
- Payment: Razorpay integration (subscription-based $4/month)  
- Hosting: Vercel  
  
---  
  
### 📱 Pages  
  
#### 1. `/` — **Landing Page**  
- Catchy tagline: “Wanna fap? Log it. Roast yourself. Become a meme.”  
- CTA button: "👉 Fap Here (It’s Free)"  
- Features grid: Fap Counter, AI Roasts, Meme Leaderboard, Panic Button  
- Razorpay section with real payment button  
- Testimonial section (dynamic via backend)  
- Styled with clean modern animations, micro-interactions, and smooth scroll  
  
#### 2. `/auth` — **Login & Signup**  
- Email/password login  
- Clean UI with “Forgot password?”  
- Backend integration to auth route  
- On login: redirect to `/dashboard`  
  
#### 3. `/dashboard`  
- **Fap Button**: When pressed, triggers API call to `/api/fap`  
- **Streak Counter**: Retrieved from backend  
- **FapCoins**: Earned daily for not fapping  
- **AI Roast Box**: Loads from `/api/roast` (random from DB or OpenAI)  
- **Mood Tracker**: Buttons like 😃 😐 😩 sent to `/api/mood`  
- **Trigger Log**: Checkbox form (stress, boredom, etc.)  
  
#### 4. `/profile`  
- Edit name, avatar, email  
- Show current streak, longest streak, total faps logged  
- Account delete option  
  
#### 5. `/premium`  
- Razorpay button → call `/api/create-payment`  
- Feature list: Streak Shield™, Panic Button, Meme Store  
- If user is premium, show thank-you state  
  
#### 6. `/stats`  
- Weekly fap chart (data from `/api/faps`)  
- Pie chart of triggers (from logs)  
- Bar chart of mood correlation  
- Streak milestones  
  
---  
  
### 📂 Backend API Routes (Next.js `app/api/`)  
  
- `POST /api/signup` – create user  
- `POST /api/login` – auth user  
- `POST /api/fap` – logs a fap, resets streak  
- `GET /api/streak` – returns current streak  
- `POST /api/mood` – logs daily mood  
- `GET /api/stats` – returns user stats  
- `POST /api/create-payment` – creates Razorpay payment link  
- `GET /api/roast` – returns a random roast from DB or static list  
  
---  
  
### 💾 MongoDB Collections  
  
- `users`: { _id, email, password (hashed), streak, coins, isPremium, name, avatar }  
- `fapLogs`: { userId, timestamp, mood, trigger }  
- `moods`: { userId, date, mood }  
- `roasts`: { _id, content }  
  
---  
  
### 🎨 UI Guidelines  
  
- Clean, modern dark UI  
- Pink (#ec4899) and purple (#9333ea) for accent  
- Rounded bold fonts (like Inter or Satoshi)  
- Emoji support (💦, 😇, 🔥)  
- Mobile-first layout with smooth transitions  
- Fun micro-interactions (e.g., Fap button wiggles on hover)  
- Use shadcn/ui or Tailwind + Framer Motion for animation  
  
---  
  
### 👌 Notes  
  
- EVERYTHING must be dynamic (roasts, coins, streaks, etc.)  
- Show loading states and error handling  
- Avoid "AI-looking" placeholders — make it clean and polished  
- No static HTML mockups — generate Next.js components + backend logic  

---

✅ What to Do After V0 Generates

1. Review the generated code and extract the backend routes (or tell it to give you those too).

2. Connect it to your MongoDB Atlas DB.

3. Wire up Razorpay with test credentials for now.

4. Replace static roast messages with either:

   • A roast DB seeded with 100+ jokes, or
   • OpenAI roast endpoint for dynamic content

5. Deploy to Vercel.

6. Test flows: login → dashboard → fap log → streak updates → premium → charts.

---

• Game system: quests, leaderboards, ranked mode
• Community & social features
• Premium tracking after 100+ faps/month
• Gemini API chat for premium users (limited for free users)
• Porn link tracker section
• Classy modern UI — not AI-looking, visually awesome

---

✅ 🔥 FINAL V0 UPGRADED PROMPT (Copy this to v0.dev)

Update the current full-stack **FapFuel** app to include the following major upgrades and redesigns. Keep using **Next.js App Router**, **MongoDB**, **JWT Auth**, **API Routes**, and **Razorpay integration** for payment.  
  
The UI must **not look like it was AI-generated**. Instead, it should feel like a **premium product**, clean and modern, with well-aligned elements, proper font hierarchy, animated interactions, and tasteful use of colors like hot pink (#ec4899) and violet (#9333ea). Use Tailwind CSS and Framer Motion for animations.  
  
---  
  
### 🎮 New Feature Additions (Game Mechanics):  
  
1. **Competitive System**  
   - Daily/weekly **quests** (e.g., "Survive 3 days", "Avoid trigger browsing", "Log 3 moods")  
   - **Leaderboards**: Top users with longest streaks, most faps logged, most quests completed (global and friends)  
   - **Ranked Mode**: Users are assigned ranks like "Bronze", "Silver", "Gold", "NoNut God" based on performance  
   - Backend should store quests, completions, and assign ranks  
  
## 🪙 Gamification  
  
- XP bar, levels, badges  
- FapCoins used to unlock profile themes, sounds, roasts  
- Sound FX: fap button SFX, roast voice, badge unlock tone  
- “Streak Shield™” powerup to cover 1 lost day (Fap+)  
2. **Communities Section**  
   - Page where users can create or join **anonymous communities** (MongoDB: `communities`)  
   - Each community has members, streak averages, memes posted  
   - A discussion board or message thread (text only, no chat needed)  
  
3. **Premium Rules (New Policy)**  
   - **Only users with 100+ faps/month** can unlock the option to **purchase premium**  
   - If a user tries to upgrade early, show a funny alert: "Bro, grind first. You ain't even fapping enough."  
   - Once eligible, allow Razorpay payment to unlock FapFuel+  
  
4. **Gemini AI Chat (Premium Only)**  
   - Premium users can chat with a Gemini-powered coach (text box for now)  
   - Non-premium users get only **2 messages per day**  
   - Use mock Gemini responses unless integrated  
  
5. **Porn Tracker Page**  
   - Users can paste or bookmark **porn links they watched**  
   - Show a sarcastic tracker: "You visited this 12 times this month. Go touch grass."  
   - Backend should log links and timestamps  
   - Add a “Shame Scale” with percentage bar### 🔞 Porn Tracker Page (`/porn-tracker`)  
**New Feature Additions:**  
  
- Users can paste and log porn URLs they visited  
- Each link click is tracked with a **click counter**  
- Show total number of **videos watched**  
- Visual bar showing which links were clicked most  
- “Shame Meter” based on how often they watch (e.g. 12+ links/day = 🔥 Danger Zone)  
- Time-based chart: faps + links over time  
  
API:    
- `POST /api/porn-links` — logs video link + timestamp    
- `GET /api/porn-stats` — returns counts + history  
  
MongoDB Schema:    
- `pornLinks`: { userId, url, clicks, timestamps[] }  
  
---  
  
### 🎨 UI/UX Overhaul:  
  
- Rebuild layout so it looks **human-designed**, not AI-generated:  
  - Avoid stacked, unstyled boxes  
  - Use proper grid spacing, clear sections  
  - Make leaderboard, dashboard, and profile pages **look like a real web app**  
- Add **Framer Motion animations** to buttons, section transitions, hover effects  
- **Mobile responsive** and retina sharp  
- Each page should feel like a "feature", not a template  
  
---  
  
### 🧑‍💻 Backend Integration (Already Exists):  
  
Keep using:  
- `/api/fap`, `/api/streak`, `/api/stats`, `/api/roast`  
- Add:  
  - `/api/quests`, `/api/leaderboard`, `/api/rank`  
  - `/api/community`, `/api/post-message`  
  - `/api/porn-links`, `/api/gemini-chat`  
  - Track premium eligibility via `fapsThisMonth` field on user  
  
---  
  
### 📂 MongoDB Schema Additions:  
  
- `communities`: { name, members, posts }  
- `quests`: { title, description, xp, completedBy }  
- `pornLinks`: { userId, url, timestamp }  
- `messages`: { userId, message, response }  
- Extend `users` with: { fapsThisMonth, rank, eligibleForPremium }  
  
---  
  
### 🚀 Pages Summary:  
  
- `/dashboard`: fap button, roast, streaks, coins, mood, leaderboard widget  
- `/quests`: list of tasks, claim XP, animated progress bar  
- `/ranked`: show rank, how to level up  
- `/communities`: join/create groups, browse top ones  
- `/premium`: Razorpay paywall with eligibility logic  
- `/porn-tracker`: show visited links, shame tracker  
- `/chat`: Gemini-powered advice bot (premium/free-limited)  
- `/profile`: all-time stats, settings  
  
---  
  
Make this app feel polished, fun, **not like an MVP**, but like something viral-ready. Every part should feel dynamic and usable.  

---

✅ After V0 Generates Code:

1. Review it section by section.

2. Integrate:

   • Gemini API where needed
   • Razorpay rules in /api/create-payment
   • MongoDB changes via Mongoose or MongoDB native driver

3. Style leaderboard and dashboard with Framer Motion, not raw HTML.

---

🎁 Want me to do next?

I can generate:

• MongoDB schema for quests, porn logs, community
• Gemini chat backend handler (limited + premium unlock)
• Razorpay backend logic for “100 faps minimum” rule
• Complete streak/rank/XP calculation backend

Just say “Start backend logic now” and I’ll generate it for you.

Great! If you're integrating Gemini AI (via the generative-language API) for your premium users to talk with an AI about porn addiction recovery, then you need a well-defined system prompt to steer the assistant's tone, behavior, and response style.

Below is:

1. ✅ A safe and effective system prompt for porn addiction support
2. ✅ JavaScript/Node-style Gemini API setup code
3. ✅ Bonus: How to enforce daily message limits for free users

---

✅ 1. System Prompt for Gemini Chat in FapFuel

Use this system prompt to initialize the chat:

You are a supportive, honest, and slightly humorous coach helping users recover from porn addiction and over-fapping. Your goal is to keep them motivated, focused, and aware of their goals.  
  
Keep a friendly and casual tone but be serious when needed. Avoid judgment — instead, offer empathy, real strategies, daily routines, and motivation. Refer to their streak progress, urges, or emotions if provided. Never mention you're an AI, just behave like a helpful friend.  
  
Do not give medical or psychiatric advice. Never mention adult content directly. Use euphemisms like “urges,” “habits,” or “triggers.” Your mission is to help them level up, break the cycle, and become more focused.  
  
Examples:  
- “You’re stronger than this urge. You’ve gone 3 days already — let’s hit 5.”  
- “Try 20 push-ups next time the urge hits. Works for 80% of people 😉”  
- “It’s okay to slip. Reset. Reflect. Restart. You’ve got this.”  
  
Use emojis and short, friendly responses. Always encourage users.  

---

✅ 2. Gemini API Integration Example

Here's how you’d set it up in your backend using Node.js + Gemini API:

import { GoogleGenerativeAI } from "@google/generative-ai";  
  
const genAI = new GoogleGenerativeAI("AIzaSyDUTC_QKqNCZZYkkwTUEh-2f9Zj6bkkHMM");  
  
// Create a model  
const model = genAI.getGenerativeModel({  
  model: "gemini-pro",  
  systemInstruction: `You are a supportive, honest...` // Use full prompt from above  
});  
  
// Generate a message  
const chat = await model.startChat({  
  history: [], // Optional if you want memory  
});  
  
const result = await chat.sendMessage("I'm having urges again and broke my streak");  
  
const response = await result.response;  
console.log(response.text());  

---

✅ 3. Optional: Limit Free Users to 2 Messages/Day

In your backend route:

// Check today's date messages  
const today = new Date().toISOString().slice(0, 10);  
  
const messageCount = await db.messages.countDocuments({  
  userId,  
  date: today,  
});  
  
if (!user.isPremium && messageCount >= 2) {  
  return res.status(403).json({ message: "Free users get 2 chats/day. Upgrade to FapFuel+" });  
}  

---

🧪 Next Steps

• Add a POST /api/gemini-chat endpoint that accepts a prompt from frontend
• Store messages with timestamps in MongoDB
• Pass prompt to Gemini with the system instruction above
• Respond with .text() result

---

Let me know if you want me to generate that POST /api/gemini-chat route or the frontend chat UI component too.