Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a comprehensive web application designed to facilitate the selling and management of online courses. It includes a broad range of features to enhance both student learning experiences and instructor management, offering a modern and engaging platform for education.

## CORE FEATURES
1. **User Registration & Login**: Secure user registration and authentication process to ensure privacy and data protection.
2. **Course Library**: A well-organized repository of courses categorized for ease of access and discovery.
3. **Universal Video Player**: Supports multiple video platforms and formats, providing a seamless viewing experience with features like adaptive streaming, playback speed control, and subtitles.
4. **Student Dashboard**: A personalized dashboard for students to track their progress, view upcoming sessions, and access their certificates.
5. **Live Learning**: Integration with video conferencing tools like Zoom and Google Meet for live classes, complete with attendance tracking and session recordings.
6. **Assessment Features**: Various assessment formats including quizzes and coding tests, along with analytics to gauge student performance.

## 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**: A responsive layout with a top navigation bar, main content area displaying course details, and sidebars for additional navigation and features.

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

## 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 Core Components**: Develop reusable components for buttons, cards, and the video player using Tailwind CSS for styling.
3. **Implement User Authentication**: Set up user registration and login features with secure authentication methods.
4. **Build the Course Library**: Create a dynamic course library that fetches course data and displays it in a user-friendly manner.
5. **Integrate Video Player**: Implement the universal video player to support multiple video formats and platforms, ensuring adaptive streaming capabilities.
6. **Develop Dashboards**: Design and build the student and instructor dashboards to display relevant information and facilitate user engagement.
7. **Incorporate Live Learning**: Integrate Zoom and Google Meet APIs for live classes, ensuring features like chat, attendance tracking, and session recordings are included.
8. **Implement Assessment Features**: Create various assessment formats along with analytics to track student performance.
9. **Test and Optimize**: Conduct thorough testing to ensure responsive design, usability, and performance across devices.
10. **Deploy the Application**: Choose a hosting service and deploy the application, ensuring proper configuration for SSL and domain setup.

## USER EXPERIENCE
The user experience will focus on intuitive navigation and seamless interactions. Students will have easy access to their courses, a personalized dashboard showcasing their progress, and quick links to live sessions. Instructors will benefit from straightforward course management tools and analytics to evaluate student engagement and performance. The application will be designed to facilitate continuous learning with features such as bookmarks, notes, and personalized recommendations, ensuring an engaging and effective learning journey.