🧠 Promptopia — AI Prompt Sharing Platform

This project is a modern, full-stack web application built using Next.js 14, inspired by
the excellent tutorial from JavaScript Mastery (YouTube)
and the original repository by Adrian Hajdin.

I followed the tutorial closely and made changes to support Next.js App Router (v15) and updated dependencies, giving me my first hands-on experience with modern Next.js and full-stack development.

It was a great milestone in my learning journey and gave me the confidence to build full-stack projects on my own going forward.

---

📚 Table of Contents

1. 📖 Introduction
2. ⚙️ Tech Stack
3. 🚀 Features
4. ⚡ Quick Start
5. 🧠 What I Learned
6. 🙌 Credits

---

📖 Introduction

Promptopia is a full-stack AI prompt sharing platform where users can:

• Share, edit, and delete their own AI prompts
• Discover prompts shared by others
• Explore creator profiles
• Search prompts by tag
• Copy prompts easily with one click

It implements secure authentication using NextAuth, connects to MongoDB, and follows modern React/Next.js coding patterns.

---

⚙️ Tech Stack

• Next.js 15
• React
• MongoDB
• NextAuth.js
• Tailwind CSS
• App Router
• CSS Modules, Client/Server Components

---

🚀 Features

• 💡 Create, Read, Update, and Delete (CRUD) AI prompts
• 🌐 Google Authentication via NextAuth
• 🖼️ User profile pages with their own prompt lists
• 🔍 Search prompts by tag
• 🧷 Copy-to-clipboard support
• 🤝 View other users’ profiles
• 📱 Fully responsive design (mobile + desktop)
• ✨ Modern UI with Glassmorphism styling
• 🧩 Reusable components and clean architecture

---

⚡ Quick Start

🧰 Prerequisites

Make sure you have the following installed:

• Git
• Node.js
• npm or pnpm

---

🔽 Clone the Repository

git clone https://github.com/hemantsinghdev/promptopia-sharing-platform
cd promptopia-sharing-platform

---

📦 Install Dependencies

npm install
# or
pnpm install

---

🔐 Set Up Environment Variables

Create a .env file in the root directory and add:

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_URL_INTERNAL=http://localhost:3000
NEXTAUTH_SECRET=your_random_secret
GOOGLE_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
MONGODB_URI=your_mongo_connection_string

Get credentials from:

• Google Cloud Console
• Random secret generator
• MongoDB Atlas

---

▶️ Run the Development Server

npm run dev

Visit: http://localhost:3000

---

🧠 What I Learned

This was my first full-stack project with Next.js, and it helped me learn:

• How the App Router architecture works in Next.js 15
• Managing both client and server components
• Implementing authentication with NextAuth
• Connecting to MongoDB using Mongoose
• Using Tailwind CSS for styling a modern UI
• Building clean folder structures and reusable components
• Understanding real-world full-stack flows: from request → DB → response

This project gave me the confidence to build more full-stack apps independently.

---

🙌 Credits

• Original project repo: github.com/adrianhajdin/project_next_14_ai_prompt_sharing
• Tutorial by JavaScript Mastery (YouTube)

---

Made with learning and a growing love for full-stack development 🚀 by Hemant Singh