Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as an AI assistant that helps students understand programming concepts by converting theory into practical, app-building tasks. Users can input a programming theory concept and receive a structured JSON output that guides them in creating small, real-world mini apps. The application aims to make learning engaging and hands-on, encouraging students to apply theoretical knowledge in practical scenarios.

## CORE FEATURES
1. **Concept Input**: A user-friendly input field where students can enter a programming theory concept.
2. **JSON Output Generation**: The application generates structured JSON output with a detailed breakdown of the concept, project idea, app features, coding challenge, sample input/output, hints, and difficulty level.
3. **Real-world Mini App Suggestions**: Provides beginner-friendly app ideas that can be built in 1-2 hours, focusing on real-life scenarios like student marks or shopping lists.
4. **Hints and Guidance**: Offers helpful hints that guide students in their coding challenges without giving away complete answers.
5. **Mindmap Generation**: Visual representation of the concept and its applications, allowing students to grasp the relationships between ideas effectively.
6. **Coding Program Examples**: Provides additional coding examples related to the programming theory for practical understanding.

## 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 main layout features a centered hero section at the top, followed by a structured content area that includes input fields, output sections, and additional resources. A responsive design ensures accessibility on various devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for a consistent and modern user interface.
- **State Management**: Redux or Context API for managing app state as needed.

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript template.
2. **Install Tailwind CSS** and configure it for styling.
3. **Create components** for the input field, JSON output display, and mindmap visualization.
4. **Implement state management** using Redux or Context API to handle user input and app output data.
5. **Develop the JSON generation logic** to provide structured outputs based on the theory concept input.
6. **Add mindmap generation functionality** using a suitable library for visual representation.
7. **Test the application** for user experience, ensuring all features function correctly and intuitively.

## USER EXPERIENCE
Users will interact with the application by entering a programming theory concept in a clear input field. Upon submission, the application processes the input and generates a structured JSON output displayed in an organized format. Students can view hints and coding challenges, and use mindmaps for a visual understanding of the concept. The minimalist design ensures that the content is easily readable, promoting a smooth learning experience without distractions.

This application not only facilitates learning programming concepts but also empowers students to apply their knowledge practically, enhancing their skills and confidence in coding.