True Feedback (Mstrymessage)

A full-stack anonymous feedback messaging platform built with Next.js, TypeScript, MongoDB, NextAuth, OpenAI, and Resend.

Users can create accounts, share their public profile links, receive anonymous messages, manage messages, and use AI-powered suggestions to generate conversation starters.

---

🌐 Live Demo

Live Application: https://feedback-ai-nextjs-ruby.vercel.app/

---

🚀 Features

Authentication

• User registration
• Email verification using OTP
• Secure password hashing with bcrypt
• Login using username or email
• JWT-based authentication with NextAuth

Anonymous Messaging

• Generate a public profile link
• Receive anonymous messages
• View received messages
• Delete messages
• Control whether users can send messages

AI Features

• AI-generated anonymous question suggestions
• Powered by OpenAI API

Email System

• Verification emails
• OTP-based account verification
• Resend email service integration

UI Features

• Responsive design
• Tailwind CSS styling
• Shadcn UI components
• Toast notifications
• Form validation

---

🛠 Tech Stack

Frontend

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS
• Shadcn UI
• React Hook Form
• Zod Validation
• Axios

Backend

• Next.js App Router API Routes
• MongoDB
• Mongoose
• NextAuth.js
• bcryptjs

Services

• OpenAI API
• Resend Email API

---

📂 Project Structure

mstrymessage
│
├── src
│   │
│   ├── app
│   │   ├── api
│   │   │   ├── auth
│   │   │   ├── register
│   │   │   ├── verify-code
│   │   │   ├── send-message
│   │   │   ├── delete-message
│   │   │   ├── get-messages
│   │   │   ├── accept-messages
│   │   │   └── suggest-messages
│   │   │
│   │   ├── dashboard
│   │   ├── sign-in
│   │   ├── sign-up
│   │   └── verify
│   │
│   ├── components
│   │   ├── ui
│   │   ├── Navbar.tsx
│   │   └── MessageCard.tsx
│   │
│   ├── context
│   │   └── AuthProvider.tsx
│   │
│   ├── helpers
│   │   └── sendVerificationEmail.ts
│   │
│   ├── lib
│   │   ├── dbConnect.ts
│   │   └── resend.ts
│   │
│   ├── model
│   │   └── User.ts
│   │
│   ├── schemas
│   │   ├── signUpSchema.ts
│   │   ├── signInSchema.ts
│   │   ├── messageSchema.ts
│   │   └── verifySchema.ts
│   │
│   └── types
│       └── ApiResponse.ts
│
├── .env.local
├── package.json
├── tsconfig.json
└── README.md

---

⚙️ Installation

Clone the repository:

git clone <your-repository-url>

Move into project folder:

cd mstrymessage

Install dependencies:

npm install

---

🔐 Environment Variables

Create a file:

.env.local

Add:

NEXTAUTH_URL=http://localhost:3000

MONGODB_URI=your_mongodb_connection_string

NEXTAUTH_SECRET=your_nextauth_secret

RESEND_API_KEY=your_resend_api_key

OPENAI_API_KEY=your_openai_api_key

---

🗄 Database Setup

This project uses MongoDB.

You can use:

• MongoDB Local
• MongoDB Atlas

Example local connection:

MONGODB_URI=mongodb://localhost:27017/mstrymessage

The application automatically creates the required collections.

---

▶️ Run Development Server

Start development:

npm run dev

Open:

http://localhost:3000

---

🏗 Production Build

Create production build:

npm run build

Start production server:

npm start

---

🔑 Authentication Flow

Registration

1. User enters:

   • Username
   • Email
   • Password

2. Password is hashed using bcrypt.

3. Verification OTP is generated.

4. OTP is sent using Resend.

---

Verification

User enters OTP.

The server checks:

• Verification code
• Expiry time

After successful verification:

isVerified = true

---

Login

Users can login using:

• Username
• Email

NextAuth creates a JWT session.

---

📡 API Routes

Authentication

Register

POST /api/register

Creates a new user.

---

Verify Account

POST /api/verify-code

Verifies OTP.

---

Login

POST /api/auth/[...nextauth]

Handles authentication.

---

Messages

Send Anonymous Message

POST /api/send-message

Body:

{
  "username": "example",
  "content": "Your message"
}

---

Get Messages

GET /api/get-messages

Returns authenticated user's messages.

---

Delete Message

DELETE /api/delete-message/:messageid

Deletes a message.

---

Toggle Message Acceptance

POST /api/accept-messages

Updates whether the user accepts messages.

---

AI Suggestions

POST /api/suggest-messages

Generates anonymous question suggestions using OpenAI.

---

🧠 AI Message Suggestions

The application uses:

OpenAI Responses API

to generate:

• Friendly questions
• Anonymous conversation starters
• Feedback prompts

---

📧 Email Verification

Email service:

Resend

Features:

• OTP generation
• Verification emails
• Account activation

---

🔒 Security Features

Implemented:

• Password hashing
• JWT authentication
• Protected API routes
• Input validation using Zod
• MongoDB validation
• Environment variables

Recommended before production:

• Add API rate limiting
• Add CAPTCHA for signup
• Rotate exposed API keys
• Enable HTTPS

---

🚀 Deployment

Recommended platforms:

• Vercel (Frontend + API)
• MongoDB Atlas (Database)
• Resend (Email)

Before deployment:

Update:

NEXTAUTH_URL=https://your-domain.com

---

📌 Future Improvements

Possible upgrades:

• Real-time messaging
• User profile customization
• Message reactions
• Image attachments
• Admin dashboard
• Analytics
• Push notifications

---

👨‍💻 Author

Satyam Kumar

---

📄 License

This project is licensed under the MIT License.