Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application designed to optimize database queries and improve overall performance through small code changes. The application will provide tools and insights to help developers identify inefficiencies in their queries, leading to significant reductions in resource usage. 

## CORE FEATURES
1. **Query Analyzer**: A tool that evaluates database queries and provides performance metrics, highlighting areas for optimization.
2. **Performance Insights Dashboard**: A visual representation of query performance over time, displaying trends and improvements after changes are made.
3. **Code Suggestion Engine**: Offers small code modifications based on best practices for optimizing queries, reducing resource usage.
4. **User Feedback System**: Allows users to submit feedback on the effectiveness of suggestions, helping to improve the suggestion engine over time.
5. **Resource Usage Tracker**: Monitors and displays the resource consumption of queries before and after optimization.
6. **Documentation Section**: Provides users with access to guides and best practices for query optimization.

## DESIGN SPECIFICATIONS
- Visual Style: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- Color Mode: Light theme with dark text on light backgrounds
- Primary Color: #1978E5 (accent for buttons, links, highlights)
- Typography: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- Border Radius: 8px (moderately rounded) for buttons, cards, and inputs
- Layout: The main layout will include a top navigation bar, a hero section for introducing the application, a features section, and performance insights displayed in a dashboard-style grid.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Redux (if needed for global state management)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript, and install Tailwind CSS.
2. **Configure Tailwind CSS**: Set up Tailwind CSS by creating the configuration files and including the necessary imports in your CSS.
3. **Create Layout Components**: Build the main layout components, including the navigation bar, hero section, and dashboard layout.
4. **Develop Core Features**: Implement the core features:
   - Create the Query Analyzer component.
   - Develop the Performance Insights Dashboard using charts or graphs.
   - Build the Code Suggestion Engine with a simple UI for suggestions.
   - Implement the User Feedback System to collect feedback.
   - Add the Resource Usage Tracker to monitor performance.
   - Create the Documentation Section with links to guides.
5. **Style Components**: Apply Tailwind CSS classes for styling, ensuring adherence to the design specifications.
6. **Implement State Management**: If necessary, set up Redux for managing the application state, especially for user feedback and performance data.
7. **Testing and Deployment**: Test the application for usability and performance, then deploy using a service like Vercel or Netlify.

## USER EXPERIENCE
Users will interact with the application through a straightforward and intuitive interface. Upon entering the application, they will see a hero section explaining the benefits of query optimization. They can navigate to different features via the top navigation bar. Users can input queries into the Query Analyzer and receive instant feedback on performance metrics and optimization suggestions. The Performance Insights Dashboard will display their query performance in a visually compelling way, encouraging users to implement suggested changes. The user feedback system will allow for continuous improvement of the application.