daniel-oc/whats-cookin

MOD2 What's Cookin, Good Lookin'?

TABLE OF CONTENTS

• Project Overview
• Future Features
• Tech Stack
• Install Instructions
• Authors/Links

Project Overview

Turing's Mod 2 "What's Cookin" group project continued to build on on class-to-class interaction, Test-Driven Development, and the freshly taught ES6 syntax and iterator methods, while introducing new technologies like webpack and and GET network requests. The spec asked us to start with some very real-world steps such as creating a project board with wireframes, laying out our goals, detailing the steps of how we'd achieve those, and truly thinking big picture. Over the course of 10 days, our group of three developers designed a site that pulled its data using Fetch API, and allows the user to filter through a database of recipes, store their favorites or upcoming meals-to-cook, and select recipes to their specific details such as instructions and total cost.

On page load, the user will be able to scroll through a database of potential recipes.

If the user would like to learn more about the recipe, such as instructions for cooking it or the total cost of all the ingredients involved, simply click on a small card to see a larger display.

If the user sees a recipe they like, they may favorite that recipe by clicking the heart. A filled in heart indicates the recipe has been favorited.

If the user decides they no longer love the recipe, they can "un-heart" it and they will no longer see the recipe in their fav view. The recipe can also be removed from the faved view.

If the user sees a recipe they'd like to cook for later, they may store it by clicking the plus. If they want to view their meals stored to cook later, they may click the "Meal Plan" button on the right of the screen. If they cook that meal or decide they don't want it after all, simply click the red X.

The user may select the Filter Button to display all the available tags to filter the recipes by. The filtering is set to be more inclusive, so any checkbox that is displayed will show recipes that include that particular tag. They may work back towards the whole database by unchecking boxes OR reclicking the Filter button that now says "Clear Filters".

The user may also use the search bar to filter through all potential recipes by ingredient name. In the example above, the user filters by eggs, then eggs AND salt, then eggs AND salt AND chicken to finally display one single recipe requring all 3 pieces.

The filtering tags will also work within the user's favorited recipes section, as does the search by Recipe Name or ingredients in the search bar.

As of January 2022, the user now has a "Pantry", in which they can keep track of the ingredients they have at home, adding and removing them, either with simple incrementer buttons or with a custom "add ingredient" section.

The new pantry function also allows a user to check if they have the ingredients necessary to create a meal. After clicking on a recipe, while in the single recipe display, they have the option of pressing a button to determine if they have the necessary ingredients. If not, the list of ingredients will update with a list of ingredients they still require.

If the user has the necessary ingredients, the ingredients will be replaced with a message informing them as such. They will also have the option of selecting "Cook this Meal", which will consider the meal "cooked", and remove the requisite ingredients from their pantry.

FUTURE FEATURES

• Provide a better UX by updating the UI

TECHNOLOGIES USED

INSTRUCTIONS

• fork the repository

• copy the SSH clone address

• run git clone [remote-address] in your repo

• run npm install in your terminal

• run npm start in the Terminal visit localhost:8080

• now fork and clone the APIs that the site will be drawing it's data and Pantry functonality from: (https://github.com/Daniel-OC/whats-cookin-api)

• run npm install in your terminal

• run npm start in the Terminal

AUTHORS/LINKS

- Project

• Project Board

- AUTHORS:

• Daniel O'Connell = LinkedIn || GitHub
• Ethan Tweittman = LinkedIn || GitHub
• Alex Fritz = LinkedIn || GitHub

- Education:

• Hannah Hudson (Project Manager) = LinkedIn || GitHub
• Turing School of Software & Design

BACK TO THE TOP!

whats-cookin's Issues

Pantry Test

• Import all necessary files
• Declare and beforeEach()
• Tests if a function
• Tests if an object
• Should hold an array of all ingredients
• Should have checkPantryInventory function
• Should determine whether a pantry has enough ingredients to cook a specific meal
• Should have listIngredientsNeeded function
• Should determine the amount of ingredients still needed in order to cook a given meal based on the ingredients currently in the pantry

Update Fetch

• Fork and Clone repo for local server
• Update API endpoints

Initial Comp - HTML

• Build out initial HTML structure

Recipe Repository Test

• Import all necessary files
• Declare & beforeEach()
• Tests if a function
• Tests if an instance of RecipeRepository
• Tests if filterByTag function
• Tests if effectively filters by one tag
• Tests if effectively filters by 2 or more tags (&& operator)
• Test if filterBySearch function
• Test if effectively filters by name
• Test if effectively filters by ingredient
• (To consider later, what happens if you look up "chicken potatoes"?)

Ingredient Test

• Import all necessary files
• Declare & beforeEach()
• Tests if a function
• Tests if an object
• Tests if has an ID
• Tests if has a name
• Tests if contains estimated cost in cents

Recipe Repository Class

• Create Class constructor that passes all Recipe Repository Tests

Pantry Class

• Make it pass all them tests, dawg.

User Stories

• Can Favorite and Unfavorite recipes
• Can filter favorite recipes by tags
• Can filter favorite recipes by name or ingredient
• Can add recipe to Meal plan

Create Class files, Class Testing files, Test Data files, README.md, and PR Template

• README.md
• PR Template
• Ingredient file / File Testing file
• Recipe file / Recipe Testing file
• Recipe Repo file / Recipe Repo file Testing
• User file / User Testing file
• Ingredient Testing data
• Recipe Testing data
• User Testing data

Comp 2

• Continued progress on the HTML and CSS of our project, getting near a finished product

- [ ] REFACTOR: Testing Suites

• REFACTOR: Javascript
• REFACTOR: html
• REFACTOR: CSS
  • Add/remove orange class btwn Filters/Meal Plan button
  • bigModal instructions + image CSS refactor
  • favsButton too high
  • recipeNames on small cards too far left?
  • make aside + sideModal smaller
  • make searchBar category dropDown better
• RUN: General Linter
• LINGERING QUESTIONS:
  • Are we allowed to invoke another function as argument?
• ASK: Phil about our catch function
• CAPTURE: Gifs for readme
• FINISH: Readme

Ingredient Class

• Create a class that passes all Ingredient tests

Dom Manipulation

• Separate out any functionality that manipulates the dom into it's own file

Recipe Class

• Create class constructor that passes all Recipe tests

FETCH CALLS

• Figure out Fetch calls
• Now that we understand fetch calls... do them? Make them? Unsure on the nomenclature at this moment, will know more after box one.

User Test

• Import all necessary files
• Declare & beforeEach()
• Tests if Function
• Tests if instantiation of User
• Test if user has a name
• Test if user has an ID
• Test if user.mealPlan is an instantiation of Recipe Repository
• Tests if user.favoriteRecipes is an instantiation of Recipe Repository
• Tests if addToList is a function
• Tests if removeFromList is a function
• Tests if user can add recipe to favoriteRecipes
• Tests if user can remove recipe from favoriteRecipes
• Test if user can add recipe to mealPlan
• Test if user can remove a recipe from mealPlan

Pass all User Stories Functionality

• Import all necessary files
• Can view list of all Recipes
• Can click on a recipe and view Directions, ingredients necessary, and total cost
• Can filter recipes by tags
• Can search by name + ingredient

SASS

• Convert to SCSS
• Convert to Sass

Recipe Test

• Import all necessary files
• Declare & beforeEach()
• Tests if a function
• Tests if an object
• Tests if has an ID
• Tests if has an image
• Tests if contains ingredients
• Tests if has a name
• Tests if has the ability to be tagged for filtering
• Test if it has instructions
• Test for getIngredients function
• Test for getCost function
• Test that it accurately assesses the cost (needs to be in cents)
• Test to make sure it returns recipe directions

User Class

• Write a class constructor that passes all User tests

REFACTOR

• ADD Ingredient amounts to bigModal
• DRY up favorite and mealplan methods
• REFACTOR repeated filter methods between classes
• REPLACE event listeners using event delegation
• ADD message on favs page when no favs exist
• FIX image distortion on bigModal
• ADD npm install to readme
• REFACTOR the else/if logic w/i displayCurrentRecipes
• FIX mealplan and filter button logic
• ADD a mealWasCooked function to User (probably)
• REFACTOR promise handling with helper functions
• HANDLE errors in the pantry search bar
• UPDATE Readme

Initial Comp - CSS

• Create/apply flex stylings
• Create/apply colors
• Create/apply borders