Generational Cookbook

An app designed to digitize and enrich family recipes, preserving culinary traditions across generations.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

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

About The Project

Users can add recipes to the family cookbook using 3 methods:

• Scanning and uploading a photo of a recipe.
• Voice recording a recipe.
• Manually typing a recipe.

Once the system has the raw recipe information, the user is prompted with a series of journal questions. When the user clicks submit, these answers are processed by OpenAI, returning a completed written journal entry and bringing the user to the final edit page.

On the final edit page, the user can add additional information, such as prep time, cook time, and the creator. Here, they can also edit the recipe text, e.g. steps and instructions. Finally, there is a chatbot available to process user requests to make edits to the recipe contents. Possible modifications:

• Add more greens.
• Make this mexican-styled.
• Double the ingredients.

Once the user is happy with the results, they may submit the final recipe to the database. The home page will retrieve new recipes from the database.

(back to top)

Built With

• React
• Google MUI
• Firebase
• Google Cloud Functions
• OpenAI API

(back to top)

Getting Started

Prerequisites

Node.js and npm

• Go here to get node.js and the package manager npm: https://nodejs.org/en

Firebase

• Sign into Firebase using your Gmail and make a new project: https://firebase.google.com
• Set the project up for hosting and Firestore on a webapp.
• Once the project is created, enable authentication (Google-sign in).
• Check your project settings for the config deets:

const firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
};

firebase.initializeApp(firebaseConfig);

• Go into firebase.js in the src folder and replace the parameters with your new project's.
• No initial data needs to be stored in Firestore.

Google Cloud Functions

• This service automatically comes with Firebase. Enable the API services for your Firebase project: https://cloud.google.com/functions
• You will store the OpenAI key in the environment variables.
• Get an OpenAI API Key at https://platform.openai.com/api-keys
• For adding functions:

cd functions

npm install

• Add the functions to index.js.\
• Deploy the functions:

firebase deploy --only functions

Installation

1. Clone the repo

   git clone https://github.com/394-w25/Cookbook.git

2. Install NPM packages

   npm install

3. Start the app on localhost

   npm start

4. Go to http://localhost:5173, the default port.

(back to top)

Bugs

No app is perfect or ever 100% complete. For future developers, here is a list of known bugs.

• The 'My Family' button on the navigation bar is not functional. This is meant for a future feature that allows users to view recipes organized by family lines.
• On the voice recording page of the app, the box where transcribed text shows up does not automatically scroll.
• The upload button for adding recipe images from the edit page is not working for some reason.
• Recipe card does not show the cook time, per the wireframe.
• Markdown appears in the journal text and other recipe elements after editing the recipe using the chatbot.

Top contributors:

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Project Link: https://github.com/394-w25/Cookbook

(back to top)

Acknowledgments

• This project was created by Team Maroon in Northwestern's CS394 course, taught by Prof. Riesbeck.
• Thanks to our product managers in the MPD2 course for their guidance.

(back to top)