k-atwhite / whats-cookin

🍽️ What's Cookin! - FEM2 - Group

🍽 What is Cookin?! 🍽

1. Project Overview
2. Contributors
3. How to use the app
4. Technologies Used
5. Future Additions

Project Overview

What's cooking is our biggest project yet!

0️⃣ ITERATION: This project was our first real opportunity to implement Test Driven Development. With the concept of happy and sad paths in mind, we wrote tests to ensure our properties and methods would be funcitonal.

1️⃣ ITERATION: Our first tasks were to create the classes that would do most of the heavy lifting for this project. We made an effort to set up a buffer between the raw data and the manipulationof data by setting up classes that would search through and interpret the data before passing it on into the DOM. We wrote constructors and the methods withing for Ingredients, Recipes, a Recipe Repository, and Users.

2️⃣ ITERATION: Our second phase of work was to start using our classes to populate and maniplulate the DOM. We used the idea of "user stories" to inform our coding decisions. Our user should have a wide range of functionality (covered in detail below) - such as filtering through the recipes by name, ingredients, and tags. Saving recipes to their "favorite recipes" or their "weekly menu".

3️⃣ ITERATION: Our final phase was to toss aside the built in datasets and start using fetch calls to request data from an API.

Project Goals:

• Implement ES6 classes that communicate to each other as needed
• Use object and array prototype methods to perform data manipulation
• Create a user interface that is easy to use and displays information in a clear way on multiple screens
• Write modular, reusable code that follows SRP (Single Responsibility Principle)
• Implement a robust testing suite using TDD
• Make network requests to API endpoints to retrieve and manipulate data

Contributors

• 🥗 Kat White 🥗
• 🌮 Lauren Kessell 🌮
• 🍱 Erica Spitz 🍱

How to use the app

Server Setup

To set up the data server, run the following commands:
git clone [email protected]:turingschool/What-s-cookin--starter-kit-API.git
cd What-s-cookin--starter-kit-API
npm install
npm start
Then, open a new Terminal window

App Setup

In the new Terminal window, run the following commands:
git clone [email protected]:k-atwhite/whats-cookin.git
cd whats-cookin
npm install
npm start
Open a window in your web browser of choice, and visit localhost:8080 to view the app!

Technologies Used

• HTML
• CSS
• JavaScript
• Webpack
• ESLint

Future Additions

There are so many ways to grow this site. Several examples could be:

1. Add a Pantry: This addiction would add logic and functionality to determine whether a user's pantry has enough ingredients to cook a given meal. And what the user still needs to cook that mean!

2. 3rd Party Library: Use a 3rd party library to improve user experience - especialy a carouselthat could rotate through recipes. Or an extension to improve our modal.

3. Rating System: Favoriting recipes is nice, but implementing a rating system would be even more helpful for a user! This could include a 5 star rating system and a way to leave reviews.

whats-cookin's Issues

Create recipe test

As a developer, I want to be sure that our recipe class is thoroughly tested. I would like to see the following.

Properties

• id: number
• image: url
• ingredients: array of ingredient objects
• instructions: array of instruction objects
• name: recipe name
• tags: array of string tags

Methods

Determine the names of ingredients needed

• map ingredients array; return ingredient names? ingredient.name

Get the cost of its ingredients

• reduce ingredients array
• add each ingredient.estimatedCostInCents to accumulator
  -return accumulator

Return its directions / instructions

• return array; recipe.instructions

Ingredient class tests

As a developer, I need to create a test suite for the Ingredient class, which should store the following data:

• a unique id number
• an ingredient name
• the estimated cost of one "unit" of the ingredient in cents

RecipeRepository Mega Tags

As a developer, when i visit What'sCookin, I want to be able to access ALL possible tags related to a recipe - including the meal type, ingredients, and the name of the recipe itself.

*Happy Path: Access meal type, recipe name, ingredients

*Sad Path: Make sure articles (the, a, with) are not put into the array