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
Review the generated code and extract the backend routes (or tell it to give you those too).
Connect it to your MongoDB Atlas DB.
Wire up Razorpay with test credentials for now.
Replace static roast messages with either:
Deploy to Vercel.
Test flows: login → dashboard → fap log → streak updates → premium → charts.
I'll create a complete full-stack FapFuel application with Next.js, MongoDB, API routes, authentication, and Razorpay integration. This will be a fully dynamic app with real backend functionality.
I've created a complete full-stack FapFuel application with all the requested features! Here's what I've built:
/api/signup, /api/login with JWT tokens/api/fap - logs faps, resets streaks, awards coins/api/streak - calculates and updates streaks/api/mood - logs daily moods/api/stats - comprehensive user analytics/api/roast - serves random roasts from database/api/create-payment - Razorpay integration/api/user - user data management/) - Marketing with features and CTAs/auth) - Login/signup with real backend integration/dashboard) - Interactive fap button, streak counter, mood tracker/stats) - Comprehensive analytics and charts/premium) - Razorpay payment integration/profile) - User settings and achievements.env.example to .env.local and fill in your MongoDB URI and JWT secretnode scripts/seed-database.jspackage.jsonThe app is production-ready with proper error handling, loading states, and responsive design!
To configure the generation, complete these steps:
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.
Review it section by section.
Integrate:
/api/create-paymentStyle leaderboard and dashboard with Framer Motion, not raw HTML.
I can generate:
Just say “Start backend logic now” and I’ll generate it for you.
I'll upgrade the FapFuel app with all the requested features - game mechanics, community features, premium tracking, Gemini AI chat, porn tracker, and a classy modern UI that doesn't look AI-generated.
I've completely upgraded the FapFuel app with all the requested features! Here's what's been added:
#ec4899) and violet (#9333ea)The app now feels like a premium product with viral potential! Every interaction is smooth, the gamification is engaging, and the UI looks professionally designed rather than AI-generated.
To configure the generation, complete these steps:
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:
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.
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());
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+" });
}
POST /api/gemini-chat endpoint that accepts a prompt from frontendmessages with timestamps in MongoDB.text() resultLet me know if you want me to generate that POST /api/gemini-chat route or the frontend chat UI component too.
You can send messages while the preview loads