Pantry Pal

Tired of having ingredients and not knowing what to make? Pantry Pal tracks your ingredients and uses AI to generate delicious recipes from what you have. Save money, reduce waste, and enjoy dinner!

Comment 2

Inspiration

Pantry Pal was inspired by the common problem of food waste and the challenge of meal planning with available ingredients. Many people buy groceries without a clear plan, leading to expired items and wasted money. We wanted to create a smart solution that helps users make the most of their pantry items while reducing food waste and saving money.

What it does

Pantry Pal is a smart pantry management web application that helps users track their food inventory and get AI-powered cooking suggestions. Users can:

  • Track Inventory: Add, edit, and remove food items with quantities and units
  • Smart Recipe Suggestions: Get personalized recipe recommendations based on available ingredients using Gemini AI
  • Meal Planning: Receive cooking advice and meal ideas from a virtual chef assistant
  • User Authentication: Secure login system using Auth0 for personalized experiences
  • Real-time Chat: Interactive AI chat interface that understands your pantry context The app provides a clean, intuitive interface where users can manage their pantry on the left side and chat with an AI assistant on the right side for instant cooking guidance.

How we built it

Frontend:

  • React with TypeScript for type-safe, component-based development
  • Vite for fast development and building
  • Auth0 for secure user authentication
  • Firebase Firestore for real-time data persistence
  • CSS Grid & Flexbox for responsive layouts
  • React Icons for consistent iconography

Backend:

  • Node.js with Express for API server
  • Google Gemini AI for intelligent recipe suggestions and cooking advice
  • CORS for cross-origin requests
  • Environment variables for secure API key management

Key Features:

  • Custom modals for adding/editing items with validation
  • Real-time chat interface with loading states
  • Responsive design that works on desktop and mobile
  • Error handling and user feedback systems

Challenges we ran into

Authentication Integration: Integrating Auth0 with Firebase required careful configuration and handling of different authentication states.

AI Model Compatibility: The initial Gemini API integration failed due to deprecated model names, requiring updates to use the current gemini-1.5-flash model.

Data Persistence: Setting up Firebase Firestore with proper security rules and handling the transition from local storage to cloud database.

Response Formatting: Ensuring AI responses were properly formatted with line breaks and readable structure in the chat interface.

Cross-Origin Requests: Configuring CORS properly to allow frontend-backend communication during development.

What we learned

AI API Integration: How to properly integrate and format responses from modern AI models like Gemini

Authentication Flows: Best practices for implementing secure user authentication with Auth0

Real-time Databases: Working with Firebase Firestore for real-time data synchronization

TypeScript Best Practices: Leveraging TypeScript for better code quality and developer experience

API Design: Creating RESTful APIs with proper error handling and response formatting

State Management: Managing complex application state with React hooks and custom hooks

What's next for Pantry Pal

Shopping Lists: Generate shopping lists based on planned recipes and current inventory

Recipe Favorites: Allow users to save and organize favorite recipes

Nutritional Information: Integrate nutritional data for better meal planning

Share this project:

Updates