Live Demo on Vercel

The Smart Recipe Generator is a web-based AI-powered application that helps users create personalized recipes based on the ingredients they have on hand. By combining user inputs, dietary preferences, and cooking constraints, the app generates detailed recipes with step-by-step instructions, nutrition information, and ingredient lists.

This project demonstrates the integration of React frontend with Groq AI LLaMA model for dynamic recipe generation, creating a modern, interactive, and user-friendly culinary assistant.

• Ingredient Input: Users can enter available ingredients manually.
• Dietary Preferences: Supports Vegetarian, Vegan, Gluten-Free, Keto, or no preference.
• Cooking Filters: Specify number of servings, difficulty level, and maximum cooking time.
• AI-Powered Recipe Generation: Generates creative and structured recipes based on user input.
• Recipe Display: Cleanly formatted recipe cards showing title, ingredients, instructions, nutrition info, and metadata.
• Error Handling & Loading States: Validates input and shows loading indicators during AI processing.
• Mobile Responsive Design: Layout adapts to various screen sizes.
• Deployment: Live on Vercel, fully functional online.

1. User Input: Users enter ingredients and select filters (diet, servings, difficulty, cooking time).
2. API Request: The app sends a structured prompt to the Groq LLaMA API with all user preferences.
3. AI Recipe Generation: The AI generates recipes in JSON format, including:
   • Recipe title and description
   • Ingredients (name + quantity)
   • Instructions (step-by-step)
   • Nutrition info (calories, protein)
   • Metadata (servings, difficulty, cooking time)
4. Recipe Display: Recipes are parsed and displayed dynamically in RecipeDisplay.jsx.
5. Error Handling: If the API fails or returns invalid output, the app shows a clear error message.

• React.js – Frontend framework for component-based UI
• Groq LLaMA API – AI for recipe generation
• Vite – Modern frontend build tool
• CSS / Flexbox / Grid – Styling and responsive design
• Vercel – Live deployment

• Designed modular React components for input and display.
• Used state management in App.jsx to track recipes, loading, and errors.
• Integrated Groq API to generate recipes dynamically, parsing structured JSON for frontend rendering.
• Implemented filters and dietary preferences for personalized recipe recommendations.
• Added loading indicators and error messages for better UX.
• Prepared the project for deployment on Vercel, using .env for API key security.

1. Clone the repository:

git clone https://github.com/your-username/smart-recipe-generator.git

2.Install dependencies:

npm install

3.Create a .env file and add your Groq API key:

VITE_GROQ_API_KEY=your_api_key_here

4.Start the development server:

npm run dev

5.Open your browser at http://localhost:5173 and start generating recipes! Or try it live: https://unthinkable-task-five.vercel.app/

• Image-based ingredient recognition to automatically detect ingredients from uploaded photos.
• Substitution suggestions for unavailable ingredients.
• Offline recipe database for fallback if AI API fails.
• Enhanced mobile UX, including collapsible recipe cards and toast notifications.
• Expanded nutrition information for more detailed dietary guidance.