🍳 Chef's Menus - AI Recipe Generator https://img.shields.io/badge/Chef's-Menus-orange https://img.shields.io/badge/React-18.2-blue https://img.shields.io/badge/AI-Powered-green https://img.shields.io/badge/Deployed-Netlify-cyan

Live Demo: 🌐 https://chefs-menus.netlify.app

A smart web application that generates delicious recipes using AI based on ingredients you have on hand. Stop wondering "what can I cook?" - let AI be your personal chef!

🚀 Features ✨ Core Functionality AI-Powered Recipe Generation: Uses Mistral-7B AI model to create custom recipes

Ingredient Management: Add, remove, and manage your available ingredients

Smart Validation: Ensures quality inputs with real-time validation

Beautiful UI: Modern, responsive design with smooth animations

Instant Results: Get recipe suggestions in seconds

🎯 Smart Features Minimum 4 Ingredients: Ensures quality recipe generation

Real-time Counter: Shows how many more ingredients you need

Auto-scroll: Smooth navigation to recipe sections

Loading States: Animated spinner while AI works its magic

Markdown Support: Beautifully formatted recipe output

🛠 Tech Stack Frontend React 18 - Modern React with hooks

JavaScript ES6+ - Modern JavaScript features

CSS3 - Custom properties, gradients, animations

HTML5 - Semantic markup

AI & APIs Hugging Face Inference API - Mistral-7B model

Custom AI Prompt Engineering - Optimized for recipe generation

Deployment & Tools Netlify - Production deployment

Git - Version control

VS Code - Development environment

📁 Project Structure text my-app/ ├── public/ │ └── index.html ├── src/ │ ├── components/ │ │ ├── RecipePage.jsx # Main recipe generator component │ │ ├── ai.js # AI integration & API calls │ │ └── RecipeDisplay.jsx # Recipe display component
│ ├── App.js # Root component │ └── styles/ # CSS stylesheets ├── package.json └── netlify.toml 🎨 UI/UX Highlights Design System Color Palette: Orange gradient theme representing food & energy

Typography: Roboto Condensed for clean, modern readability

Spacing: Consistent spacing scale using CSS custom properties

Animations: Smooth transitions and micro-interactions

Responsive Design Mobile-First: Optimized for all device sizes

Flexible Layouts: Adapts to different screen dimensions

Touch-Friendly: Large buttons and touch targets

🔧 How It Works

1. Ingredient Input javascript // Users add ingredients they have ["chicken", "tomatoes", "garlic", "pasta"]
2. AI Processing javascript // System prompt guides AI behavior const SYSTEM_PROMPT = You are an assistant that receives a list of ingredients... Format your response in markdown...;
3. Recipe Generation javascript // AI generates structured recipes const response = await hf.chatCompletion({ model: "mistralai/Mistral-7B-Instruct-v0.2", messages: [...], max_tokens: 800 }); 🚀 Deployment Netlify Setup Continuous Deployment: Automatic deploys from Git

HTTPS: Secure connections

CDN: Global content delivery

Form Handling: Ready for future form integrations

Build Process bash npm run build

💡 Key Code Features State Management javascript const [ingredients, setIngredients] = React.useState([]) const [recipeShown, setRecipeShown] = React.useState('') const [isLoading, setIsLoading] = React.useState(false) AI Integration javascript export async function getRecipeFromAI(ingredientsArr) { const response = await hf.chatCompletion({ model: "mistralai/Mistral-7B-Instruct-v0.2", messages: [ { role: "system", content: SYSTEM_PROMPT }, { role: "user", content: I have ${ingredientsString}. Please give me a recipe! }, ], max_tokens: 800, }); return response.choices[0].message.content; } Smart UX Features Input Validation: Only letters and spaces allowed

Auto-focus: Smart form field management

Error Handling: User-friendly error messages

Loading States: Clear feedback during AI processing

🌟 What Makes This Special 🎯 Production-Ready Features Real Deployment: Not just localhost - live production app

Error Boundaries: Graceful error handling

Performance Optimized: Efficient re-renders and state updates

Accessibility: ARIA labels and keyboard navigation

🚀 Beyond Tutorial Code Client-Ready: Professional enough for real businesses

Scalable Architecture: Easy to extend and maintain

Business Value: Solves real user problems

📈 Performance Metrics Load Time: < 2 seconds

AI Response: < 30 seconds

Bundle Size: Optimized React build

Lighthouse Score: 90+ Performance

🔮 Future Enhancements Planned Features User accounts & saved recipes

Recipe categories (vegetarian, gluten-free, etc.)

Cooking timer integration

Nutrition information

Social sharing

Multi-language support

Technical Improvements Backend API for token security

Database integration

Caching system

PWA capabilities

👨‍💻 Developer Story Built by a self-taught developer transitioning from student to professional through:

79 days of consistent coding

14+ GitHub repositories

2 deployed production apps

Real client projects

AI integration mastery

🎯 Business Value This project demonstrates:

✅ Production Deployment - Real-world deployment skills

✅ AI Integration - Cutting-edge technology implementation

✅ Client Collaboration - Real business requirements

✅ Problem Solving - From idea to working product

✅ UX/UI Design - User-centered design thinking

📞 Support For questions or feedback: [email protected]

Live App: https://chefs-menus.netlify.app

GitHub: https://github/hddgpp

Built with ❤️ and 🍳 by a passionate developer.