Recipe Finder 🍳

A React + Vite app for AI-powered recipe discovery and personalized recipe collections.

🔗 Live Demo: https://recipe-finder-gamma-ten.vercel.app

Topics: recipes · react · vite · firebase · openai · gpt-4 · ai · food · vercel · image-recognition

An intelligent recipe discovery app that uses AI to analyze food images and generate personalized recipes. Upload a photo of any dish or explore trending recipes to get detailed cooking instructions tailored to your dietary preferences.

🎯 Problem Statement

Many people face the challenge of cooking for multiple household members with varying dietary restrictions and preferences. Home cooks often struggle to create meals that accommodate everyone's needs while working within their own cooking skill limitations. Recipe Finder addresses this problem by providing an intelligent solution that generates personalized recipes based on visual inputs and customizable dietary filters, making it easy for anyone to cook delicious meals that satisfy everyone at the table.

📋 Table of Contents

• ✨ Features
  • 🎯 Core Functionality
  • 🔧 Dietary Customization
  • 👤 User Management
  • 📚 Recipe Organization
  • 🎨 User Experience
  • 🔄 Smart Features
• 🚀 Getting Started
  • Prerequisites
  • Installation
  • Configuration
• 🏗️ Architecture
  • Tech Stack
  • Project Structure
  • Key Features Implementation
• 🎮 Usage
• 🔧 Configuration
  • Firebase Setup
  • OpenAI Integration
• 🚀 Deployment
  • Build for Production
  • Deploy to Vercel/Netlify
• 🤝 Contributing
• 📝 License
• 🙋‍♂️ Support
• 🎯 Future Enhancements

✨ Features

🎯 Core Functionality

• AI-Powered Recipe Generation: Upload an image of any dish and get detailed recipes generated by OpenAI's GPT-4
• Image Analysis: Advanced computer vision to identify ingredients and cooking methods from photos
• Trending Recipes Carousel: Discover popular recipes with auto-cycling display and manual navigation
• Interactive Recipe Cards: Click on trending recipes to get AI-generated cooking instructions

🔧 Dietary Customization

• Smart Filters: Vegetarian, Vegan, Gluten-Free options with custom filter support
• Personalized Results: Recipes adapted to your specific dietary restrictions and preferences
• Filter Memory: Your preferences are remembered across sessions

👤 User Management

• Google Authentication: Secure sign-in with Google accounts via Firebase Auth
• User Profiles: Customizable profiles with Google profile picture integration
• Profile Management: Add bio, cooking utensils, and personal information
• Secure Sign-out: Complete data clearing on logout

📚 Recipe Organization

• Recent Recipes: Automatic tracking of your last 3 generated recipes
• Saved Recipes: Heart/favorite system to save recipes for later
• Recipe History: Browse through your cooking journey
• Duplicate Prevention: Smart detection to avoid saving identical recipes

🎨 User Experience

• Drag & Drop Upload: Intuitive file upload with visual feedback
• Loading Animations: Engaging loading screens with cooking tips
• Responsive Design: Works seamlessly across desktop and mobile devices
• Error Handling: Graceful fallbacks and user-friendly error messages
• Recipe Sharing: Share your favorite recipes with others

🔄 Smart Features

• Similar Recipe Detection: Finds existing recipes that match your filters before generating new ones
• Recipe Deduplication: Prevents duplicate entries in your saved and recent recipes
• Automatic Image Optimization: Handles various image formats and sizes
• Context Preservation: Maintains state across page navigation

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm
• OpenAI API key
• Firebase project (for authentication)

Installation

1. Clone the repository

   git clone https://github.com/bmidd0170-sys/Recipe-Finder.git
   cd "Recipe Finder"

2. Install dependencies

   npm install

3. Set up environment variables Create a .env file in the root directory:

   VITE_OPENAI_API_KEY=your_openai_api_key_here
   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
   VITE_FIREBASE_PROJECT_ID=your_firebase_project_id

4. Configure Firebase

   • Create a Firebase project at https://console.firebase.google.com
   • Enable Authentication with Google provider
   • Add your domain to authorized domains
   • Update the Firebase config in src/config/firebase.js

5. Run the application

   npm run dev

🏗️ Architecture

Tech Stack

• Frontend: React 18 with Vite
• Routing: React Router v6
• State Management: React Context API
• Authentication: Firebase Auth
• AI Integration: OpenAI GPT-4 Vision API
• HTTP Client: Fetch API with React Query
• Styling: CSS3 with custom properties
• Build Tool: Vite

Project Structure

src/
├── components/          # Reusable UI components
│   ├── TrendingCarousel.jsx
│   ├── LoadingScreen.jsx
│   ├── ProfileContext.jsx
│   └── ...
├── Context/            # React Context providers
│   ├── AuthContext.jsx
│   ├── RecipeSaves.jsx
│   └── RecentRecipesContext.jsx
├── pages/              # Main page components
│   ├── MainPage.jsx
│   ├── Profile.jsx
│   ├── ResultsPage.jsx
│   └── ...
├── hook/               # Custom React hooks
│   └── useGenerateRecipe.js
├── data/               # Mock data and constants
│   └── mockData.js
├── config/             # Configuration files
│   └── firebase.js
└── utils/              # Utility functions

Key Features Implementation

AI Recipe Generation

• Uses OpenAI's GPT-4 Vision model for image analysis
• Converts images to base64 for API transmission
• Implements retry logic and error handling
• Optimizes prompts for cooking-specific responses

State Management

• Context API for global state (auth, recipes, profile)
• Local storage for data persistence
• Automatic cleanup on sign-out
• State synchronization across components

Authentication Flow

• Firebase Google OAuth integration
• Protected routes for authenticated features
• Automatic profile creation from Google account
• Secure token management

🎮 Usage

1. Upload a Recipe Image

   • Drag and drop or click to select an image
   • Apply dietary filters if needed
   • Wait for AI analysis and recipe generation

2. Explore Trending Recipes

   • Browse the auto-cycling carousel
   • Click on any trending recipe for instant AI-generated instructions
   • View detailed ingredients and cooking steps

3. Manage Your Recipes

   • Save favorite recipes with the heart icon
   • View recent recipe history in your profile
   • Organize and revisit your cooking discoveries

4. Customize Your Profile

   • Sign in with Google for personalized experience
   • Add profile information and cooking preferences
   • Upload custom profile pictures

🔧 Configuration

Firebase Setup

Update src/config/firebase.js with your Firebase project configuration:

const firebaseConfig = {
	apiKey: "your-api-key",
	authDomain: "your-auth-domain",
	projectId: "your-project-id",
	// ... other config
};

OpenAI Integration

The app uses OpenAI's GPT-4 Vision API. Ensure your API key has access to:

• GPT-4 Vision model
• Sufficient usage quotas
• Proper rate limiting setup

🚀 Deployment

Build for Production

npm run build

Deploy to Vercel/Netlify

1. Connect your repository
2. Set environment variables in the deployment platform
3. Configure build settings (build command: npm run build, output directory: dist)

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Support

If you have any questions or run into issues:

• Create an issue in this repository
• Check the documentation above
• Review the code comments for implementation details

🎯 Future Enhancements

• Recipe rating and review system
• Social sharing capabilities
• Advanced dietary restriction support
• Recipe video generation
• Cooking time estimation
• Nutritional information display
• Recipe scaling (serving size adjustment)
• Shopping list generation
• Ai Video follow along
• Chatbot that helps awnser anyquestions and helps modify the recipe

---

Built with ❤️ using React, OpenAI, and Firebase