Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for a coffee shop that allows customers to locate their orders ready for pickup through a QR code system. The application will showcase a minimalist design, providing users with a seamless experience to view the status of their coffee preparation via time-lapse videos and step-by-step generation images.

## CORE FEATURES
1. **Order Tracking**: Customers can scan a QR code to receive real-time updates on their coffee order status, including preparation time and readiness notifications.
2. **Time-Lapse Video**: A feature that showcases the making of the coffee in a time-lapse video format, allowing users to see the process from start to finish.
3. **Step-by-Step Image Generation**: Visual representations of each stage of the coffee-making process, enhancing user engagement and anticipation.
4. **User Notifications**: Automated notifications sent to users when their coffee is ready for pickup, ensuring they are informed without needing to refresh the app.
5. **Simple Menu Display**: A clean and easy-to-navigate menu that showcases available coffee options and their descriptions.
6. **Contact Information**: Easy access to contact details for customer support or inquiries about orders.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will be clean and simple with ample white space, focusing on a streamlined user experience.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a modern aesthetic.
- **Layout**: A single-page layout featuring a hero section at the top, followed by the order tracking feature, time-lapse video display, step-by-step images, a simple menu, and a contact section at the bottom.
- **Typography**: Use clean and modern fonts such as 'Inter' for body text and 'Montserrat' for headings, ensuring a clear hierarchy and readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for a responsive and customizable design.
- **UI Components**: Utilize shadcn/ui for pre-built, accessible UI components.
- **State Management**: Context API or Zustand for managing order state and user notifications.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**:
   - Develop the hero section with a welcoming message and QR code scanner.
   - Implement the order tracking feature to display order status dynamically.
   - Create a video player component for the time-lapse video.
   - Design a step-by-step image component showcasing the coffee-making process.
   - Add a menu component that lists coffee options.
   - Include a contact section with necessary details.
3. **Integrate Backend**: Set up a backend service (e.g., Firebase or a REST API) to handle order data, notifications, and video storage.
4. **Implement State Management**: Use Context API or Zustand to manage the state of orders and notifications throughout the application.
5. **Testing**: Conduct thorough testing to ensure all features function correctly, including QR code scanning and real-time updates.
6. **Deployment**: Deploy the application using a platform like Vercel or Netlify for easy access and scalability.

## USER EXPERIENCE
Users will interact with the application by scanning a QR code to access their order status. Upon entering, they will immediately see their coffee order's preparation status and an engaging time-lapse video showing the making of their coffee. Each step in the process will be visually represented through images, creating an immersive experience. Users can navigate easily through the menu and contact support if needed, ensuring a smooth and enjoyable customer journey.