Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to teach programming through an interactive chatbot and a series of 28 mini-classes, each focusing on different programming languages and cybersecurity tools. The chatbot acts as a mentor, assigning tasks to users and providing feedback on their submissions, fostering an engaging learning environment.

## CORE FEATURES
1. **Interactive Chatbot**: A conversational interface that assigns programming tasks and checks user responses for correctness without providing direct answers.
2. **Mini-Class Modules**: 28 structured lessons on various programming languages and cybersecurity concepts, each containing informative content and exercises.
3. **Task Submission and Feedback**: Users can submit their completed tasks to the chatbot, which evaluates their work and offers constructive feedback.
4. **Progress Tracking**: A dashboard feature that allows users to track their learning progress and see completed tasks.
5. **User Profiles**: Authentication system where users can create profiles to save their progress and revisit completed lessons.
6. **Resource Library**: A section providing additional resources, articles, and tools related to programming and cybersecurity for further learning.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space to enhance readability. The focus is on clear typography and functional UI elements.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: A single-page layout for the dashboard with sections for the chatbot, progress tracker, and resource library, utilizing a grid system for clean organization.
- **Typography**: Use a sans-serif font for headings (e.g., Montserrat) and a legible serif font for body text (e.g., Georgia) to create a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and scalable application structure.
- **Styling**: Tailwind CSS for a responsive design and utility-first styling approach.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design aesthetic.
- **State Management**: Implement Redux or Context API for managing application state, especially for user progress and chatbot interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Design the Chatbot Interface**: Create a responsive chatbot UI that allows users to interact seamlessly.
3. **Develop Mini-Class Modules**: Structure the content for the 28 lessons and integrate them into the application.
4. **Implement Task Submission**: Create a form for users to submit their tasks and build logic for the chatbot to evaluate responses.
5. **Build User Authentication**: Set up user profiles with secure authentication to manage progress tracking.
6. **Create Progress Dashboard**: Design a dashboard to visually represent user progress and completed tasks.
7. **Integrate Resource Library**: Add a section for additional learning materials that users can access.

## USER EXPERIENCE
Users will interact with the chatbot to receive tasks based on the mini-classes they are learning. After completing a task, they will submit it through the chatbot interface. The chatbot will provide feedback on their submissions, helping them identify areas for improvement. Users can track their progress on the dashboard, which updates in real-time as they complete lessons and tasks, ensuring a smooth and engaging learning experience.