Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a code refactoring and optimization tool designed for developers. Its primary purpose is to enhance the performance and maintainability of code in existing applications and databases, ensuring that functionality and UI/UX remain unchanged.

## CORE FEATURES
1. **Code Analysis**: Automatically scans the application codebase and database interactions to identify areas for optimization.
2. **Refactoring Suggestions**: Provides actionable recommendations for refactoring code, ensuring improved readability and performance.
3. **Performance Metrics**: Displays key performance indicators before and after optimizations, allowing users to measure the impact of changes.
4. **Version Control Integration**: Seamless integration with popular version control systems to manage changes efficiently.
5. **User-friendly Dashboard**: A minimalist dashboard that presents all features and metrics in a clean layout, focusing on usability.
6. **Documentation & Best Practices**: Offers a library of coding best practices and guidelines to help developers improve their skills continuously.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a clean, simple design emphasizing white space. The application will prioritize clarity and ease of use, minimizing distractions.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high readability and a comfortable viewing experience.
- **Layout**: A responsive grid layout that organizes core features in a single-column format, supplemented by side navigation for easy access to various tools and sections.
- **Typography**: Utilize a sans-serif font like Open Sans for body text, with a larger, bold font for headings to establish a clear hierarchy. Maintain consistent font sizes for different text elements to enhance readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type-checking and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, ensuring rapid development and easy customization of UI components.
- **UI Components**: Integration of shadcn/ui for pre-designed, accessible, and customizable UI components.
- **State Management**: Use React Context API for managing global state if necessary, ensuring that state updates are efficient and predictable.

## IMPLEMENTATION STEPS
1. **Set Up Project Environment**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and any other required libraries using npm or yarn.
3. **Create Core Components**: Develop core components for the dashboard, including the analysis tool, suggestions display, and performance metrics.
4. **Implement Routing**: Set up React Router to handle navigation between different sections of the application.
5. **Integrate Code Analysis Tool**: Build the functionality to analyze the codebase and highlight optimization opportunities.
6. **Develop User Dashboard**: Design and implement the minimalist dashboard layout using Tailwind CSS for styling, ensuring responsiveness.
7. **Implement Performance Metrics**: Create a component to display performance metrics before and after refactoring.
8. **User Documentation**: Compile documentation on best practices and how to use the application effectively, integrating it into the interface.

## USER EXPERIENCE
The user experience will focus on intuitive navigation and clear interactions. Upon entering the application, users will be greeted with a clean dashboard that allows them to quickly access code analysis tools. Users can input their codebase for analysis and receive immediate feedback on potential optimizations. The performance metrics will be easily accessible, allowing users to visually compare performance before and after changes. Navigation will be straightforward, ensuring that users can explore features without confusion, maintaining a seamless flow throughout the application.