🕵️ SecretDrop - Anonymous Message Platform

SecretDrop is a modern, anonymous messaging platform built with Next.js 15 that allows users to receive honest feedback and messages without revealing the sender's identity. Perfect for creating a safe space for anonymous communication, feedback collection, and honest conversations.

Why ?

Honest feedback is rare because people hold back when their names are attached — fear of awkwardness, backlash, or consequences. Many “anonymous” tools promise secrecy but leak metadata, allow deanonymization, or turn into noisy, hostile forums. I built SecretDrop to be radically simple and reliable: a shareable public link that only delivers messages — no sender details, no unmasking, no guessing. The recipient can share their public link on there bio, profile, etc. and can get the honest feedbacks from people. The recipient’s can control toggle: turn message receiving on or off. If your profile is open, senders can send anonymous notes; if it’s closed, they can’t.

To help senders phrase useful feedback (without revealing who they are), the public message page includes optional AI-powered suggestions and conversation starters. This helps people write clearer, kinder, or more constructive messages while keeping their identity completely hidden — SecretDrop never exposes sender metadata. Combined with secure account practices (OTP email verification, hashed passwords, session tokens), SecretDrop gives creators, teachers, teams, and anyone who wants candid input a quiet, dependable channel for unfiltered feedback.

✨ Features

🔐 Authentication & Security

• Secure User Authentication with NextAuth.js and JWT
• Email Verification system with OTP codes
• Password Hashing using bcryptjs
• Username Uniqueness validation
• Session Management with secure tokens

💬 Anonymous Messaging

• Anonymous Message Sending - Users can send messages without revealing identity
• Message Management - Mark messages as read/unread
• Message Deletion - Users can delete received messages
• Real-time Message Status - Track message delivery and read status

🤖 AI-Powered Features

• AI Message Suggestions using Google Gemini AI
• Smart Conversation Starters to encourage meaningful communication
• Dynamic Content Generation for better user engagement

👤 User Experience

• Public Profile Pages - Shareable links for receiving anonymous messages
• Dashboard with message overview and management
• Message Acceptance Toggle - Control when can receive messages
• Responsive Design - Works seamlessly on all devices

🎨 Modern UI/UX

• Beautiful Animations with custom CSS animations
• Gradient Themes and modern design patterns
• Component-based UI using Radix UI and shadcn/ui
• Form Validation with Zod schemas
• Toast Notifications for user feedback

⚙️ Configuration & Customization

• Environment-based Configuration - Easy setup with .env.example template
• Customizable Email Branding - Personalize sender name and subject lines
• Flexible App Branding - White-label ready with configurable app name
• Production-ready Deployment - Optimized for Vercel with proper environment handling

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• React 19 - Latest React with modern features
• TypeScript - Type-safe development
• Tailwind CSS 4 - Utility-first CSS framework
• shadcn/ui - Modern component library
• Radix UI - Accessible component primitives

Backend

• Next.js API Routes - Serverless API endpoints
• MongoDB - NoSQL database with Mongoose ODM
• NextAuth.js - Authentication library
• Zod - Schema validation

AI & Communication

• Google Gemini AI - AI-powered message suggestions
• Resend - Email delivery service
• React Email - Email template system

Developer Tools

• ESLint - Code linting
• TypeScript - Static type checking
• Turbopack - Fast bundler for development

🚀 Getting Started

Prerequisites

• Node.js 18+ installed
• MongoDB database (local or cloud)
• Email service account (Resend)
• Google AI API key (for suggestions feature)

Installation

1. Clone the repository

git clone https://github.com/swayamyadav05/SecretDrop.git
cd SecretDrop

2. Install dependencies

npm install

3. Set up environment variables Copy the example file and configure your values:

   cp .env.example .env.local

   Or create a .env.local file manually with the following configuration:

# Database
MONGODB_URI=mongodb://localhost:27017/secretdrop
# or for MongoDB Atlas:
# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/secretdrop

# NextAuth Configuration
NEXTAUTH_SECRET=your-secret-key-here
NEXTAUTH_URL=http://localhost:3000

# Email Service (Resend)
RESEND_API_KEY=your-resend-api-key

# Email Configuration (Optional - will use defaults if not set)
EMAIL_FROM="SecretDrop <noreply@your-domain.com>"
EMAIL_SUBJECT="SecretDrop Verification Code"

# AI Service (Google Gemini)
GOOGLE_GENERATIVE_AI_API_KEY=your-google-ai-api-key

# Application Branding (Optional)
APP_NAME="SecretDrop"

4. Run the development server

npm run dev

5. Open your browser Navigate to http://localhost:3000

📁 Project Structure

mystery-message/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (app)/             # Main app routes
│   │   │   ├── dashboard/     # User dashboard
│   │   │   └── page.tsx       # Landing page
│   │   ├── (auth)/            # Authentication routes
│   │   │   ├── sign-in/       # Login page
│   │   │   ├── sign-up/       # Registration page
│   │   │   └── verify/        # Email verification
│   │   ├── api/               # API routes
│   │   │   ├── auth/          # NextAuth configuration
│   │   │   ├── send-message/  # Message sending
│   │   │   ├── get-messages/  # Message retrieval
│   │   │   ├── suggest-messages/ # AI suggestions
│   │   │   └── ...            # Other API endpoints
│   │   └── u/[username]/      # Public profile pages
│   ├── components/            # Reusable UI components
│   │   ├── ui/               # shadcn/ui components
│   │   ├── MessageCard.tsx   # Message display component
│   │   ├── Navbar.tsx        # Navigation component
│   │   └── ...
│   ├── lib/                  # Utility libraries
│   │   ├── dbConnect.ts      # Database connection
│   │   ├── resend.ts         # Email service
│   │   └── utils.ts          # Helper functions
│   ├── model/                # Database models
│   │   └── User.ts           # User and Message schemas
│   ├── schemas/              # Zod validation schemas
│   ├── types/                # TypeScript type definitions
│   └── helpers/              # Helper functions
├── emails/                   # Email templates
├── public/                   # Static assets
├── .env.example              # Environment variables template
└── vercel.json               # Vercel deployment configuration

🔧 Configuration

Database Setup

1. MongoDB Local: Install MongoDB locally and use mongodb://localhost:27017/secretdrop
2. MongoDB Atlas: Create a cluster and use the connection string
3. Models: User model includes username, email, password, verification, and messages

Email Configuration

1. Sign up for Resend
2. Get your API key
3. Configure the sender domain
4. Add API key to environment variables
5. Customize email appearance (Optional)

Note: You can use any display name with your verified domain. The domain must be verified in Resend, but the display name and email prefix can be customized.

AI Configuration

1. Get Google AI API key from Google AI Studio
2. Add to environment variables
3. Configure in src/app/api/suggest-messages/route.ts

📖 API Documentation

Authentication Endpoints

• POST /api/sign-up - User registration
• POST /api/verify-code - Email verification
• POST /api/auth/signin - User login
• GET /api/check-username-unique - Username availability

Message Endpoints

• POST /api/send-message - Send anonymous message
• GET /api/get-messages - Retrieve user messages
• DELETE /api/delete-message/[id] - Delete message
• PATCH /api/messages/[id]/read - Mark message as read

Feature Endpoints

• POST /api/suggest-messages - Get AI message suggestions
• POST /api/accept-message - Toggle message acceptance
• GET /api/accept-message - Get acceptance status

🎨 UI Components

Core Components

• MessageCard - Display individual messages with actions
• ShareLinkCard - Share profile link component
• Navbar - Navigation with authentication state
• Brand - Logo and branding component

Form Components

• Input - Styled input fields with validation
• Textarea - Multi-line text input
• Button - Various button styles and states
• InputOTP - One-time password input

🔐 Security Features

Authentication

• JWT-based session management
• Secure password hashing with bcryptjs
• Email verification requirement
• Protected API routes

Data Protection

• Input validation with Zod schemas
• SQL injection prevention with Mongoose
• XSS protection with proper sanitization
• CSRF protection with NextAuth

Rate Limiting

• API endpoint protection (configurable)
• Message sending limits
• Account creation limits

🚀 Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Add environment variables in Vercel dashboard
3. Deploy automatically on push

Docker Deployment

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Environment Variables for Production

# Core Configuration
MONGODB_URI=your-production-mongodb-uri
NEXTAUTH_SECRET=your-production-secret
NEXTAUTH_URL=https://your-domain.com

# Email Service
RESEND_API_KEY=your-resend-api-key
EMAIL_FROM="SecretDrop <noreply@your-domain.com>"
EMAIL_SUBJECT="SecretDrop Verification Code"

# AI Service
GOOGLE_GENERATIVE_AI_API_KEY=your-google-ai-api-key

# Branding (Optional)
APP_NAME="SecretDrop"

💡 Pro Tips for Production:

• Use a strong, unique NEXTAUTH_SECRET (32+ characters)
• Set EMAIL_FROM to match your verified domain in Resend
• Customize EMAIL_SUBJECT for better user experience
• Consider different APP_NAME for white-labeling

🧪 Testing

Development Testing

# Run development server
npm run dev

# Lint code
npm run lint

# Type checking
npx tsc --noEmit

API Testing

Use tools like Postman or Thunder Client to test API endpoints:

• Authentication flows
• Message operations
• AI suggestions
• User management

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature-name
5. Submit a pull request

Development Guidelines

• Follow TypeScript best practices
• Use Zod for all data validation
• Implement proper error handling
• Add comments for complex logic
• Maintain responsive design

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js Team for the amazing framework
• shadcn for the beautiful UI components
• Vercel for hosting and deployment
• Resend for email delivery service
• Google for AI capabilities

📞 Support

• Documentation: Check this README
• Issues: Create an issue on GitHub for bugs or feature requests
• Email: Contact the maintainer for support

---

Built with ❤️ using Next.js and modern web technologies

⭐ Star this repository if you found it helpful!