Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to teach practical coding skills and concepts, similar to Google Notebook. The main purpose is to provide users with an interactive learning platform that emphasizes hands-on coding experience and features a clean, minimalist design to enhance learning without distractions.

## CORE FEATURES
1. **Interactive Coding Exercises**: Users can practice coding in real-time with immediate feedback on their solutions.
2. **Tutorial Library**: A collection of coding tutorials covering various topics, accessible via a searchable interface.
3. **Progress Tracking**: Users can track their learning progress, including completed exercises and tutorials.
4. **Discussion Forum**: A space for users to ask questions, share tips, and collaborate on coding challenges.
5. **Resource Center**: Curated resources, including articles, videos, and tools, to supplement the learning experience.
6. **User Profiles**: Personal profiles for users to showcase their progress and achievements within the application.

## 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 consists of a top navigation bar, a central content area for coding exercises and tutorials, a sidebar for quick links to resources and forums, and a footer with contact information and additional links.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Redux or Context API (as needed for managing user progress and session state)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript, and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Build the layout structure including the navigation bar, main content area, sidebar, and footer.
3. **Implement Core Features**:
   - Develop interactive coding exercises using a code editor component.
   - Create the tutorial library with searchable functionality.
   - Implement progress tracking to save user data.
   - Set up the discussion forum using a backend service for user posts.
   - Add a resource center for supplementary materials.
   - Design user profiles to display user achievements.
4. **Styling**: Apply Tailwind CSS styles according to the design specifications, ensuring responsiveness across devices.
5. **Testing**: Conduct thorough testing of all features, focusing on user experience and performance.
6. **Deployment**: Deploy the application using a cloud service provider and set up a domain for easy access.

## USER EXPERIENCE
Users will start on a landing page that highlights the features and benefits of the application. They will navigate through the tutorials and coding exercises seamlessly. Progress tracking will encourage users to complete more tutorials and exercises, while the discussion forum will foster a sense of community. The minimalist design will ensure that users remain focused on learning without unnecessary distractions.