Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to help users generate recipes based on the ingredients identified in a photograph taken of their refrigerator, pantry, or countertop. By leveraging a recipe database and a generative model, users can effortlessly receive tailored recipe suggestions with a focus on simplicity and usability.

## CORE FEATURES
1. **Image Recognition**: Utilizes AI to analyze uploaded photos and identify ingredients present.
2. **Recipe Generation**: Connects to a database to generate 3 relevant recipes based on identified ingredients, presenting them in an easy-to-navigate format.
3. **Recipe Cards**: Each recipe is displayed on a card that includes a representative image, title, serving sizes, ingredients with quantities, and preparation steps. Cards are clickable for expanded views.
4. **Save Recipe Functionality**: Users can save their favorite recipes with an option to add personal notes, storing this information in a user-specific database.
5. **User Recipe Library**: A dedicated section where users can view, edit, or delete their saved recipes for easy access and management.
6. **Minimalist User Interface**: Designed for ease of use, focusing on intuitive navigation and quick interactions, allowing users to perform tasks seamlessly.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a clean and airy feel, emphasizing white space to enhance readability and focus on content.
- **Color Mode**: Light theme using a minimal color palette with dark text on light backgrounds, ensuring high contrast and readability.
- **Layout**: 
  - Main screen featuring a prominent upload area for images at the top, followed by a grid layout for displaying recipe cards.
  - A sidebar or top navigation for accessing the user’s recipe library and settings.
- **Typography**: 
  - Primary font: Sans-serif for a modern and clean look.
  - Hierarchy: Larger font sizes for titles, medium for ingredient headings, and smaller for steps to create a clear visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to create a robust and scalable codebase.
- **Styling**: Tailwind CSS for rapid and responsive styling.
- **UI Components**: shadcn/ui for pre-designed components that align with the minimalist aesthetic.
- **State Management**: React Context or Zustand for managing global state, ensuring a smooth user experience.

## IMPLEMENTATION STEPS
1. **Set Up Project**:
   - Initialize a new React project with TypeScript and install dependencies (React, Tailwind CSS, shadcn/ui).
2. **Image Upload Component**:
   - Create a component for image upload, integrating an image recognition API to analyze the ingredients.
3. **Recipe Generation Logic**:
   - Develop a service that connects to the recipe database and generates recipes based on recognized ingredients.
4. **Recipe Card Component**:
   - Design and implement the recipe card component using Tailwind CSS, ensuring responsiveness for various screen sizes.
5. **Save Recipe Functionality**:
   - Implement functionality for users to save recipes in a local database and add personal notes.
6. **User Recipe Library**:
   - Create a dedicated section for users to access and manage their saved recipes, with options to edit or delete.
7. **Testing and Refinement**:
   - Conduct thorough testing of all components and flows, refining based on user feedback to ensure a seamless user experience.

## USER EXPERIENCE
The user journey begins with a simple interface inviting them to upload a photo. Once the image is processed, users are presented with three recipe cards. By clicking a card, they can view detailed instructions and ingredients. The save feature allows them to easily collect their favorite recipes, and they can manage their library through a dedicated section. The overall experience is designed to be intuitive, ensuring users can navigate easily and find inspiration in their cooking.