You are an expert full-stack SaaS product architect, UI/UX designer, and Lovable.dev AI website developer.
Generated Prompt
## APPLICATION OVERVIEW The Faculty Management Portal is a comprehensive web application designed to provide a dedicated platform for faculty members to manage their schedules, classes, and communication within educational institutions. It features a modern, responsive design that emphasizes user experience and functionality, ensuring that faculty can efficiently track their teaching activities and manage their accounts. ## CORE FEATURES 1. **Faculty Authentication**: Secure login using email/phone and password, including JWT/session-based authentication, password reset options, and institution-based access control. 2. **Faculty Dashboard**: A modern dashboard showcasing an overview of classes, schedules, and analytics, complete with a clean UI and responsive design. 3. **Schedule Management**: A dedicated page for managing class schedules, displaying detailed timetable views, and allowing real-time updates on class status. 4. **Live Class Tracking**: Real-time tracking of class sessions with start/stop timers, attendance tracking, and analytics for performance evaluation. 5. **Account Settings**: A comprehensive settings section for profile updates, password changes, notification preferences, and theme settings. 6. **Analytics and Reporting**: Insights into teaching activities, attendance stats, and performance metrics presented through visually engaging charts. ## 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 includes a sidebar navigation for easy access to features, a top navigation/header for notifications and profile access, and a main content area displaying analytics, schedules, and class details. ## TECHNICAL REQUIREMENTS - Framework: React with TypeScript - Styling: Tailwind CSS - UI Components: shadcn/ui - State Management: Redux for state management, if needed for complex interactions. ## IMPLEMENTATION STEPS 1. **Setup Project**: Initialize a new React project with TypeScript and configure Tailwind CSS for styling. 2. **Create Authentication System**: Implement faculty authentication with routes for login, password recovery, and secure session management. 3. **Design Dashboard Layout**: Build the dashboard layout with sidebar navigation and responsive components for displaying faculty information and schedules. 4. **Develop Schedule Management**: Create a schedule management page with the ability to view, create, and edit class slots, implementing real-time updates. 5. **Integrate Live Class Features**: Implement live tracking functionalities, including timers and status updates, ensuring data is persisted in the database. 6. **Build Account Settings Page**: Develop a settings page that allows faculty to update their profiles and manage notifications and preferences. 7. **Analytics and Reporting**: Create components to visualize teaching analytics and performance reports through charts and statistics. 8. **Testing and Deployment**: Conduct thorough testing for usability and performance, and prepare the application for deployment on a suitable platform. ## USER EXPERIENCE The user experience focuses on a smooth and intuitive interaction flow. Faculty members will log in to a clean dashboard, where they can quickly view their schedules and class statuses. Each action, such as starting a class or adjusting account settings, will be straightforward, with responsive feedback and visual cues guiding users through their tasks. Notifications and alerts will keep faculty informed about important updates, ensuring they stay connected with their institution's activities.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
