Vibe-Coding Project: Budget Meal Prep App 🍳

A full-stack React.js application that helps users plan budget-friendly meals based on ingredients they have in their fridge. The app suggests recipes that match available ingredients and provides alternatives that require minimal additional purchases.

✨ Features

🔐 User Authentication

• Secure user registration and login
• JWT-based authentication
• Password hashing
• User-specific data storage

🥗 Dietary Preferences

• Select dietary restrictions during registration
• Options include: Vegetarian, Vegan, Gluten-Free, Dairy-Free, Nut-Free, Pescatarian, Keto, Paleo
• Recipes automatically filtered based on preferences

📸 Smart Ingredient Detection

• Fridge Photo Recognition: Take a photo of your fridge and automatically detect ingredients
• Supported by Google Cloud Vision API for advanced recognition
• Smart fallback system that always works
• Detects items like milk, cream, vegetable broth, and more

🍽️ Recipe Matching

• Perfect Matches: Recipes you can make with current ingredients
• Suggestions: Recipes requiring minimal additional purchases
• Intelligent ingredient matching with fuzzy logic
• Match percentage displayed for each recipe

⭐ Recipe Bookmarks

• Save your favorite recipes
• Access bookmarked recipes anytime
• Dedicated bookmarks page

📝 Shopping Lists

• Select multiple recipes to generate shopping lists
• Interactive checklist with checkboxes
• Add custom items manually
• Items automatically move to "Completed" when checked
• Delete items or entire lists

💾 Data Persistence

• Ingredients and search results saved automatically
• Data persists across page refreshes
• User-specific storage

🖼️ Recipe Images

• Beautiful recipe images from Unsplash

• Responsive image display

• Enhanced visual experience

• 

🚀 Tech Stack

Frontend

• React 18 with TypeScript
• React Router for navigation
• Axios for API calls
• CSS3 for styling

Backend

• Node.js with Express
• SQLite database
• JWT authentication
• bcryptjs for password hashing
• Google Cloud Vision API (optional) for image recognition

📦 Installation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Setup Steps

1. Clone the repository

   git clone <your-repo-url>
   cd VibeCoding

2. Install dependencies

   npm run install-all

   This installs both root and client dependencies.

3. Set up environment variables

   Create a .env file in the root directory:

   PORT=5000
   JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
   
   # Optional: Google Cloud Vision API (for better image recognition)
   GOOGLE_CLOUD_API_KEY=your-google-cloud-api-key-here
   # OR use service account:
   # GOOGLE_APPLICATION_CREDENTIALS=path/to/service-account-key.json

4. Start the development servers

   npm run dev

   This starts:

   • Backend server on http://localhost:5000
   • React frontend on http://localhost:3000

   Or start them separately:

   # Terminal 1 - Backend
   npm run server
   
   # Terminal 2 - Frontend
   npm run client

📁 Project Structure

budget-meal-prep-app/
├── client/                 # React frontend
│   ├── src/
│   │   ├── pages/         # Page components
│   │   │   ├── Login.tsx
│   │   │   ├── Register.tsx
│   │   │   ├── Dashboard.tsx
│   │   │   ├── Bookmarks.tsx
│   │   │   └── ShoppingList.tsx
│   │   ├── context/       # React Context
│   │   │   └── AuthContext.tsx
│   │   ├── services/       # API service functions
│   │   │   └── api.ts
│   │   └── App.tsx        # Main app component
│   └── package.json
├── server/                 # Express backend
│   ├── routes/            # API routes
│   │   ├── auth.js
│   │   ├── recipes.js
│   │   ├── users.js
│   │   ├── bookmarks.js
│   │   ├── shoppingList.js
│   │   └── imageRecognition.js
│   ├── database/          # Database setup
│   │   └── db.js
│   ├── middleware/        # Auth middleware
│   │   └── auth.js
│   └── index.js           # Server entry point
├── package.json
└── README.md

🔌 API Endpoints

Authentication

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Login user

Recipes

• POST /api/recipes/suggest - Get recipe suggestions based on ingredients (requires auth)
• GET /api/recipes/all - Get all recipes (requires auth)

Users

• GET /api/users/me - Get current user info (requires auth)
• PUT /api/users/dietary-restrictions - Update dietary restrictions (requires auth)

Bookmarks

• GET /api/bookmarks - Get user's bookmarked recipes
• POST /api/bookmarks/:recipeId - Add bookmark
• DELETE /api/bookmarks/:recipeId - Remove bookmark
• GET /api/bookmarks/check/:recipeId - Check if recipe is bookmarked

Shopping Lists

• GET /api/shopping-list - Get user's shopping lists
• GET /api/shopping-list/:listId - Get specific shopping list with items
• POST /api/shopping-list/create - Create shopping list from recipes
• PUT /api/shopping-list/:listId/items/:itemId - Toggle item checked status
• POST /api/shopping-list/:listId/items - Add item to list
• DELETE /api/shopping-list/:listId/items/:itemId - Delete item
• DELETE /api/shopping-list/:listId - Delete shopping list

Image Recognition

• POST /api/image/recognize - Recognize ingredients from fridge photo (requires auth)

🛠️ Development

Available Scripts

# Install all dependencies
npm run install-all

# Start both servers (development)
npm run dev

# Start backend only
npm run server

# Start frontend only
npm run client

# Setup environment
npm run setup

📝 License

ISC

👤 AI Assistance

Cursor - Rohini A.

Created as a full-stack meal planning application.

🙏 Acknowledgments

• Recipe images from Unsplash
• Google Cloud Vision API for image recognition
• React and Express communities

---

Happy Cooking! 🍳✨