Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The hotel booking app is a web application designed to streamline the process of finding and booking available properties for users. It includes an admin dashboard that allows property management and booking oversight, ensuring a seamless experience for both users and administrators.

## CORE FEATURES
1. **User Registration & Authentication**: Users can create accounts and log in securely to manage their bookings and preferences.
2. **Property Listings**: Users can browse through available properties with detailed descriptions, images, prices, and availability.
3. **Booking System**: Users can select their desired property, choose booking dates, and complete transactions directly through the app.
4. **Admin Dashboard**: Administrators can manage property listings, edit details, monitor bookings, and view user activity.
5. **Search & Filter Options**: Users can search for properties based on location, price range, and amenities to find their ideal stay.
6. **User Reviews & Ratings**: Users can leave feedback on their experiences, helping others make informed decisions about their bookings.

## DESIGN SPECIFICATIONS
- **Visual Style**: The app will embrace a minimalist aesthetic with a clean, simple design that utilizes ample white space to enhance readability and focus on content.
- **Color Mode**: A light theme will be employed, featuring dark text on light backgrounds for optimal contrast and legibility.
- **Layout**: The main layout will consist of a top navigation bar, a sidebar for the admin dashboard, and a responsive grid layout for property listings. Each property card will include an image, title, brief description, and pricing details.
- **Typography**: Use a sans-serif font (e.g., Helvetica or Arial) for a modern feel, with headings in bold for emphasis and body text at a comfortable size for reading. Ensure a clear hierarchy with larger fonts for titles and smaller sizes for descriptions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust and type-safe development.
- **Styling**: Tailwind CSS for utility-first styling, ensuring a responsive and adaptable UI.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design.
- **State Management**: Use React’s Context API or Zustand for managing global state as needed.

## IMPLEMENTATION STEPS
1. **Set Up the Development Environment**: Initialize the project with Create React App using TypeScript and install necessary dependencies, including Tailwind CSS and shadcn/ui.
2. **Design the User Interface**: Create components for the header, property cards, booking forms, and admin dashboard using Tailwind CSS for styling.
3. **Implement User Authentication**: Set up user registration and login functionality using Supabase for backend authentication.
4. **Create Property Management Features**: Develop CRUD (Create, Read, Update, Delete) functionalities for property listings within the admin dashboard.
5. **Build the Booking System**: Implement the booking logic, allowing users to select dates and confirm their reservations while integrating with Supabase for data storage.
6. **Test User Flows**: Conduct thorough testing of user interactions, ensuring a smooth experience from property browsing to booking confirmation.

## USER EXPERIENCE
Users will navigate the app through a straightforward interface that emphasizes ease of use. Upon landing on the homepage, they will see a search bar at the top, followed by a grid of property listings. Clicking on a property will take them to a detail page where they can view more information and proceed with booking. Admin users will have access to a sidebar that allows them to manage properties and bookings efficiently. The responsive design will ensure that the app is usable on various devices, enhancing accessibility for all users.