Promptopia

An open-source AI prompt sharing platform built with Next.js 14, where users can discover, create, and share creative prompts for AI tools like ChatGPT, Midjourney, and more.

Features

• Google Authentication — Secure sign-in with NextAuth.js and Google OAuth
• Create, Edit & Delete Prompts — Full CRUD operations for AI prompts
• Search & Filter — Search by tag, username, or prompt content with debounced input
• User Profiles — View your own prompts or explore other users' profiles
• Dark Mode — System-aware dark mode toggle with persistent preference
• Responsive Design — Fully responsive layout for mobile, tablet, and desktop
• Loading Skeletons — Smooth loading states with shimmer animations
• Copy to Clipboard — One-click prompt copying

Tech Stack

Technology	Purpose
Next.js 14	React framework (App Router)
React 18	UI library
Tailwind CSS	Utility-first styling
MongoDB Atlas	Cloud database
Mongoose	MongoDB ODM
NextAuth.js	Authentication

Getting Started

Prerequisites

• Node.js 18+
• MongoDB Atlas account
• Google Cloud Console project with OAuth credentials

1. Clone the repository

git clone https://github.com/SimpliJessi/mypromptopia.git
cd mypromptopia

2. Install dependencies

npm install

3. Set up environment variables

Create a .env.local file in the root directory:

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_URL_INTERNAL=http://localhost:3000
NEXTAUTH_SECRET=your-nextauth-secret

GOOGLE_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

MONGODB_URI=your-mongodb-connection-string

How to get these values

• NEXTAUTH_SECRET — Run openssl rand -base64 32 to generate one
• GOOGLE_ID & GOOGLE_CLIENT_SECRET — Create OAuth credentials at Google Cloud Console. Add http://localhost:3000/api/auth/callback/google as an authorized redirect URI.
• MONGODB_URI — Create a free cluster at MongoDB Atlas, then go to Connect → Drivers to get your connection string.

4. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

Project Structure

app/
├── api/                  # API routes
│   ├── auth/             # NextAuth.js authentication
│   ├── prompt/           # Prompt CRUD endpoints
│   └── users/            # User-specific endpoints
├── create-prompt/        # Create prompt page
├── profile/              # Profile pages
├── update-prompt/        # Edit prompt page
├── layout.jsx            # Root layout
├── page.jsx              # Homepage
├── loading.jsx           # Loading state
├── error.jsx             # Error boundary
└── not-found.jsx         # 404 page
components/
├── Feed.jsx              # Prompt feed with search
├── Footer.jsx            # Site footer
├── Form.jsx              # Prompt create/edit form
├── Nav.jsx               # Navigation bar
├── Profile.jsx           # Profile display
├── PromptCard.jsx        # Individual prompt card
└── Provider.jsx          # NextAuth session provider
models/
├── prompt.js             # Mongoose prompt schema
└── user.js               # Mongoose user schema
utils/
└── database.js           # MongoDB connection utility

Deployment

Deploy to Vercel with one click:

Make sure to add all environment variables in your Vercel project settings.

License

This project is open source and available under the MIT License.