Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application will serve as a robust platform for optimizing projects through refactoring, identifying bugs, and providing solutions. It will enable users to streamline their development processes and enhance overall project performance.

## CORE FEATURES
1. **Project Optimization Dashboard**: A centralized interface where users can view the current status of their projects, including optimization suggestions and performance metrics.
2. **Bug Detection System**: An automated tool that scans the codebase to identify potential bugs and performance issues, providing detailed reports and recommendations for fixes.
3. **Refactoring Suggestions**: A feature that analyzes code quality and suggests best practices for refactoring to improve maintainability and readability.
4. **Task Management**: Allows users to create, assign, and track tasks related to bug fixes and optimizations, enhancing team collaboration.
5. **User Feedback Integration**: A mechanism for users to submit feedback on the optimization process, helping to refine the tool further.
6. **Analytics and Reporting**: Provides insights into project performance over time, highlighting improvements made through optimizations and bug fixes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space to enhance readability and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high contrast for readability.
- **Layout**: A single-page layout with a top navigation bar, followed by sections for the dashboard, bug detection, refactoring suggestions, task management, and analytics. Each section should be distinctly separated yet cohesive.
- **Typography**: Use sans-serif fonts for a modern look, with a clear hierarchy (e.g., headings in bold, larger sizes; body text in regular weight).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the interactive components.
- **Styling**: Tailwind CSS for rapid and responsive styling.
- **UI Components**: Utilize shadcn/ui for polished and accessible UI components.
- **State Management**: Use Context API or Zustand for managing global state across the application.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the Layout**: Develop the main components for the navigation bar and section layouts using Tailwind CSS for styling.
3. **Implement the Dashboard**: Build the dashboard component that displays project performance metrics and optimization suggestions.
4. **Develop the Bug Detection System**: Integrate a code analysis tool that scans for bugs and displays results in a user-friendly format.
5. **Add Refactoring Suggestions**: Create a component that analyzes code quality and provides suggestions based on best practices.
6. **Implement Task Management**: Develop the task management feature to allow users to create and track tasks.
7. **Build Analytics and Reporting**: Set up analytics to collect data on performance improvements and present it in a visually appealing way.
8. **Test the Application**: Conduct thorough testing to identify and fix any bugs before deployment.

## USER EXPERIENCE
Users will interact with the application through an intuitive dashboard that provides easy access to all features. They will be able to navigate between sections seamlessly, receive real-time updates on project status, and utilize tools for bug detection and optimization. The responsive design ensures a smooth experience across devices, allowing users to manage their projects efficiently from anywhere.