Gabby-Recny / whats-cookin-starter-kit

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

RoboChef

Contributors:

Technologies Used:

  • HTML
  • CSS
  • Javascript
  • Webpack
  • Mocha
  • Chai
  • ESLINT
  • Javascript ES6
  • Fetch API
  • Post API

Instructions for Starting and Using the Application:

Launch The Application On Your Computer

  1. Once you have cloned the repo, change into the directory and run npm install.
  2. Run npm start and visit localhost:8080 in your browser's url bar.
  3. Clone down this repo and run npm install.
  4. Create a new tab in your terminal and run npm start inside of the repo. The page will update with new APIs.

How To Use RoboChef

  1. Once the website loads, you will be greated with a list of recipes. From here you have a few options:
  2. To see more information about a recipe, click the recipe name. This info includes Ingredients, Instructions and Cost.
  3. To show recipes in a given category, click the "Recipes" button on the top navigation bar and click the corresponding category of your choice: Breakfast, Lunch, Dinner, Salad Side Dish, or View All.
  4. To return to the home screen at any time, click the "Home" button on the top nav bar.
  5. To search for a recipe, type a title or ingredient into the search bar.

How To Favorite A Recipe

  • To favorite a recipe, click the heart icon for that recipe card.
  • To remove it from that list, simply click the heart icon again.
  • To see all of the favorited recipes, click the "Favorites" button on the top nav bar.

How To Save A Recipe For Later

  • To save a recipe to cook for later, click the save icon for that recipe card.
  • To remove it from that list, simply click the save icon again.
  • To see all of the saved recipes, click the "Saved" button on the top nav bar.

Future Feature Additions:

  • Integrate the filter with the user's pantry inventory to sort by recipes that can currently be cooked.
  • Debug search function to include 'elvis', 'cookie' and 'cake.'
  • Add visual indicators the user's pantry inventory updated after cooking a recipe and going shopping.

About


Languages

Language:JavaScript 93.9%Language:CSS 2.2%Language:SCSS 2.1%Language:HTML 1.8%