Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application for a CRM (Customer Relationship Management) system specifically designed for urban mobility services. The application aims to streamline customer interactions, manage user data, and enhance communication between service providers and customers, thereby improving overall service efficiency and satisfaction.

## CORE FEATURES
1. **User Authentication**: Secure login and registration process for users, enabling personalized access to the CRM functionalities.
2. **Customer Management**: A dashboard to view, add, and edit customer profiles, including contact information, service history, and preferences.
3. **Service Tracking**: Real-time tracking of urban mobility services, allowing users to monitor service requests and completion statuses.
4. **Communication Tools**: Integrated messaging system to facilitate direct communication between customers and service providers.
5. **Analytics Dashboard**: Visual representation of key metrics, such as customer engagement, service usage, and performance analytics to assist in decision-making.
6. **Feedback System**: A mechanism for customers to provide feedback on services, which can be used to improve the overall user experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, focusing on functionality and clarity.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a modern look.
- **Layout**: A responsive grid layout that adapts to various screen sizes, featuring a top navigation bar, sidebar for quick access to features, and a main content area for detailed information.
- **Typography**: Use modern sans-serif fonts such as "Roboto" or "Open Sans" for body text, with larger headings for clear hierarchy, ensuring a clean and professional appearance.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and type-safe development experience.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid UI development.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design.
- **State Management**: Implement React Context API for managing state across the application, ensuring a seamless user experience.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Authentication Module**: Build user registration and login components, integrating authentication logic.
3. **Develop Customer Management Dashboard**: Implement CRUD functionalities for customer profiles, including forms for data input and display components for list views.
4. **Integrate Service Tracking Feature**: Create real-time service tracking components that allow users to view active service requests.
5. **Build Communication Tools**: Develop a messaging system using WebSockets or similar technology to enable real-time communication.
6. **Create Analytics Dashboard**: Design visual charts and graphs to display analytics data, utilizing libraries like Chart.js or Recharts.
7. **Implement Feedback System**: Create a feedback form and integrate it with the customer management module for easy access.
8. **Testing and Deployment**: Conduct thorough testing for usability and performance, followed by deploying the application to a cloud platform.

## USER EXPERIENCE
The user experience focuses on intuitive navigation and seamless interaction. Users will easily navigate through the application using a top navigation bar and sidebar, allowing them to access different features quickly. The dashboard will provide a snapshot of essential metrics and updates, while detailed views will facilitate in-depth management of customer data and service requests. Responsive design ensures that users have a consistent experience across devices, optimizing usability whether on desktop or mobile.