Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to offer users a platform for reviewing and enhancing their Lovable websites or applications. Users can submit links to their projects and receive feedback on design, functionality, and user experience, helping them to improve their applications effectively.

## CORE FEATURES
1. **Link Submission**: Users can easily submit the URL of their Lovable project for review through a simple input form.
2. **Review Generation**: The app will generate a structured review based on best practices, highlighting areas for improvement and providing actionable suggestions.
3. **Feedback Dashboard**: A user-friendly dashboard where users can track the status of their submissions and view past reviews.
4. **Resource Recommendations**: Suggestions for resources, articles, or tools that align with the feedback provided, facilitating further learning and improvement.
5. **User Profiles**: Users can create profiles to manage their submissions, feedback history, and personal notes on their projects.
6. **Rating System**: Users can rate the helpfulness of the feedback received, contributing to a community-driven improvement process.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing a clean, simple aesthetic with ample white space to enhance readability and focus on content.
- **Color Mode**: Light theme featuring dark text on light backgrounds to ensure high contrast and ease of reading.
- **Layout**: A single-column layout with a top navigation bar for easy access to main features. Key content sections are organized in a card format to maintain clarity and structure.
- **Typography**: Use of a sans-serif font for body text (e.g., Arial or Helvetica) for readability, with larger, bold headings to establish a clear hierarchy. Text sizes should vary from 16px for body text to 24px for headings.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design adjustments while maintaining a cohesive look.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components that fit the minimalist aesthetic.
- **State Management**: Implement state management using React's Context API or Zustand, depending on the complexity of state needs.

## IMPLEMENTATION STEPS
1. **Setup Environment**: Initialize a new React project with TypeScript. Install Tailwind CSS and shadcn/ui for styling.
2. **Create Core Components**: Develop the main components including the submission form, review display, dashboard, and user profile sections.
3. **Implement Routing**: Use React Router to manage navigation between the submission page, dashboard, and user profiles.
4. **Integrate State Management**: Set up state management to handle user inputs, submitted links, and feedback responses.
5. **Design Layout**: Apply Tailwind CSS to achieve the minimalist design, ensuring proper spacing and alignment for a clean look.
6. **Develop API Integration**: If applicable, integrate with an API to fetch and submit reviews, ensuring data persistence.
7. **Test Responsiveness**: Ensure the app is fully responsive, providing a seamless experience across various devices and screen sizes.
8. **User Testing**: Conduct user testing to gather feedback on usability and design, making necessary adjustments based on insights.

## USER EXPERIENCE
Users will begin their journey on a clean landing page where they can easily find the link submission form. After entering their URL, they will receive instant confirmation of their submission. The dashboard will display their submitted links and reviews, allowing for easy navigation and tracking. Users can interact with the feedback provided by viewing detailed reports and accessing recommended resources. The minimalist design ensures that the focus remains on content and usability, guiding users through an intuitive experience.