Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a personal AI coding assistant, designed to support users in writing clean, efficient code and enhancing their programming skills. It provides step-by-step guidance on coding practices, debugging, and software architecture, fostering a learning environment that encourages growth and improvement.

## CORE FEATURES
1. **Interactive Coding Assistance**: Users can ask questions and receive step-by-step coding help, including explanations of concepts, examples, and code snippets.
2. **Debugging Support**: The application analyzes errors, explains them clearly, and guides users through the fixing process while preventing similar issues in the future.
3. **Code Reviews and Best Practices**: Users receive feedback on their code, emphasizing best practices, readability, and maintainability.
4. **Mentorship Mode**: Users can activate a teaching mode, where complex concepts are broken down into simple explanations, real-world analogies, and common mistakes.
5. **Solution Comparisons**: When multiple coding solutions exist, the application compares them and recommends optimal approaches based on trade-offs.
6. **Progress Tracking**: Users can track their learning journey and improvements over time, receiving tailored recommendations for further development.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing clean lines, ample white space, and a focus on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring comfort during extended reading sessions.
- **Layout**: 
  - A single-page layout with a fixed navigation bar at the top.
  - Main content area divided into sections for coding assistance, debugging, mentorship, and progress tracking.
  - Responsive design to ensure usability across devices.
- **Typography**: 
  - Primary font: Sans-serif (e.g., Arial or Helvetica) for clarity and modern appeal.
  - Headings: Bold and larger size for visual hierarchy.
  - Body text: Regular weight for easy reading.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and robust application structure.
- **Styling**: Tailwind CSS for utility-first styling, promoting a clean and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Redux or Context API for efficient state management across the application.

## IMPLEMENTATION STEPS
1. **Set Up the Development Environment**:
   - Initialize a new React project with TypeScript using Create React App.
   - Install Tailwind CSS and configure it for styling.
   - Include shadcn/ui for UI components.

2. **Create the Layout**:
   - Implement a fixed navigation bar with links to different features (Coding Assistance, Debugging, Mentorship, Progress Tracking).
   - Design the main content area to dynamically load relevant components based on user selection.

3. **Develop Core Features**:
   - Build the Interactive Coding Assistance feature with an input area for user queries and a display area for responses.
   - Implement the Debugging Support feature to analyze code snippets and provide explanations.
   - Create the Mentorship Mode, ensuring it breaks down concepts as specified.
   - Enable Solution Comparisons to allow users to choose optimal coding approaches.

4. **Integrate Progress Tracking**:
   - Set up a state management solution (Redux/Context API) to track user interactions and improvements.
   - Design a dedicated section to visualize progress over time with charts or metrics.

5. **Testing and Optimization**:
   - Conduct user testing to gather feedback on usability and functionality.
   - Optimize performance and ensure accessibility standards are met.

6. **Deployment**:
   - Prepare the application for deployment using a service like Vercel or Netlify.
   - Monitor performance and user feedback post-launch for continuous improvement.

## USER EXPERIENCE
Users will interact with the application primarily through a clean and intuitive interface. They can easily navigate between different sections using the top navigation bar. Upon entering a query in the coding assistance section, they receive structured responses with code examples and explanations. The debugging feature provides clear insights into errors, and the mentorship mode offers a supportive learning experience. Users will feel encouraged and empowered as they track their progress and improve their coding skills over time.