Grub Gallery

Personalized dishes and recipes with the click of a button!
View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Contributing
5. Contact
6. Acknowledgments

About The Project: Grub Gallery

Grub Gallery is a dynamic web application built using the MERN (MongoDB, Express.js, React, Node.js) stack, integrating Google OAuth, Spoonacular API, and Google Calendar API. This project allows users to discover and personalize dishes and recipes effortlessly.

Project demo: https://www.youtube.com/watch?v=HiiPeKkUXfM

(back to top)

Built With

(back to top)

Getting Started

This is an example of how you can set up the project locally. To get a local copy up and running follow these simple steps.

Prerequisites

Please ensure that the following software is installed before cloning the repository:

• npm (you can check the version of node you are running with the command node -v)

  npm install npm@latest -g

• Google Cloud Console (please follow these steps from Google to initialize your project and obtain a client ID and API_KEY)
• Firebase (please follow these steps from Firebase to setup OAuth 2.0 and obtain a firebaseConfig object)
• MongoDB (please follow these steps from MongoDB to set up your cluster and obtain your cluster URI)
• Spoonacular (please follow these steps from Spoonacular API to obtain your Spoonacular API_KEY)

Installation

To install and run locally, please complete the following steps:

1. Ensure that your have followed all of the steps from prerequisites
2. Clone the repo

   git clone https://github.com/MatthewHilliard/Grub-Gallery.git

3. Create a .env file in the client directory (paste the following information, filling in the keys from above)

    ################ Frontend environment variables ################
    # used for Google Calendar API (gapi service)
    VITE_GAPI_KEY=obtain_gapi_key_from_Google_Cloud_console
    VITE_GOOGLE_CLIENT_ID=obtain_client_id_key_from_Google_Cloud_console
    # leave scopes unchanged (not secret, but good practice to store here)
    VITE_SCOPE=https://www.googleapis.com/auth/calendar
   
    # Firebase config keys
    VITE_FIREBASE_API_KEY=obtain_from_firebaseConfig
    VITE_FIREBASE_AUTH_DOMAIN=obtain_from_firebaseConfig
    VITE_FIREBASE_PROJECT_ID=obtain_from_firebaseConfig
    VITE_FIREBASE_STORAGE_BUCKET=obtain_from_firebaseConfig
    VITE_FIREBASE_MESSAGING_SENDER_ID=obtain_from_firebaseConfig
    VITE_FIREBASE_APP_ID=obtain_from_firebaseConfig
    VITE_FIREBASE_MEASUREMENT_ID=obtain_from_firebaseConfig

4. Create a .env file in the server directory (paste the following information, filling in the keys from above)

    ################ Backend environment variables ################
    PORT=prefered_port                        # typically 3000
    MONGODB_URI=mongodb_uri_goes_here
    SPOONACULAR_KEY=spoonacular_api_key_goes_here

5. Install NPM packages (will install packages in root, client, and server directories)

   cd Grub-Gallery
   npm run install-all

6. Run the application

   cd Grub-Gallery/server
   npm start

(back to top)

Roadmap

Backend Development

• Edit users SCHEMA in the backend
  • User information fields: name (str), age (number), username/id (str), diet (list of strings), favorites (list of recipes), history (list of recipes)
• User OAuth implementation in frontend
  • Connect frontend to backend
  • Profile picture placement and save functionality
  • Design improvements for signed-in users
• Setup endpoint for /searchMeal
  • Create search bar in the frontend
  • Make API call in the backend
  • Potential addition of filters in the future
• React routing
• Connect backend endpoints to frontend for add/remove favorites and history
• Abstract Google login into a backend API call (for security purposes)
• Fix users addFavorite --> prevent duplicates

Frontend Development

• Move profile picture to the top right
• Create a separate page for a user already signed in (Unsure if needed yet)
• Hamburger dropdown
  • Favorites
  • History
• Create default image for recipes missing image URLs

UI/UX Design

• Design the recipes page for browsing meals and the search function
  • Convert into a component
• Create a favorites page
  • Styling
  • Connect backend endpoints to frontend for add/remove favorites
  • Use localStorage in SearchResults and BrowseMeals to maintain the list of dishes on page refresh

Functionality Improvements

• Add support for npm i and npm start in code and backend directories respectively (use concurrently)
• Create addFavorite function (separate file)
• Add UI polish for add/remove favorite (use a star PNG)
• Immediately call listFavorites (refactored) after adding/removing a favorite
• Refactor listFavorites to turn it into a separate function to grab the list of favorites from the backend

Bug Fixes

• Fix the search-meals bug (automatically re-load when BrowseMealsList changes)
• Remove from favorites
• Add an undo button for favorites

Documentation and Maintenance

• Add API keys to the .env file
• Update GitHub README

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Contact

• Matthew Hilliard - [email protected]
• William De Rocco - [email protected]
• Brinja Vogler - [email protected]
• Mensun Wang - [email protected]
• Sean Fung - [email protected]

Project Link: https://github.com/MatthewHilliard/Grub-Gallery

(back to top)

Acknowledgments

Here are some extremely helpful resources if you are interested in working on this project, or a similar project!

• React Google Authentication - PedroTech
• MERN Stack Tutorial - PedroTech
• Google Docs API Tutorial - Cooper Codes
• Tailwind CSS Docs
• Vite-React Docs

(back to top)