Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to function as a Learning Management System (LMS). The system will enable the tracking of students who complete courses stored in a database. It will feature different access levels for site owners, facilitators, and students, ensuring appropriate permissions and functionalities for each user type.

## CORE FEATURES
1. **User Authentication**: Secure login and registration for site owners, facilitators, and students, ensuring appropriate access rights.
2. **Course Management**: Facilitators can create, edit, and manage courses, as well as maintain the student database.
3. **Student Progress Tracking**: A dashboard for students to view their learning history and track course completions.
4. **Admin Panel**: A specialized interface for site owners to manage users, oversee course content, and perform site updates.
5. **Course Enrollment**: Students can browse the course database and enroll in available courses.
6. **Reporting**: Generation of reports on student progress and course completion rates for facilitators and site owners.

## 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 application will feature a clear and intuitive layout with a navigation bar, a main content area for displaying courses and user data, and side panels for additional actions and settings.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux for managing application state, if necessary.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and Redux to your project.
3. **Design Layout**: Create a layout structure with a navigation bar, main content area, and side panels.
4. **Implement User Authentication**: Set up authentication using a library like Firebase Auth or JWT-based authentication.
5. **Develop Core Features**:
   - Build the course management functionality for facilitators.
   - Implement student dashboards to track progress.
   - Create the admin panel for site owners.
6. **Testing and Debugging**: Conduct thorough testing for each user role to ensure functionality and permissions are correctly enforced.
7. **Deploy the Application**: Host the application on a platform like Vercel or Netlify.

## USER EXPERIENCE
Users will begin by logging into the application. Site owners will have full access to all features, including user management and course updates. Facilitators will be able to add and manage courses, while students will have a personalized dashboard to track their learning history and enroll in courses. The application will focus on a seamless user experience, ensuring that interactions are intuitive and responsive across devices.