Tech Stack

Table of Contents

1. Overview
   • OpenAI Integration
   • Cart Integration Via Kroger
   • User Preferences
   • Recipe Recommendation
   • Database via Neon
   • Landing Page
   • Recipe Page
   • Main Page
2. Installation
3. Usage
4. Contact

A Comprehensive Culinary Solution for Modern Living

In today's fast-paced world, many individuals find the prospect of cooking at home to be a daunting and time-consuming endeavor. Recognizing this challenge, we have developed Mise en Place, an innovative application designed to transform reluctant home cooks into passionate culinary enthusiasts.

As modern lifestyles demand efficiency and convenience, individuals with busy careers, demanding schedules, and minimal cooking experience often seek cost-effective alternatives to dining out. Mise en Place is poised to revolutionize the home cooking experience, empowering users of diverse backgrounds to unleash their inner Master Chef.

Our comprehensive platform offers a user-friendly solution for tracking meal ingredients, recipes, and meal planning, streamlining the culinary process and promoting a seamless cooking experience. Furthermore, Mise en Place fosters a sense of community by connecting individuals through their shared passion for food, making the culinary journey more engaging and enjoyable for all.

OpenAI Integration for Recipe Creation

In order to provide comprehensive and customized cooking instructions to users for a wide range of recipes, we leveraged OpenAI since the Edamam API did not include instructions for their recipes. By submitting a prompt consisting of the recipe name and ingredients, we were able to generate personalized recipe instructions using the power of the OpenAI platform.

(back to top)

Cart Integration via Kroger

On the cart page, users can send their currently selected recipe's ingredients to Kroger.

• Users can log in with their Kroger account to gain access to the cart's functionality.
• Utilizes Kroger's API to get the Kroger equivalent products using their UPC.
• Upon clicking the Send to Kroger button, the products listed are added to the user's Kroger cart.

(back to top)

User Preferences

Once users are logged in, they are able to add custom data to their account describing their dietary and health preferences, as well as the number of people and meals to determine how many meals and servings the app should provide. This data, unique to each user, is then compiled and sent directly to the Edamam API, which then sends back recipes matching that user's preferences and specifications. Any subsequent changes by the user to the preferences, exclusions, or quantities will be updated in the database, and recipe recommendations for that user will change accordingly. ns.

(back to top)

Database via Neon

Recipe and user data is stored on Neon's serverless PostgreSQL platform, and queries are handled with the

node-postgres

package. The schema is outlined below:

Writes to the database occur at several key points throughout the application, primarily when:

• Creating a new user account (users)
• Updating user preferences (which kicks off the Edamam query) (users, recipes, userrecipes)
• Editing instructions (recipes, userrecipes)

(back to top)

Landing Page

The landing page invites the user to explore and investigate Mise En Place.

Key elements:

• Main Image Carousel: The main image carousel showcases a variety of enticing food images to engage users and highlight the app's features.
• User Testimonial: A section with a real user's testimonial accompanied by their picture is displayed, showcasing the app's positive impact on users' lives.
• About The App - This section briefly explains the purpose of Mise en Place, with a brief description, image, and navigation buttons to explore the app further.
• Connect with Kroger - A button which encourages users to connect with their Kroger account for a seamless, automatic shopping experience.

Interactivity:

• The main image carousel as well as the user testimonial section can be clicked on to cycle through each others' images/cards.
• The About The App Section is an interactive section that prioritizes teaching the user what the app can do and how.
• The Connect With Kroger/Log In buttons can be clicked on to go through the Auth0 portal to authenticate through Kroger so ingredients can be saved to the user's Kroger cart.

(back to top)

Recipe Page

When a recipe is clicked on the main page, the recipe page is displayed that provides in-depth information on the selected recipe.

Information provided by the Edamam API with adjustments:

• Ingredients quantities that are adjusted to match the number of servings selected by the user.
• Nutritional values calculated per serving
• Health Labels that pertain to the recipe such as the cuisine type and dietary limitations Instructions generated by OpenAI:
• This provides personalized cooking instructions based on the ingredients and recipe name.
• The "Customize" button allows the user to edit the instructions and ingredients based on personal preference. The "Buy the Ingredients" button takes the user to the Kroger cart implementation page.

(back to top)

Main Page

The Main Page is the first the the user sees after logging in to select recipes

Dynamic information based off the particular user from Edamam API

• Future Recipes: Displays current recipes based off what the user inserted into the preferences. If preferences are not selected, displays a set 20 recipes.

• Todays Recipe: Dynamically renders the selected recipe at the top of the page. after clicking the "Lets Make It" button, sends the selected recipe to the recipe page.

• Recipe Modal: When clicking the question mark button on a recipe, a pop up modal comes up with an image and ingredients ordered list. A quick detail page of a recipe.

• Redirect Buttons: Quick access buttons that reroute the user to the cart or the user preferences.

(back to top)

Installation

1. Prerequisites

   This repository uses:

   • Auth0
   • Edamam API
   • OpenAI
   • Kroger API
   • Postgres database

   The rest of the installation will assume you have these registered and ready to go.

   It will also assume you have a hosts file with the following line:

   127.0.0.1 dev.local

   This is needed to enable SSL.

   It will also assume you have a keysAndCerts folder in your root with an SSL certificate named: "localhost.crt" and an SSL key named: "localhost.key" and these should be for the domain dev.local. How To

2. Clone the repository.

3. Duplicate the env.local.copy and rename it to env.local.

4. Add values to the env.local:

   AUTH0_SECRET=use [openssl rand -hex 32] to generate a 32 bytes value
   AUTH0_BASE_URL=This is your Auth0 Callback URL (starting with https://)
   AUTH0_ISSUER_BASE_URL=Your Auth0 Domain (starting with https://)
   AUTH0_CLIENT_ID=Your Auth0 ClientID
   AUTH0_CLIENT_SECRET= Your Auth0 Client Secret
   DATABASE_URL=URL of Postgres database
   EDAMAM_APP_ID=Edamam API ID
   EDAMAM_API_KEY=Edamam API Key
   OPENAI_API_KEY=OpenAI API Key
   KROGER_ID=Kroger Products API Client ID
   KROGER_SECRET=Kroger Products API Client Secret
   

5. Start the server with:

   npm run dev
   

6. Optionally, easily deploy to Vercel!

(back to top)

Usage

The primary goal of this repository was to provide an educational platform for our team of developers to practice building a React application utilizing a microservice architecture. The project involved collaborative work between six engineers to ensure a robust and well-designed application. By working on this project, we gained valuable experience in developing and deploying microservices in a real-world application using git workflow.

(back to top)

Contact

Sarah Folk

Stephen Perkins

Xiao Wen Wu

Kyle Bradford

Ermin Sljivo

Natale Toscano

(back to top)