Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a smart meal planner and shopping assistant that helps users create categorized shopping lists for meal preparation. It allows users to input dietary preferences, budget, and number of people, generating a comprehensive grocery list, meal plan, and shopping tips to optimize their spending and reduce waste.

## CORE FEATURES
1. **User Input Form**: A simple interface for users to enter the number of people, days, budget, and dietary restrictions/preferences.
2. **Categorized Grocery List**: Automatically generates a grocery list categorized by Produce, Meat, Dairy, Pantry, etc., with estimated quantities to minimize waste.
3. **Meal Planning**: Provides a brief meal plan using the generated grocery list, ensuring efficient use of ingredients across multiple meals.
4. **Bulk Buying Tips**: Offers recommendations on which items are best purchased in bulk based on the user’s meal plan and budget.
5. **Responsive Design**: Ensures the application is usable on various devices, maintaining usability and aesthetic appeal across screen sizes.

## 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 main layout will consist of a header with the app title, a user input form section, a results section for the grocery list and meal plan, and a tips section. Each section will be clearly separated with ample white space for clarity.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Context API or Zustand for managing global state.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS, shadcn/ui, and any necessary dependencies.
2. **Create User Input Form**: Develop a form component to capture user inputs for number of people, days, budget, and dietary restrictions.
3. **Implement Grocery List Logic**: Write functions to calculate the grocery list and quantities based on user inputs and dietary preferences.
4. **Meal Planning Functionality**: Integrate meal planning logic that utilizes the grocery list to create an efficient meal plan.
5. **Add Bulk Buying Tips**: Create a component that generates and displays tips on bulk purchasing based on the shopping list.
6. **Design and Style Components**: Use Tailwind CSS to style components according to the minimalist design specifications outlined, ensuring responsive design.
7. **Testing and Debugging**: Test the application thoroughly for user experience, functionality, and responsiveness across devices.
8. **Deployment**: Prepare the application for deployment on a suitable hosting platform, ensuring all build steps are correctly configured.

## USER EXPERIENCE
Users will start by filling out a simple form with their meal planning needs. Upon submission, they will be presented with a categorized grocery list, a meal plan that optimally uses the ingredients, and helpful tips for bulk buying. The clean and minimalist design will enhance usability, making it easy for users to navigate and understand their meal planning and shopping options. The application will provide an engaging, efficient, and supportive environment for smart meal planning.