🚀 Prompt Manager

A modern, secure web application for managing and organizing AI prompts with Firebase authentication and Firestore database integration.

🌐 Live Demo

🔗 https://prompt-manager-2024.web.app

Try it now! Create an account and start managing your AI prompts in the cloud.

🛠️ Build Your Own

Want to build this app from scratch? Use these prompts with your AI assistant:

1. PROTOTYPE_APP_PROMPT.md - Use this prompt to prototype the app
2. SETUP_FIREBASE.md - Add this as AI rules/cursor rules in your IDE for Firebase setup
3. SETUP_FIREBASE_PROMPT.md - Use this prompt to setup Firebase if the flow was interrupted

Perfect for learning Firebase, React, or building similar applications!

✨ Features

🔐 Authentication & Security

• Firebase Authentication with email/password and Google sign-in
• User-scoped data - each user can only access their own content
• Secure Firestore rules requiring authentication
• Beautiful login/signup UI with form validation

📝 Prompt Management

• Create, edit, and delete prompts with rich metadata
• Project-based organization with custom colors
• Category system for fine-grained organization
• Tagging system for flexible categorization
• Favorites for quick access to frequently used prompts
• Search functionality across titles, content, and tags
• Usage tracking to see which prompts are most popular

🎨 Modern UI/UX

• Responsive design that works on all devices
• Dark mode support with system preference detection
• Real-time updates using Firestore listeners
• Intuitive sidebar navigation with project/category filtering
• Copy to clipboard functionality
• Keyboard shortcuts for power users

🔄 Data Management

• Firestore database for cloud synchronization across devices
• Real-time sync - changes appear instantly across all sessions
• Offline support with automatic sync when reconnected
• Data export/import capabilities
• Automatic backups via Firebase

🛠️ Tech Stack

• Frontend: React 18 with TypeScript
• Styling: Tailwind CSS with custom design system
• Database: Firebase Firestore (NoSQL document database)
• Authentication: Firebase Auth
• Icons: Lucide React
• Build Tool: Create React App
• Deployment: Firebase Hosting (optional)

🚀 Quick Start

Prerequisites

• Node.js 16+ and npm
• Firebase account (for cloud features)
• Setup Firebase MCP server based on this doc: https://firebase.google.com/docs/cli/mcp-server#before-you-begin
• AI IDE Setup: Add SETUP_FIREBASE.md as cursor rules/AI rules in your IDE (Cursor, Gemini CLI, etc.)

1. Clone and Install

git clone https://github.com/charlotteliang/prompt-manager.git
cd prompt-manager
npm install

2. Firebase Setup (Required for authentication)

1. Create a Firebase project at Firebase Console
2. Enable Authentication:
   • Go to Authentication > Sign-in method
   • Enable Email/Password and Google providers
3. Create Firestore Database:
   • Go to Firestore Database > Create database
   • Start in production mode (rules are already configured)
   • Choose a location close to your users
4. Get your config:
   • Go to Project Settings > General
   • Add a web app and copy the config

3. Configure Environment Variables

1. Copy the example environment file:

cp .env.example .env

2. Update .env with your Firebase project details:

REACT_APP_FIREBASE_API_KEY=your_api_key_here
REACT_APP_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_project_id.firebasestorage.app
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id

⚠️ Security Note: Never commit your .env file to version control. It's already added to .gitignore to prevent accidental commits.

4. Deploy Firestore Rules

firebase login
firebase use your-project-id
firebase deploy --only firestore:rules

5. Run the App

npm start

Visit http://localhost:3000 and create an account to start managing your prompts!

🌐 Or Use the Live Version

No setup required! You can use the app right now at: 🔗 https://prompt-manager-2024.web.app

📁 Project Structure

src/
├── components/          # React components
│   ├── LoginForm.tsx   # Authentication UI
│   ├── PromptCard.tsx  # Individual prompt display
│   ├── PromptForm.tsx  # Create/edit prompt form
│   ├── ProjectForm.tsx # Create/edit project form
│   ├── CategoryForm.tsx# Create/edit category form
│   └── Sidebar.tsx     # Navigation sidebar
├── contexts/           # React contexts
│   └── AuthContext.tsx # Authentication state management
├── services/           # Business logic
│   ├── firebaseService.ts  # Direct Firebase operations
│   └── dataService.ts      # Unified data access layer
├── types/              # TypeScript definitions
│   └── index.ts        # All interface definitions
├── utils/              # Utility functions
│   ├── promptAnalysis.ts   # AI prompt analysis
│   └── storage.ts          # Local storage fallback
├── config/             # Configuration
│   └── firebase.ts     # Firebase initialization
└── App.tsx             # Main application component

🔥 Firebase Integration

Firestore Database Structure

users/{userId}/
├── prompts/            # User's prompts
│   └── {promptId}      # Individual prompt document
├── projects/           # User's projects  
│   └── {projectId}     # Individual project document
└── categories/         # User's categories
    └── {categoryId}    # Individual category document

Security Rules

All data is automatically scoped to authenticated users:

rules_version = "2";
service cloud.firestore {
  match /databases/{database}/documents {
    match /prompts/{promptId} {
      allow read, write: if request.auth != null 
        && request.auth.uid == resource.data.userId;
    }
    // Similar rules for projects and categories
  }
}

🛡️ Security Features

• Authentication required - No anonymous access
• User data isolation - Each user can only access their own data
• Secure by default - All Firestore operations are protected
• Client-side validation - Form validation with error handling
• XSS protection - Safe rendering of user content

🚀 Deployment

Deploy to Firebase Hosting

npm run build
firebase login
firebase init hosting
firebase deploy

Deploy to Other Platforms

The app builds to static files and can be deployed to:

• Vercel, Netlify, or other static hosts
• GitHub Pages
• Your own server

🤝 Contributing

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

📄 License

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

🙏 Acknowledgments

• Firebase for backend infrastructure
• Tailwind CSS for styling system
• Lucide for beautiful icons
• React for the awesome framework

---

Made with ❤️ for the AI community