/CanYouCookIt

CanYouCookIt is an app developed for CS5610 Web Development taught by Prof. John Alexis Guerra Gommez to demonstrate skill in the MERN stack

Primary LanguageJavaScriptMIT LicenseMIT

Can You Cook It?

Authors: Anshul Mathew, Katerina Bosko

Class Link

The project is part of the CS5610 Web Development at the Northeastern University.

Project Objective

Say you would like to cook something but you don't know what to cook with the ingredients available at his home. CanYouCookIt app allows you to find recipes based on the ingredients you have at home. It allows you to keep a track of the ingredients and save recipes that you find interesting. It enables search based on the ingredients you want to use.

Deliverables

Design mockups & User Personas (also in deliverables folder)

Deployed app: https://canyoucookit.onrender.com/

Presentation slides

Video Walkthrough

Screenshots

Inventory Page

Search Results

Create New Recipe

My Recipes Page

Milestones

60% progress has two releases:

100% progress has two releases:

final code for grading release:

Features

  • Add ingredients to your inventory
  • Provide suggestions via auto complete as you type items you want to find in the search bar
  • You can delete items from the inventory if you are out of stock
  • View your current stash of food items
  • Get recipe information based on food items you own
  • Save recipes that you like
  • Recipes provide the ingredients and the method to cook it as well

Tech

Our App uses a number of open source projects to work properly:

  • Node.js
  • Express.js
  • Bootstrap
  • HTML/CSS
  • MongoDB
  • Docker
  • React

And of course CanYouCookIt is itself is open source with a public repository on GitHub.

Using the app

We use external API - Spoonacular - to find the recipes and there are only 150 API calls for free per day. If the limit is depleted, please come back next day.

How to use the app:

  1. Start adding ingredients on Inventory page. To enable the “Add” button, you must select an ingredient from the dropdown menu.
  2. Update your ingredient’s list by deleting ingredients you no longer have by clicking on “X” button
  3. Use checkbox to add ingredients to the search and press “Find Recipes” button to search for recipes based on the checked ingredients.
  4. Explore the recipes returned from the search by clicking on the recipe card on the left.
  5. Add recipes you liked from the search to your recipes collection by pressing “+” button on the right.
  6. Go to Recipes page to see your saved recipes.
  7. You can edit the recipes by double clicking on title, ingredients or instructions on the right.
  8. You can also add your own recipes with your custom images by clicking on “+” button from Recipes page.
  9. Finally, you can delete recipes you no longer want to keep by clicking on “trash” icon on the right.

Installation

Setting up the database

For the database CanYouCookIt uses MongoDB in the backend. To set it up run the following commands

docker run --name mongodb -d -p 27017:27017 -v YOUR_LOCAL_DIR:/data/db mongo

Using this method, you will be able to connect to your MongoDB instance on mongodb://localhost:27017. You can try it with Compass, MongoDB’s GUI to visualize and analyze your data. Don't forget to shut down the docker instance after use.

Setting up the servers

CanYouCookIt requires Node.js v10+ to run. Install the dependencies and devDependencies and start the back end-server.

cd CanYouCookIt
npm i

You can intialize the database by running the following commands

npm run initializeDB

You can setup the front-end server by running the following commands

npm run postinstall
Running the project

Run the following command from the root directory of the project to spin up the project's back-end server in a new terminal

npm run start

To start the front-end server, you can run the following commands in a new terminal

cd front
npm run start

Open up a browser and navigate to http://localhost:3000/ Enjoy!

License

MIT Free Software, Hell Yeah!