Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web-based Smart Parking Reservation & Management System that allows users to find, reserve, and manage parking spaces efficiently. This application will provide a centralized platform for users, parking attendants, and administrators to interact seamlessly, enhancing the overall parking experience in busy areas.

## CORE FEATURES
1. **User Registration & Management**: Users can create accounts, manage profiles, and register multiple vehicles to streamline the parking reservation process.
2. **Parking Search & Filter**: Users can search for parking facilities based on location, distance, price, and availability, with results displayed on an interactive map.
3. **Reservation System**: Users can select a parking facility, choose a vehicle, and reserve a parking slot for a specified date and time while ensuring no double bookings occur.
4. **QR-Based Parking Pass**: After successful reservations and payments, users receive a unique QR code for seamless vehicle entry and exit management.
5. **Admin Dashboard**: Administrators can manage parking facilities, monitor occupancy, and generate reports on reservations, revenue, and system analytics.
6. **Parking Attendant Panel**: Attendants can log in to manage operations, verify QR codes, and update the status of parking slots in real-time.

## 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 layout will consist of a header with navigation, a main content area for features like search and reservation, and a footer with contact information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for UI components and styling.
3. **Create Folder Structure**: Organize components, pages, and styles into appropriate directories.
4. **Develop Core Components**: Build reusable components for navigation, buttons, forms, and cards using Tailwind CSS.
5. **Implement User Authentication**: Set up authentication flows for users, parking attendants, and administrators.
6. **Design Search & Filter Functionality**: Create a search bar and filtering options to allow users to find parking facilities easily.
7. **Integrate Map Functionality**: Use a mapping library (like Google Maps API) to display parking facilities visually on a map.
8. **Build Reservation Logic**: Implement the reservation workflow, ensuring slots are booked correctly and avoiding double bookings.
9. **QR Code Generation**: Integrate a QR code library to generate unique codes for reservations.
10. **Set Up Admin Dashboard**: Create an admin panel for managing parking facilities and monitoring system performance.
11. **Testing**: Thoroughly test the application for usability, functionality, and responsiveness across devices.
12. **Deployment**: Deploy the application using a platform like Vercel or Netlify.

## USER EXPERIENCE
Users will be greeted with a minimalist interface where they can search for parking options, view availability, and complete reservations effortlessly. The interactive map will provide a visual representation of nearby facilities, while the QR-based system simplifies the entry and exit process. Admins and attendants will have dedicated panels to manage operations and monitor real-time data, ensuring a smooth and efficient parking experience for all users.