Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a scheduling tool that allows users to manage appointments in a calendar format, categorized by the profiles of directors and doctors. The aim is to provide an intuitive interface for organizing appointments efficiently while maintaining a clean and simple aesthetic.

## CORE FEATURES
1. **User Authentication**: Secure login and registration for directors and doctors to access their respective appointment schedules.
2. **Profile Management**: Ability for users to create and manage their profiles, including personal information and preferences.
3. **Calendar View**: A dynamic calendar interface that displays appointments grouped by director and doctor, allowing users to easily navigate through dates and schedules.
4. **Appointment Creation**: Functionality to add, edit, and delete appointments, with options for setting reminders and notifications.
5. **Search and Filter**: Tools to search for specific appointments or filter by date, director, or doctor for streamlined management.
6. **Responsive Design**: A mobile-friendly layout that ensures usability across various devices, allowing users to manage appointments on the go.

## 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 will feature a top navigation bar with profile access, a sidebar for filters, and a central calendar area displaying appointments. The calendar will be responsive, adapting to different screen sizes.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for consistent design and UI elements.
- **State Management**: React Context API or Zustand for managing user session and appointments.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Authentication Flow**: Implement user authentication using Firebase or Auth0 to manage director and doctor logins.
3. **Develop Profile Management**: Create components for users to manage their profiles, including forms for editing information.
4. **Build Calendar Component**: Design the calendar view using a library like React Big Calendar or a custom implementation, ensuring it supports appointment grouping.
5. **Implement Appointment Functions**: Develop functionalities for adding, editing, and deleting appointments with proper validation and notifications.
6. **Integrate Search and Filter**: Create search and filter components that interact with the calendar to display relevant appointments based on user inputs.
7. **Ensure Responsiveness**: Use Tailwind CSS to ensure that the layout is fully responsive, adjusting elements for different screen sizes.
8. **Testing and Optimization**: Conduct thorough testing for usability, performance, and responsiveness, optimizing as necessary.

## USER EXPERIENCE
Users will begin by logging into their accounts, which will redirect them to their personalized calendar. They can easily view their appointments, add new ones through a simple form, and use filters to find specific entries. Notifications for upcoming appointments will enhance their experience, ensuring they stay informed. The minimalist design will make navigation intuitive and straightforward, focusing on functionality without unnecessary distractions.