Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
"What's Cookin'" is a web application designed to help users discover and share recipes based on selected ingredients. The app allows users to filter recipes, search for specific dishes, and interact with a community of cooking enthusiasts, providing a platform for culinary exploration and inspiration.

## CORE FEATURES
1. **Ingredient Filter**: Users can filter recipes by selecting one or more ingredients, allowing for tailored recipe suggestions based on what they have on hand.
2. **Search Functionality**: A search bar enables users to quickly find recipes by typing in keywords related to the dish or ingredients.
3. **Recipe Cards**: Each recipe is displayed in a card format, showcasing the title, a brief description, and an image. Users can click through to view detailed instructions and ingredients.
4. **User Submissions**: Users can submit their own recipes, adding to the community content while encouraging interaction and engagement.
5. **Favorites**: Users can save their favorite recipes to a personal favorites list for easy access later.
6. **Responsive Design**: The application will be optimized for both desktop and mobile devices, ensuring a seamless user experience across all platforms.

## 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 prominent hero section for search and filtering, followed by a grid of recipe cards below. The footer will provide additional links and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing global state (e.g., user favorites, submitted recipes)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and Tailwind CSS.
2. **Create the Layout**:
   - Implement the header with navigation links.
   - Design the hero section with a search bar and ingredient filter.
   - Create a grid layout for displaying recipe cards.
3. **Develop Core Features**:
   - Implement ingredient filtering logic.
   - Set up the search functionality to query recipes based on user input.
   - Develop the recipe card component, including dynamic data rendering.
4. **User Interaction**:
   - Allow users to submit their recipes through a form.
   - Enable users to save recipes to favorites using React Context API.
5. **Responsive Design**: Use Tailwind CSS utilities to ensure the application is responsive and looks good on all devices.
6. **Testing and Deployment**: Test the application across different browsers and devices, then deploy using a platform like Vercel or Netlify.

## USER EXPERIENCE
Users will first land on a visually appealing homepage featuring a prominent search bar and ingredient filter. They can easily find recipes by entering ingredients or keywords. Recipe cards will be displayed in a clean, organized manner, allowing users to browse at their leisure. The submission form will be intuitive, encouraging users to contribute their recipes. The favorites functionality will provide a personalized experience, making it easy for users to access their preferred recipes. The overall design will ensure that users enjoy a smooth and engaging cooking exploration journey.