cbmackintosh / whats-cookin

What's Cookin'?

By:

• Steven Mancine (https://github.com/itsnameissteven)
• Cameron Mackintosh (https://github.com/cbmackintosh)

Abstract:

Whats Cookin' is a recipe tracking / meal planning application that allows users to view their favorite recipes and plan shopping trips around them, similar to websites like All Recipes or New York Times Cooking. Inspiration for design and functionality was drawn from New York Times Cooking and similar designs found on Dribble.

Users are able to view a list of recipes on the app and filter those recipes by a combination of one or more names, ingredients and tags using a single streamlined search bar. Users can also add recipes to their list of favorites and filter that list using the same search bar on the My Recipes tab.

Clicking on any recipe will take the user to a more detailed recipe card with a list of ingredients, instructions and additional suggested dishes. From there, the Lets Cook button will indicate whether or not the user has enough ingredients for the selecte recipe, and what ingredients in what quantities are missing. From this menu, a variety of pathways and outcomes are possible as illustrated by the flow chart below:

The Grocery List shows the user what items they need to purchase to cook recipes on their Recipes To Cook List. Once these are purchased, the user can add them to their pantry, giving them sufficient ingredients to cook previously locked recipes.

Shrinking of the screen will trigger the mobile friendly design with an all new navigation bar.

Installation Instructions:

• Clone this repository [email protected]:cbmackintosh/whats-cookin.git
• Install the following dependencies: npm install and npm install @glidejs/glide
• From the root directory, open the application on web browser using open ./src/index.html

Technologies used:

• Turing School of Software Design - Whats Cookin' starter kit: https://github.com/turingschool-examples/whats-cookin-starter-kit
• Visual Studio Code: 1.21.1 (text editor)
• npm 6.14.8 (package manager)
• Glide.js 3.4.1 https://glidejs.com/
• Mocha ^6.1.4 (test framework)
• Chai ^4.2.0 (assertion library)
• eslint 7.19.0 (linter)

whats-cookin's Issues

Create responsive design

• Web design should respond to the size of screen on the computer.

• Design for cellphones should be considered as well

• hamburger icon with smaller screen.

• search icon on nave bar to drop down search

DTR

Create a DTR with the following:

• Learning goals
• Schedules
• Expectations

Recipe class

• Should bring in all information from a recipe object.

  • Unique id
  • image of food 'http string'
  • ingredients
    • id
    • quantity
      • amount
      • unit
  • instructions
    • instruction string
    • step number
  • name
  • tag [array of strings]

• should have methods:

  • determine the name of ingredients needed
  • get the cost of its ingredients
    • return the cost of ingredient * units needed???
    • how to know what the cost is per unit?(how much ingredient are you getting for the cost?)
  • return its directions/ instructions

My favorite recipes

• user should be able to save recipes
• a page should display to show favorite recipes
• a user should be able to remove recipes

Project Board

ingredient class

• should have an id
• a name
• estimated cost in cents

ingredients are not capitalized.

Event delegation issue

Page loads outside of wanted clicks.

Build out html and css

Basic structure should provide you with the ability to test class methods. Use script.js to manipulate the DOM

• Should have an area to view the recipes.
• Should have an area to view recipe details.
• Should have an input box.

Design Inspirations

• NYT
  A few things that I like about this design:

  • carousel recipes/images
  • box shadow on hover
  • increased picture size (slow transition )

• Design from Dribble

  • Carousel of recipe images, titles (DOM objects)
  • Includes time, portion size
  • Seems to fit generally well for the project, easy to make additions to design.

• [recipe cards] (https://dribbble.com/shots/13869707-Perfectly-Grilled-Steak/attachments/5477225?mode=media)

  • Good design for individual recipe cards, or even a list of saved recipe cards
  • Includes sections for ingredients and instructions, which fits in with our intended data model
  • Provides suggestions for other dishes to pair with it? Might be a feature to add...

Create helper test file

This file will contain the data that we will need to pull into the test suites

• Should have multiple recipes
• Should have multiple users
• Should have multiple ingredients

User Class test

• Properties

  • Should a Unique ID (number)
  • Should have a name (String)
  • Should have pantry (array or objects with ingredient id and amount)

• Methods

  • Should be able to add recipesToCook (save recipes to cook later)
  • filter Favorite recipes by one or more tags
  • filter Favorite recipes by its name or ingredients

Recipe Card Instructions

Card is too small to fit data

• expand card size
• header, directions and ingredients should have dedicated space
• button shouldn't move
• instruction card should be taller
• text should be consisted
• ingredients need to be spaced out more
• button shouldn't move

Write script to manipulate DOM

All DOM manipulation will happen in this file.

• Should be able to view a list of all recipes (carousel??? or list???)
  • iterate through the recipe repository
  • Each recipe will have name
  • Each recipe will have image
• Should be able to click on the recipe for more information
  • View directions
  • View ingredients needed
  • View Total Cost
• Should have a search bar
  • Search by tags
  • Search by name
  • Search by ingredients

Specs

Main

Rubric

Recipe card bug

Alignment issues between different text

• text align right
• button needs to be changed
• button and cost to be fixed to the bottom of the box

RecipeRepository class

• Should have a parameter to take in recipe data (array)
• Methods
  • Filtered list of recipes based on one or more tags
  • Filter list of recipes based on its name or ingredients

Recipe repository tests

• Should have a property that takes in recipe data and stores in an array (may be instances of Recipe
• Methods.
  • Filter based on one or more tags
  • Filter based on its name or ingredients

Test

• start

ingredient tests

• test that it has id, name, cost in cents

npm packages

flickety

For a carousel effect

Wireframe

WireFrame Design

excalidraw

Recipe class test

• Test all properties

  • Unique ID
  • Corresponding image link
  • Array of ingredients{}
    • id
    • quantity {}
      • amount
      • unit
  • array of instructions{}
    • instruction
    • corresponding step number
  • name
  • tags

• Should test methods

  • Determine the names of ingredients needed
  • get the cost or ingredients
  • return the directions

• Test any changing properties