Look, I'll be honest with you. I spent way too many nights doom-scrolling through random confession pages, and one thought kept bugging me: what if these people could get actual support instead of just reactions? That's how Confessly was born—a place where you can spill your thoughts anonymously and get genuine, thoughtful AI-powered guidance back.
This isn't just another confession board. It's what happens when you mix the raw honesty of anonymous platforms with the empathy of modern AI. And yeah, I'm building it completely open-source because why gatekeep?
What Makes Confessly Different?
The concept is simple but powerful:
- Anonymous by default — No accounts, no tracking, just pure honesty
- AI Advisor — Every confession gets a supportive, non-judgmental response from GPT
- Community-driven — Trending confessions, reactions, and shared experiences
- Moderation tools — Because we all know the internet needs guardrails
Think Whisper meets ChatGPT, but actually useful.
The Tech Stack (And Why I Chose It)
Let me walk you through what's under the hood:
Frontend:
- Next.js 14 (App Router) — Server components, edge runtime, the whole nine yards
- React 18 — Because duh
- TypeScript — Sanity is underrated
- Tailwind CSS — Fast styling without the CSS headaches
- Framer Motion — Smooth animations that don't feel overdone
- Zustand — State management that doesn't make me cry
Backend & Services:
- Next.js API Routes — Keeping it simple with serverless functions
- Firebase Firestore — Real-time database for confessions and reactions
- Firebase Auth — For the admin dashboard
- OpenAI GPT-4 — The brain behind our AI advisor
- Vercel — Deployment that just works
Dev Tools:
- ESLint + Prettier — Because consistency matters
- Husky — Git hooks for pre-commit checks
Architecture Deep Dive
Here's how everything connects:
┌─────────────────────────────────────────────────────┐
│ Client Layer │
│ (Next.js 14 App Router + React Components) │
└──────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ API Routes Layer │
│ /api/confessions/* | /api/ai/* | /api/moderation/* │
└──────────────────┬──────────────────────────────────┘
│
┌──────────┴──────────┐
▼ ▼
┌──────────────┐ ┌──────────────────┐
│ Firebase │ │ OpenAI API │
│ Firestore │ │ GPT-4 Turbo │
└──────────────┘ └──────────────────┘
Data Flow:
- User posts anonymous confession
- Firebase stores confession with metadata
- AI Advisor endpoint receives confession
- GPT-4 generates empathetic response
- Response stored and displayed to user
- Real-time updates via Firebase listeners
File Structure That Makes Sense
This took me a few iterations to get right. Here's the final structure:
confessly/
├── src/
│ ├── app/
│ │ ├── (main)/
│ │ │ ├── page.tsx # Home - confession feed
│ │ │ ├── trending/
│ │ │ │ └── page.tsx # Trending confessions
│ │ │ ├── confession/
│ │ │ │ └── [id]/
│ │ │ │ └── page.tsx # Single confession view
│ │ │ └── layout.tsx # Main layout wrapper
│ │ ├── admin/
│ │ │ ├── page.tsx # Admin dashboard
│ │ │ ├── moderation/
│ │ │ │ └── page.tsx # Moderation queue
│ │ │ └── layout.tsx # Admin layout
│ │ ├── api/
│ │ │ ├── confessions/
│ │ │ │ ├── route.ts # POST new confession
│ │ │ │ ├── [id]/
│ │ │ │ │ ├── route.ts # GET single confession
│ │ │ │ │ └── react/
│ │ │ │ │ └── route.ts # POST reaction
│ │ │ │ └── trending/
│ │ │ │ └── route.ts # GET trending
│ │ │ ├── ai/
│ │ │ │ ├── advisor/
│ │ │ │ │ └── route.ts # POST get AI response
│ │ │ │ └── therapist/
│ │ │ │ └── route.ts # POST therapist mode
│ │ │ └── moderation/
│ │ │ ├── flag/
│ │ │ │ └── route.ts # POST flag confession
│ │ │ └── review/
│ │ │ └── route.ts # POST review decision
│ │ ├── layout.tsx # Root layout
│ │ └── globals.css # Global styles
│ ├── components/
│ │ ├── confession/
│ │ │ ├── ConfessionCard.tsx # Single confession display
│ │ │ ├── ConfessionFeed.tsx # Feed container
│ │ │ ├── ConfessionForm.tsx # New confession form
│ │ │ └── AIResponse.tsx # AI response display
│ │ ├── ui/
│ │ │ ├── Button.tsx # Reusable button
│ │ │ ├── Card.tsx # Card component
│ │ │ ├── Modal.tsx # Modal wrapper
│ │ │ ├── Input.tsx # Form inputs
│ │ │ └── Badge.tsx # Status badges
│ │ ├── layout/
│ │ │ ├── Header.tsx # Site header
│ │ │ ├── Footer.tsx # Site footer
│ │ │ └── Sidebar.tsx # Admin sidebar
│ │ └── admin/
│ │ ├── ModerationQueue.tsx # Moderation interface
│ │ └── StatsCard.tsx # Dashboard stats
│ ├── lib/
│ │ ├── firebase/
│ │ │ ├── config.ts # Firebase initialization
│ │ │ ├── firestore.ts # Firestore helpers
│ │ │ └── auth.ts # Auth helpers
│ │ ├── openai/
│ │ │ ├── client.ts # OpenAI client setup
│ │ │ └── prompts.ts # AI prompt templates
│ │ ├── utils/
│ │ │ ├── formatDate.ts # Date formatting
│ │ │ ├── sanitize.ts # Content sanitization
│ │ │ └── analytics.ts # Analytics helpers
│ │ └── constants.ts # App constants
│ ├── store/
│ │ ├── confessionStore.ts # Confession state
│ │ └── uiStore.ts # UI state
│ ├── types/
│ │ ├── confession.ts # Confession types
│ │ ├── user.ts # User types
│ │ └── api.ts # API response types
│ └── hooks/
│ ├── useConfessions.ts # Confession data hook
│ ├── useAIResponse.ts # AI interaction hook
│ └── useInfiniteScroll.ts # Infinite scroll hook
├── public/
│ ├── images/
│ └── favicon.ico
├── .env.local # Environment variables
├── .eslintrc.json # ESLint config
├── .prettierrc # Prettier config
├── next.config.js # Next.js config
├── tailwind.config.ts # Tailwind config
├── tsconfig.json # TypeScript config
└── package.json # Dependencies
Database Schema (Firestore)
Keep it simple, stupid. Here's what the data looks like:
Collections:
// confessions collection
{
id: string,
content: string,
category: 'relationship' | 'work' | 'mental-health' | 'other',
aiResponse: string | null,
reactions: {
heart: number,
hug: number,
support: number
},
flags: number,
status: 'active' | 'flagged' | 'removed',
createdAt: timestamp,
trending_score: number, // calculated based on time + reactions
anonymous_id: string // hashed IP for rate limiting
}
// reactions collection (subcollection under each confession)
{
id: string,
confessionId: string,
type: 'heart' | 'hug' | 'support',
createdAt: timestamp,
anonymous_id: string
}
// moderation collection
{
id: string,
confessionId: string,
reason: string,
status: 'pending' | 'approved' | 'removed',
reviewedAt: timestamp | null,
reviewerId: string | null
}
The UI/UX Philosophy
I wanted Confessly to feel like a safe space, not another cold tech product. Here's the vibe:
Design Principles:
- Minimalist — Remove everything that doesn't serve the user
- Soft colors — Purples and blues that feel calming, not aggressive
- Generous whitespace — Let the content breathe
- Smooth animations — Transitions that feel natural, not jarring
- Mobile-first — Because most people confess at 2 AM on their phones
Key UI Components:
Confession Card:
- Soft gradient background
- No profile pictures (obviously)
- Emoji reactions instead of likes
- "Get AI Support" button prominently displayed
- Flag option tucked in the corner
AI Response Section:
- Distinct visual treatment (lighter card, different border)
- Warm, conversational tone in the design
- "This is AI-generated" disclaimer (transparency matters)
- Option to regenerate response
Feed Layout:
- Infinite scroll with skeleton loaders
- Filter chips at the top (category, trending, recent)
- Floating action button for new confession
- Smooth card entrance animations
Core Features Breakdown
1. Anonymous Confession Posting
// Simplified version of the submission flow
const submitConfession = async (content: string, category: string) => {
// Generate anonymous ID (hashed IP + session)
const anonymousId = await generateAnonymousId();
// Check rate limit (max 3 per hour per anonymous ID)
await checkRateLimit(anonymousId);
// Sanitize content
const sanitized = sanitizeContent(content);
// Create confession
const confession = await db.collection('confessions').add({
content: sanitized,
category,
anonymous_id: anonymousId,
status: 'active',
reactions: { heart: 0, hug: 0, support: 0 },
flags: 0,
createdAt: serverTimestamp(),
aiResponse: null
});
// Trigger AI response generation
generateAIResponse(confession.id);
return confession.id;
};
2. AI Advisor Mode
The magic sauce. Here's how the AI responds:
// AI prompt engineering
const generateAdvicePrompt = (confession: string) => {
return `You are a compassionate AI advisor for an anonymous confession platform.
A user has shared: "${confession}"
Provide a supportive, non-judgmental response that:
- Validates their feelings
- Offers perspective or gentle advice
- Suggests actionable steps if appropriate
- Encourages professional help for serious issues
- Uses warm, conversational language
- Keeps it under 150 words
Remember: This is anonymous, so focus on the emotion and situation, not identity.`;
};
The AI is prompted to be empathetic, concise, and helpful—not preachy or robotic.
3. Trending Algorithm
Simple but effective:
const calculateTrendingScore = (confession) => {
const age = Date.now() - confession.createdAt.toMillis();
const ageHours = age / (1000 * 60 * 60);
const reactionCount =
confession.reactions.heart * 1 +
confession.reactions.hug * 1.5 +
confession.reactions.support * 2;
// Decay score over time (gravity)
const gravity = 1.8;
return reactionCount / Math.pow(ageHours + 2, gravity);
};
New confessions with lots of reactions rise fast. Old ones fade gracefully.
4. Moderation Dashboard
Admins get a clean interface to review flagged content:
- Queue of flagged confessions
- Context about why it was flagged
- One-click approve/remove actions
- Stats dashboard (total confessions, active users, flags)
Viral Features That Hook Users
1. AI Therapist Mode
Toggle between quick advice and deeper, therapy-style conversations. Costs more tokens but provides richer responses.
2. Trending Confessions Leaderboard
Shows the most-reacted confessions of the day/week. Gamification without being toxic.
3. Category-Based Exploration
Filter by relationship, work, mental health, or general confessions.
4. Reaction System
Instead of generic likes: ❤️ (Heart), 🤗 (Hug), 💪 (Support)
5. Anonymous Sharing
Generate shareable links to specific confessions (with AI responses included).
Environment Setup
Create a .env.local file:
# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
# OpenAI
OPENAI_API_KEY=your_openai_key
# App
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_MAX_CONFESSIONS_PER_HOUR=3
Getting Started
# Clone and install
git clone https://github.com/yourusername/confessly
cd confessly
npm install
# Set up environment
cp .env.example .env.local
# Fill in your API keys
# Run development server
npm run dev
# Build for production
npm run build
npm start
Deployment Strategy
Vercel is the obvious choice here:
- Connect your GitHub repo
- Add environment variables in Vercel dashboard
- Deploy
- Done
Firebase handles:
- Database scaling automatically
- Real-time updates without extra config
- Security rules to prevent abuse
Cost estimates (for moderate traffic):
- Vercel: Free tier handles ~100K requests/month
- Firebase: ~$25/month with generous free tier
- OpenAI: ~$50/month (depends on usage)
Security & Privacy Considerations
This is crucial for a confession app:
Firestore Rules:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /confessions/{confession} {
// Anyone can read active confessions
allow read: if resource.data.status == 'active';
// Anyone can create (with rate limiting in code)
allow create: if request.auth == null;
// Only admins can update/delete
allow update, delete: if request.auth.token.admin == true;
}
}
}
Additional Measures:
- Content sanitization on both client and server
- Rate limiting per anonymous ID
- IP hashing (never store raw IPs)
- Profanity filter with manual review for edge cases
- Clear terms of service and privacy policy
Performance Optimizations
Client Side:
- Image lazy loading with Next.js Image component
- Infinite scroll with intersection observer
- Optimistic UI updates for reactions
- Debounced search and filters
Server Side:
- API route caching with proper headers
- Firestore indexes for common queries
- Edge functions for low latency
- OpenAI streaming responses for faster perceived performance
Future Roadmap
What's next for Confessly:
- [ ] PWA support for mobile app feel
- [ ] Voice confession option (transcribed to text)
- [ ] Follow-up conversations with AI
- [ ] Community support threads
- [ ] Multilingual support
- [ ] Dark mode (always dark mode)
- [ ] Export your confessions (therapy journal)
Lessons Learned
Building Confessly taught me a few things:
Keep it simple — My first version had way too many features. Users just want to confess and get support.
AI prompts matter — I spent more time on prompt engineering than I expected. The difference between robotic and empathetic AI responses is all in the prompt.
Moderation is hard — You can't automate everything. Human review is necessary for edge cases.
Performance obsession pays off — Users bounce if your app feels slow. Optimize early.
Privacy builds trust — Being genuinely anonymous (not "we promise not to look" anonymous) is the whole point.
Why Open Source?
I'm open-sourcing Confessly because I think we need more compassionate tech in the world. If someone builds something better using this code, that's a win. If someone learns from my mistakes, even better.
The repo will be on GitHub with full documentation, deployment guides, and contribution guidelines.
Final Thoughts
Confessly isn't just a side project for me—it's an experiment in building technology that actually helps people. We're all carrying something, and sometimes the best first step is just getting it out there, even if anonymously.
If you build this or something inspired by it, I'd love to see what you create. Tag me, send a DM, whatever. Let's make the internet a slightly less terrible place.
That's a wrap 🎁
Now go touch some code 👨💻
Top comments (0)