Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
BelaSync is a comprehensive SaaS platform designed for beauty salons, providing intelligent scheduling optimized for mobile use. The application aims to streamline appointment management for salon owners, employees, and clients, ensuring a luxurious and user-friendly experience.

## CORE FEATURES
1. **User Authentication**: Secure login for salon owners, employees, and clients with options for email/password and Google login. Includes a tutorial for first-time users.
2. **Dashboard for Admins**: A comprehensive overview of daily appointments, employee performance, and revenue metrics, with real-time notifications and reporting functionalities.
3. **Employee Management**: Admins can manage staff schedules, service offerings, and view employee evaluations, ensuring effective resource allocation.
4. **Client Scheduling**: Clients can easily book, cancel, or reschedule appointments through a step-by-step interface that enhances user experience.
5. **Internal Chat System**: A messaging feature that allows direct communication between clients and salon staff, improving customer service.
6. **Real-time Notifications**: Push notifications for appointment confirmations, reminders, and chat messages, keeping all users informed instantly.

## 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 vertical layout with a sidebar for navigation, a main content area for dashboards, and pop-ups/modal dialogs for interactions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or React Context API as needed for managing global state.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Add Tailwind CSS for styling, shadcn/ui for UI components, and any necessary libraries for routing and state management.
3. **Design Layout**: Create the main layout structure, including the sidebar and main content area using Tailwind CSS for styling.
4. **Develop Authentication Flow**: Implement user authentication using Supabase, including login, registration, and password recovery features.
5. **Build Dashboards**: Create separate dashboards for admins and employees, integrating real-time data updates and visual representations (charts, tables).
6. **Implement Scheduling System**: Develop the client scheduling feature with a step-by-step interface, ensuring an intuitive user experience.
7. **Integrate Chat Functionality**: Build the internal chat system for communication between clients and salon staff.
8. **Setup Notifications**: Implement push notifications using Supabase Edge Functions for real-time updates.
9. **Test and Optimize**: Ensure the application is responsive, performs well on mobile devices, and meets all accessibility standards.
10. **Deploy**: Deploy the application using Vercel, ensuring proper configurations for production.

## USER EXPERIENCE
Users will experience a seamless onboarding process with an interactive tutorial. The minimalist design will focus on ease of use, allowing users to navigate the app intuitively. Key interactions such as scheduling appointments and communicating with staff will be straightforward, enhancing overall satisfaction and engagement with the platform.