🤖 AI-Powered Feedback Manager

A modern, intelligent feedback management application built with React, Firebase, and Google's Generative AI. This app provides a comprehensive solution for collecting, analyzing, and managing user feedback with AI-powered insights and sentiment analysis.

✨ Features

📝 Feedback Collection

• Simple and intuitive feedback submission interface
• Real-time feedback storage in Firebase Firestore
• Automatic timestamp tracking for all submissions
• Pagination support for viewing large amounts of feedback

🤖 AI Assistant

• Powered by Google's Gemini 2.5 Flash model
• Interactive AI chat interface for answering questions
• Context-aware responses about feedback management
• Real-time AI-powered assistance

📊 Sentiment Analysis

• AI-powered sentiment classification of all feedback
• Automatic categorization into Positive, Neutral, and Negative
• Percentage-based sentiment distribution
• Real-time analysis of feedback sentiment trends

🎨 Modern UI/UX

• Clean, responsive design with Tailwind CSS
• Tab-based navigation for different features
• Toast notifications for user feedback
• Mobile-friendly interface

🛠️ Tech Stack

• Frontend: React 19.1.0 with Vite
• Styling: Tailwind CSS 4.1.11
• Backend: Firebase Firestore
• AI: Google Generative AI (Gemini 2.5 Flash)
• Notifications: React Toastify
• Build Tool: Vite

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Firebase project
• Google AI API key

Installation

1. Clone the repository

   git clone <repository-url>
   cd feedback-manager

2. Install dependencies

   npm install

3. Environment Setup

   Create a .env file in the root directory with the following variables:

   VITE_GEMINI_API_KEY=your_google_ai_api_key_here
   VITE_FIREBASE_CONFIG={"apiKey":"your_firebase_api_key","authDomain":"your_project.firebaseapp.com","projectId":"your_project_id","storageBucket":"your_project.appspot.com","messagingSenderId":"your_sender_id","appId":"your_app_id"}

4. Firebase Setup

   • Create a new Firebase project at Firebase Console
   • Enable Firestore Database
   • Get your Firebase configuration from Project Settings
   • Add the configuration to your .env file

5. Google AI Setup

   • Get your API key from Google AI Studio
   • Add the API key to your .env file

Running the Application

Development Mode:

nodemon --exec "vite"

Production Build:

npm run build
npm run preview

📱 Usage

Feedback Tab

• Enter your feedback in the text area
• Click "Submit Feedback" to save it
• View all submitted feedback with pagination
• Click "Load More" to see additional feedback

AI Assistant Tab

• Ask questions about feedback management
• Get AI-powered responses and insights
• Perfect for understanding feedback patterns and trends

Sentiment Analysis Tab

• Automatically analyzes all stored feedback
• Provides percentage breakdown of sentiment
• Helps understand overall user satisfaction

🔧 Configuration

Firebase Configuration

The app uses Firebase Firestore for data storage. Make sure to:

• Enable Firestore in your Firebase project
• Set up appropriate security rules
• Configure CORS if needed

AI Configuration

The app uses Google's Gemini 2.5 Flash model for:

• AI assistant responses
• Sentiment analysis
• Feedback categorization

📁 Project Structure

feedback-manager/
├── public/
├── src/
│   ├── Components/
│   │   └── FeedbackSentiment.jsx    # Sentiment analysis component
│   ├── assets/
│   ├── App.jsx                       # Main application component
│   ├── firebase.js                   # Firebase configuration
│   ├── main.jsx                      # Application entry point
│   └── index.css                     # Global styles
├── package.json
├── vite.config.js
└── README.md

🔒 Security

• API keys are stored in environment variables
• Firebase security rules should be configured appropriately
• No sensitive data is exposed in the frontend

🚀 Deployment

Vercel

1. Connect your GitHub repository to Vercel
2. Add environment variables in Vercel dashboard
3. Deploy automatically on push

Netlify

1. Connect your repository to Netlify
2. Set build command: npm run build
3. Set publish directory: dist
4. Add environment variables

Firebase Hosting

npm install -g firebase-tools
firebase login
firebase init hosting
npm run build
firebase deploy

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the 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.

🆘 Support

If you encounter any issues or have questions:

• Check the Firebase console for database issues
• Verify your API keys are correctly set
• Ensure all environment variables are properly configured

🔮 Future Enhancements

• User authentication and profiles
• Advanced analytics dashboard
• Export functionality for feedback data
• Email notifications
• Multi-language support
• Advanced AI insights and recommendations

---

Built with ❤️ using React, Firebase, and Google AI