Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed to help users find recipes based on specific ingredients they have available. Users can input their ingredients, and the application will filter and display recipes that can be made with those ingredients, enhancing meal planning and reducing food waste.

## CORE FEATURES
1. **Ingredient Filter**: Users can input one or multiple ingredients to filter recipes that include those items.
2. **Recipe List Display**: A clean, organized layout to showcase filtered recipes, including titles, images, and brief descriptions.
3. **Recipe Details Page**: A detailed view for each recipe, including ingredients, instructions, cooking time, and nutritional information.
4. **User Favorites**: Users can save their favorite recipes for quick access later.
5. **Search Functionality**: A search bar to allow users to find recipes by keywords in addition to filtering by ingredients.
6. **Responsive Design**: Ensures the application is user-friendly across devices, from desktop to mobile.

## 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 feature a top navigation bar, a hero section for prompting users to enter ingredients, a results section to display recipes, 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 React Context API if preferred).

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Build the main components: Header, IngredientInput, RecipeList, RecipeCard, and RecipeDetail.
3. **Implement Routing**: Use React Router for navigation between the main page and recipe detail pages.
4. **Develop State Management**: Set up Redux (or Context API) to manage the state of user input, recipe data, and favorites.
5. **Connect to Recipe API**: Integrate an external API or create a mock API to fetch recipes based on user input.
6. **Style Components**: Use Tailwind CSS to apply the specified styles, ensuring responsiveness and adhering to the design specifications.
7. **Testing**: Implement unit tests for components and integration tests for user flows to ensure functionality.
8. **Deployment**: Deploy the application to a hosting service like Vercel or Netlify.

## USER EXPERIENCE
Users will land on a clean interface with a prominent input area where they can enter their available ingredients. As they type, the application will dynamically filter recipes based on their input. Each recipe card will present essential information, allowing users to click through for more details. Users can easily save their favorite recipes and access them later, and the responsive design guarantees a seamless experience across all devices.