Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a modern, production-ready faculty portal website designed for educational institutions. It provides faculty members with a dedicated login portal and dashboard, allowing them to manage their class schedules, view assignments, and access account settings while maintaining a clean, responsive UI and scalable backend integration.

## CORE FEATURES
1. **Faculty Authentication System**: Secure login and session management with JWT or token-based authentication, allowing faculty to access their institution's data while ensuring privacy.
2. **Faculty Dashboard**: A professional UI featuring sidebar navigation, upcoming class slots, active slots, completed class history, and real-time status updates.
3. **Account Settings Module**: A dedicated page for changing passwords, updating profile details, and managing notifications and privacy settings.
4. **Database Design**: Comprehensive schema for institutions, faculty, class slots, and authentication tokens, ensuring proper relationships within the data.
5. **Real-time Updates**: Integration of WebSockets or polling to provide live updates for class slots and notifications.
6. **Additional Features**: Optional faculty attendance tracking, analytics dashboards, and calendar views for enhanced user engagement.

## 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 comprises a responsive sidebar for navigation, a top header for profile details, and a central content area displaying the dashboard elements such as class slots and settings. 

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: [React Context or Redux as needed]

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Authentication System**: Develop the login page with JWT authentication, including routes for login, logout, and password reset.
3. **Develop Faculty Dashboard**: Build the dashboard UI with sidebar navigation and main content area displaying upcoming and active class slots.
4. **Implement Account Settings Module**: Create a settings page for faculty to update their profile and preferences.
5. **Design Database Schema**: Define the database models for institutions, faculty, class slots, and sessions, ensuring proper relationships.
6. **Integrate Backend**: Set up REST API or GraphQL endpoints for data fetching, ensuring secure access with middleware for authentication and authorization.
7. **Real-time Functionality**: Implement WebSockets or polling for real-time updates on class slots and notifications.
8. **Testing and Deployment**: Conduct thorough testing for functionality and responsiveness, followed by deployment instructions for the web application.

## USER EXPERIENCE
Key user interactions include smooth login and logout processes, intuitive navigation through the dashboard, and easy access to account settings. Faculty members will receive real-time updates about their classes, and the overall interface will provide a seamless experience across mobile, tablet, and desktop devices. The design emphasizes usability, ensuring that faculty can manage their tasks efficiently while enjoying a clean and professional aesthetic.