Promptopia

What I Built#

I built Promptopia as a practice project while learning full-stack development with the Next.js App Router. It is an open-source web application where users can discover, create, and share creative AI prompts for tools like ChatGPT and Midjourney.

Click to view fullscreen

Core Features#

• Google OAuth Login: Users can sign in with their Google account using NextAuth.js.
• Prompt CRUD: Authenticated users can create, edit, and delete their own prompt cards with custom tags (e.g. #webdev, #coding, #idea).
• Tag & Keyword Search: A live search bar on the home feed filters prompts by tag, keyword, or creator username.
• Copy to Clipboard: Quick copy button on each prompt card with visual confirmation.
• User Profile Pages: Personalized profile feeds showing all prompts published by a specific creator.

Minimal Architecture#

Browser (Next.js Client)
          │
    Google Sign-In
          ▼
┌──────────────────────────────┐
│  NextAuth.js Session Handler │ (JWT session cookie management)
└──────────────┬───────────────┘
               │
               ▼
┌──────────────────────────────┐
│  Next.js API Route Handlers  │ (app/api/prompt endpoints)
└──────────────┬───────────────┘
               │
               ▼
┌──────────────────────────────┐
│  MongoDB Database (Mongoose) │ (Prompts, Tags, User accounts)
└──────────────────────────────┘

What I Learned#

• Working with Next.js App Router: Understanding where to use Server Components for fast data fetching and Client Components for interactivity (like the search bar and copy button).
• OAuth Session Management: Wrapping layouts with a clean SessionProvider to manage authentication state across page navigations without state drops.
• MongoDB Regex Search: Using simple MongoDB regex queries to match search terms across prompt body, tag strings, and usernames simultaneously.