PantryPal

PantryPal is a pantry management application built with React, Next.js, Firebase, Material UI, and CSS. It helps users efficiently manage their pantry inventory and shopping lists with real-time data synchronization, providing an intuitive and responsive user experience.

Features

• Responsive Interface: Developed using Material UI and Next.js for a seamless user interface.
• Real-Time Data Sync: Integrated with Firebase to synchronize inventory and shopping list updates in real time.
• Dynamic Inventory Updates: Automatically updates the inventory as items are added or removed.
• Grocery List Generation: Allows users to generate grocery lists based on their pantry items.

Tech Stack

• Frontend: React, Next.js, Material UI, CSS
• Backend: Firebase (Real-time Database)
• Hosting: Vercel

Getting Started

This project is bootstrapped with Next.js and can be run locally or deployed on a platform like Vercel.

Prerequisites

Ensure you have Node.js and npm installed on your machine. If not, you can download and install them from Node.js.

Setup

1. Clone the repository to your local machine:

   git clone https://github.com/aisha1021/PantryPal.git
   cd PantryPal

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

   This will start the app locally. Open http://localhost:3000 in your browser to view the app.

Firebase Setup

To use Firebase in the app, follow these steps:

1. Create a project in the Firebase Console.
2. Add Firebase to your web app and copy the Firebase config object.
3. Replace the Firebase config in your app with the credentials from your Firebase console.

Environment Variables

Ensure you add the necessary environment variables (.env.local) for your Firebase project credentials to enable real-time data sync.

Learn More

To learn more about the technologies used in this project, take a look at the following resources:

• Next.js Documentation - Learn about Next.js features and API.
• Material UI Documentation - Explore Material UI components and usage.
• Firebase Documentation - Understand Firebase features for web applications.

You can also explore the Next.js GitHub repository.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

For more information, visit the Next.js deployment documentation.