Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a comprehensive web application designed for professional OBD-II workshop diagnostics, supporting vehicles from 2000 to 2026 and beyond. This platform aims to provide a user-friendly interface for automotive technicians to diagnose and manage vehicles efficiently, integrating diverse functionalities for vehicle diagnostics, management, and reporting.

## CORE FEATURES
1. **Login Screen**: Secure authentication for users with role-based access controls.
2. **Dashboard**: An intuitive overview displaying key metrics, recent diagnoses, and quick access to main features.
3. **Vehicle Auto Detect**: Automatically identifies the vehicle and retrieves necessary data for diagnostics.
4. **ECU Scan**: Comprehensive scanning of all electronic control units within the vehicle to identify issues.
5. **Live Data Monitoring**: Displays real-time data from various vehicle sensors, enhancing diagnostics capabilities.
6. **Report Generation**: Allows users to create detailed diagnostic reports that can be printed or saved as PDFs.

## 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**: A responsive grid layout that adapts to different screen sizes, featuring a sidebar for navigation and a main content area for diagnostics and tools.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux (if needed for complex state management)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Design Database Schema**: Create tables for Users, Vehicles, Diagnostics, and Reports using an SQL database.
3. **Develop Authentication**: Implement user login, registration, and role management.
4. **Build Core Features**:
   - Create the Dashboard component with key metrics display.
   - Implement Vehicle Auto Detect functionality using OBD-II protocols.
   - Develop ECU Scan and Live Data Monitoring features.
5. **Create UI Components**: Design reusable components for forms, buttons, and cards using Tailwind CSS.
6. **Integrate API Layer**: Set up backend services to handle communication with OBD-II devices and database interactions.
7. **Develop Report Generation**: Implement functionality to create and export diagnostic reports.
8. **Testing**: Conduct thorough unit and integration testing to ensure all features work as intended.
9. **Deployment**: Prepare the application for deployment on a cloud platform (e.g., AWS, Heroku).

## USER EXPERIENCE
The application will focus on seamless user interactions, where technicians can easily navigate through the dashboard, access vehicle diagnostics, and generate reports with minimal clicks. An intuitive layout and responsive design will ensure usability across devices, making it accessible for technicians in various workshop environments. Real-time data monitoring will provide immediate feedback during diagnostics, enhancing the overall efficiency and effectiveness of the tool.