PromptHub

A collaborative platform for managing and sharing LLM prompts within a team. Users can create, edit, organize, and access prompts through a web interface or API, with role-based permissions controlling what actions each user can perform.

Features

• 🔐 Google OAuth Authentication - Secure login with Google accounts
• 👥 Role-Based Access Control - Admin, Creator, and Viewer roles with granular permissions
• 📝 Prompt Management - Create, edit, and organize prompts with version history
• 🏷️ Advanced Labeling - Categorize prompts with general labels, recommended LLMs, and usage recommendations
• ⭐ Favorites & Search - Mark favorite prompts and search across all content
• 🔄 Version Control - Track changes with full version history and rollback capability
• ✅ Approval Workflow - Submit and review edit requests for controlled collaboration
• 🔌 REST API - Programmatic access to prompts via API keys
• 🎨 Modern UI - Beautiful, responsive interface with dark mode support

Tech Stack

Frontend

• React 18 with TypeScript
• Vite for fast development and building
• React Router for client-side routing
• Shadcn UI components with Tailwind CSS
• Axios for API requests

Backend

• Node.js with Express
• TypeScript
• MongoDB with Mongoose
• Passport.js for Google OAuth
• JWT for authentication
• Postmark for email notifications

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm (v9 or higher)
• MongoDB (v6 or higher) - Running locally or MongoDB Atlas account

You will also need:

• Google OAuth 2.0 credentials (Client ID and Client Secret)
• Postmark account (for email notifications)

Installation

1. Clone the repository

   git clone <repository-url>
   cd prompthub

2. Install dependencies

   npm install

   This will install dependencies for the root project, client, server, and shared modules.

3. Set up environment variables

   Create a .env file in the server/ directory:

   cp server/.env.example server/.env

   Configure the following environment variables in server/.env:

   # Server Configuration
   PORT=3000
   NODE_ENV=development
   
   # Database
   MONGODB_URI=mongodb://localhost:27017/prompthub
   # Or use MongoDB Atlas:
   # MONGODB_URI=mongodb+srv://username:[email protected]/prompthub
   
   # JWT Secrets (generate strong random strings)
   JWT_SECRET=your-jwt-secret-key-here
   JWT_REFRESH_SECRET=your-jwt-refresh-secret-key-here
   
   # Google OAuth 2.0
   GOOGLE_CLIENT_ID=your-google-client-id
   GOOGLE_CLIENT_SECRET=your-google-client-secret
   GOOGLE_CALLBACK_URL=http://localhost:3000/api/auth/google/callback
   
   # Frontend URL
   CLIENT_URL=http://localhost:5173
   
   # Email Service (Postmark)
   POSTMARK_API_KEY=your-postmark-api-key
   POSTMARK_FROM_EMAIL=[email protected]
   
   # Session
   SESSION_SECRET=your-session-secret-here

   Important Notes:

   • Generate strong random strings for JWT secrets (you can use openssl rand -base64 32)
   • Get Google OAuth credentials from Google Cloud Console
   • Sign up for Postmark at postmarkapp.com

4. Set up Google OAuth

   • Go to Google Cloud Console
   • Create a new project or select existing one
   • Enable Google+ API
   • Go to "Credentials" → "Create Credentials" → "OAuth client ID"
   • Choose "Web application"
   • Add authorized redirect URI: http://localhost:3000/api/auth/google/callback
   • Copy the Client ID and Client Secret to your .env file

5. Seed the database (Optional but recommended)

   Create an admin user and sample prompts:

   npm run seed

   This will create:

   • An admin user (email: [email protected], password: Admin123!)
   • Several sample prompts for testing

Running the Application

Development Mode

Start both frontend and backend concurrently:

npm start

This will:

• Start the backend server on http://localhost:3000
• Start the frontend dev server on http://localhost:5173
• Open your browser automatically

Production Mode

1. Build the application:

   npm run build

2. Start the production server:

   npm run start:prod

Available Scripts

Root Level Scripts

• npm start - Start both client and server in development mode
• npm run build - Build both client and server for production
• npm run lint - Run ESLint on all code
• npm run lint:fix - Fix ESLint errors automatically
• npm run seed - Seed database with admin user and sample data
• npm run clean-db - Remove all data from database
• npm run reset-db - Clean database and re-seed with fresh data
• npm run make-admin - Make a specific user an admin (requires editing script)

Client Scripts (in client/ directory)

• npm run dev - Start Vite dev server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint on client code

Server Scripts (in server/ directory)

• npm run dev - Start server with nodemon (auto-reload)
• npm run build - Build TypeScript to JavaScript
• npm start - Start production server
• npm run lint - Run ESLint on server code

Project Structure

prompthub/
├── client/                  # Frontend React application
│   ├── src/
│   │   ├── api/            # API client functions
│   │   ├── components/     # React components
│   │   ├── contexts/       # React contexts
│   │   ├── hooks/          # Custom React hooks
│   │   ├── pages/          # Page components
│   │   ├── types/          # TypeScript type definitions
│   │   └── lib/            # Utility functions
│   ├── public/             # Static assets
│   └── package.json
│
├── server/                 # Backend Express application
│   ├── config/            # Configuration files
│   ├── models/            # Mongoose models
│   ├── routes/            # Express routes
│   ├── services/          # Business logic
│   ├── utils/             # Utility functions
│   ├── scripts/           # Utility scripts
│   ├── server.ts          # Server entry point
│   └── package.json
│
├── shared/                # Shared code between client and server
│   ├── config/           # Shared configuration (roles, etc.)
│   ├── types/            # Shared TypeScript types
│   └── package.json
│
├── README.md             # This file
├── LICENSE               # MIT License
└── package.json          # Root package.json

User Roles

Viewer

• View all accessible prompts
• Mark prompts as favorites
• Search and filter prompts
• Access prompts via API (if prompt is API-enabled)

Creator

• All Viewer permissions
• Create new prompts
• Edit their own prompts
• Edit other users' prompts (if allowed)
• Submit edit requests for prompts requiring approval
• Approve/decline edit requests on their own prompts

Admin

• All Creator permissions
• Invite new users to the platform
• Manage all users (view, change roles, remove access)
• Access admin settings panel

API Documentation

Once the application is running, you can access the full API documentation at:

• Web UI: http://localhost:5173/api-docs
• Endpoint: http://localhost:3000/api/v1/prompts

Quick Start with API

1. Get your API key from Settings → API Access
2. Make requests with the X-API-Key header:

curl -H "X-API-Key: your-api-key-here" \
     http://localhost:3000/api/v1/prompts

Database Scripts

Seed Database

npm run seed

Creates an admin user and sample prompts. Safe to run multiple times (idempotent).

Clean Database

npm run clean-db

WARNING: This removes ALL data from the database. Use with caution!

Reset Database

npm run reset-db

Cleans the database and re-seeds it with fresh data.

Make User Admin

npm run make-admin

Edit server/scripts/makeAdmin.ts to specify the user email, then run this command.

Development Tips

Hot Reloading

Both frontend and backend support hot reloading during development:

• Frontend: Vite HMR reloads instantly on file changes
• Backend: Nodemon restarts server on file changes

Debugging

• Frontend: Use browser DevTools and React DevTools
• Backend: Logs are output to console with detailed error messages

Database GUI

Consider using MongoDB Compass or Studio 3T to inspect your database during development.

Troubleshooting

Port Already in Use

If ports 3000 or 5173 are already in use:

1. Change PORT in server/.env
2. Update VITE_API_URL in client/vite.config.ts if you change backend port

MongoDB Connection Issues

• Ensure MongoDB is running: mongod or check MongoDB Atlas connection
• Verify MONGODB_URI in server/.env
• Check firewall settings for MongoDB port (27017)

Google OAuth Errors

• Verify redirect URI matches exactly in Google Cloud Console
• Ensure GOOGLE_CALLBACK_URL in .env is correct
• Check that Google+ API is enabled

Email Not Sending

• Verify POSTMARK_API_KEY is correct
• Check Postmark dashboard for error logs
• Ensure POSTMARK_FROM_EMAIL is verified in Postmark

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -m 'Add my feature'
4. Push to the branch: git push origin feature/my-feature
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For issues and questions:

• Open an issue on GitHub
• Check existing documentation
• Review API documentation at /api-docs

---

Built with ❤️ for better prompt management