🔗 Live Demo: mystery-message-roby.vercel.app
📣 LinkedIn Post: mystery-message-linkedin-post
📬 Send Me a Feedback here: mystery-message-roby.vercel.app/u/codebydurvesh
Mystery Message is a full-stack anonymous feedback platform built with Next.js. Users sign up, get a unique shareable profile link, and anyone — logged in or not — can send them anonymous messages through that link. The receiver can manage which messages they accept, view all received messages, and delete individual ones — all without senders ever revealing who they are.
- Sign Up with a unique username, email, and password
- Real-time username availability check (debounced) as you type
- Email OTP verification via Resend — a 6-digit code is sent to your inbox after sign-up
- Sign In with credentials through NextAuth.js
- Protected routes — unauthenticated users are redirected to
/signin; unverified users are redirected to/verify/:username
- Every user gets a unique public profile URL:
/u/<username> - Anyone (no account required) can visit this URL and send an anonymous message
- Messages are limited to 300 characters with a live character counter
- The sender's identity is never stored or revealed
- On the send-message page, users can fetch AI-suggested question prompts to inspire their anonymous messages
- Three random question suggestions are served from a curated dataset via
/api/suggest-messages
- View all received messages in a responsive card grid (1 / 2 / 3 columns)
- Delete individual messages with a single click (with instant UI update)
- Copy your unique profile link to clipboard with one click
- Toggle message acceptance — turn off incoming messages with a toggle switch; senders are notified the user is not accepting messages
- Unverified users see a prompt to verify their account before they can toggle message acceptance
- Built with shadcn/ui components (Card, Button, Switch, Separator, Form, Input, etc.)
- Dark / light mode support via
next-themes - Animated carousel on the homepage showcasing sample anonymous messages (auto-plays every 2 seconds)
- Subtle conic-gradient animated button on the landing page
- Toast notifications (via Sonner) for all success and error events
- Fully responsive layout — mobile-first design
┌─────────────────────────────────────────────────────────────────┐
│ NEW USER FLOW │
│ │
│ 1. Visit /signup │
│ └─ Enter username (real-time uniqueness check), email, │
│ and password → Submit │
│ │
│ 2. Account created (unverified) → Redirected to /verify/:user │
│ └─ OTP email sent via Resend │
│ │
│ 3. Enter 6-digit OTP on /verify/:username │
│ └─ Account marked as verified → Redirected to /dashboard │
│ │
│ 4. Dashboard loads: │
│ ├─ Profile link displayed & copyable │
│ ├─ Accept Messages toggle (ON by default) │
│ └─ Message grid (empty for a new user) │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ SENDER FLOW │
│ │
│ 1. Receive a shared link → /u/<username> │
│ │
│ 2. Type an anonymous message (up to 300 chars) │
│ └─ Optionally click "Suggest" for AI-generated prompts │
│ │
│ 3. Hit "Send Message" │
│ ├─ If user is accepting → message saved, success toast │
│ └─ If user is not accepting → error shown to sender │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ RETURNING USER FLOW │
│ │
│ 1. Visit /signin → Enter credentials → Redirected to /dashboard│
│ │
│ 2. Dashboard shows all received messages │
│ ├─ Click "Copy" to copy profile URL │
│ ├─ Toggle acceptance on/off │
│ └─ Delete any message │
└─────────────────────────────────────────────────────────────────┘
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Database | MongoDB via Mongoose |
| Auth | NextAuth.js v4 (Credentials provider) |
| Resend + React Email | |
| UI Components | shadcn/ui + Radix UI |
| Styling | Tailwind CSS v4 |
| Forms | React Hook Form + Zod |
| Carousel | Embla Carousel with Autoplay |
| HTTP Client | Axios |
| Toasts | Sonner |
| Password Hashing | bcryptjs |
| Deployment | Vercel |
src/
├── app/
│ ├── (app)/
│ │ ├── page.tsx # Landing page with carousel
│ │ ├── layout.tsx # App layout with Navbar
│ │ ├── dashboard/page.tsx # User dashboard
│ │ └── u/[username]/page.tsx # Public send-message page
│ ├── (auth)/
│ │ ├── signin/page.tsx # Sign in form
│ │ ├── signup/page.tsx # Sign up form
│ │ └── verify/[username]/page.tsx # OTP verification
│ └── api/
│ ├── auth/[...nextauth]/ # NextAuth route handler
│ ├── signup/ # Register new user + send OTP
│ ├── verify-code/ # Validate OTP
│ ├── chech-username-unique/# Check username availability
│ ├── accept-messages/ # GET/POST toggle acceptance
│ ├── send-message/ # Send anonymous message
│ ├── get-messages/ # Fetch all messages for user
│ ├── delete-message/ # Delete a specific message
│ └── suggest-messages/ # Return random question prompts
├── model/
│ └── User.ts # Mongoose User + Message schema
├── schemas/ # Zod validation schemas
├── components/
│ ├── Navbar.tsx
│ ├── MessageCard.tsx
│ └── ui/ # shadcn/ui components
├── emails/
│ └── VerificationEmail.tsx # React Email OTP template
├── helpers/ # sendVerificationEmail helper
├── lib/ # dbConnect, auth options
├── data/ # Sample messages & question sets
├── types/ # ApiResponse type
└── middleware.ts # Route protection logic
- Node.js 18+
- A MongoDB database (Atlas free tier works)
- A Resend account and API key
git clone https://github.com/codebydurvesh/mystery-message.git
cd mystery-messagenpm installCopy .env.example to .env and fill in your values:
cp .env.example .envMONGO_URI=your_mongodb_connection_string
RESEND_API_KEY=your_resend_api_key
NEXT_AUTH_SECRET=a_long_random_secret_stringnpm run devOpen http://localhost:3000 in your browser.
| Method | Endpoint | Auth Required | Description |
|---|---|---|---|
POST |
/api/signup |
❌ | Register a new user; sends OTP email |
POST |
/api/verify-code |
❌ | Verify OTP and activate account |
GET |
/api/chech-username-unique |
❌ | Check if a username is available |
GET |
/api/accept-messages |
✅ | Get current accept-messages setting |
POST |
/api/accept-messages |
✅ | Toggle accept-messages on/off |
POST |
/api/send-message |
❌ | Send an anonymous message to a user |
GET |
/api/get-messages |
✅ | Retrieve all messages for the signed-in user |
DELETE |
/api/delete-message/:id |
✅ | Delete a specific message by ID |
GET |
/api/suggest-messages |
❌ | Get 3 random AI-style question suggestions |
- Passwords are hashed with bcryptjs before storage — plain-text passwords are never saved
- OTP codes are time-limited (stored with an expiry date)
- Route-level protection is enforced in middleware.ts — unauthenticated and unverified users are automatically redirected
- Session tokens are signed using
NEXT_AUTH_SECRET
This project is open-source and available under the MIT License.
Made by Durvesh