Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to allow users to upload images containing educational content. The app will analyze the text within the image, organize the information, and subsequently quiz the user on the material to enhance understanding and retention. The goal is to provide an interactive learning experience that bridges visual content and assessments.

## CORE FEATURES
1. **Image Upload**: Users can upload images containing educational content for analysis.
2. **Content Analysis**: The application processes the uploaded images, extracting and organizing the educational material for review.
3. **Interactive Quizzes**: After content analysis, users are presented with quizzes based on the material to assess their understanding.
4. **Progress Tracking**: Users can track their learning progress and quiz results over time.
5. **User Feedback**: After quizzes, users receive feedback on their performance to identify areas for improvement.

## 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 layout will consist of a top navigation bar, a central content area for image upload and analysis, and a quiz section displayed after content organization. The design will ensure easy navigation and a user-friendly experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux Toolkit (for managing application state effectively)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create the Layout**: Design the main layout with a navigation bar, image upload area, and quiz section using Tailwind CSS for styling.
3. **Implement Image Upload Functionality**: Use an input element to allow users to upload images and integrate a library for image processing and text extraction.
4. **Develop Content Analysis Logic**: Create functions to analyze the extracted text and organize it into a structured format.
5. **Build the Quiz Feature**: Design the quiz interface, linking it dynamically to the analyzed content, and implement scoring and feedback mechanisms.
6. **Integrate State Management**: Utilize Redux Toolkit to manage state across the application, ensuring smooth data flow between components.
7. **Testing and Iteration**: Test the application thoroughly, focusing on user experience, responsiveness, and performance, making necessary adjustments based on feedback.

## USER EXPERIENCE
Users will interact with the application by first uploading an image containing educational content. The app will then process the image, presenting the organized content in a clear format. Users can then engage with quizzes tailored to the material, receiving immediate feedback on their performance. The minimalist design ensures that users can focus on learning without distractions, while the responsive layout adapts to different devices, providing a seamless experience on both desktop and mobile.