What's Cooking

Table of Contents

Overview

This project creates a recipe tracking application that lets users view a wide array of recipes, favorite them, and plan grocery trips around them.

Project Goals

In this paired project for Module 2 of Turing, the goal of this project was to implement ES6 classes that communicate with each other correctly, use object and array prototype methods to manipulate given data sets, focus on user stories and interface, make network requets to API endpoints to retrieve and manipulate data, all while utilizing DRY code, SRP, and TDD.

Authors and Project Manager

  • @novaraptur
  • @emorendorff
  • @nikseif (Project Manager)

Features

Users of this app can

  • View all recipes in the recipes library
  • View recipe directions, and ingredients needed, as well as a calculated (estimated) total cost
  • Search recipes by their tags, keywords or ingredients
  • Favorite/unfavorite recipes and have them displayed in a different section
  • Add/remove recipes into a "To Cook" section

Landing-Page Search Favorites To-Cook

Instructions for Running Project Locally

  1. Clone down this repository
  2. cd into the repository in your terminal
  3. Run npm install to install all dependencies
  4. Run npm start and visit localhost:8080

Project Reflection

Wins!

  • Worked super well together, communicated effectively
  • Github projects utilized well
  • Resourceful on things that were giving us trouble
  • Gaining more knowledge on manipulating data sets and using array prototype methods
  • Designed a fairly good looking page based on our wireframes

Things to Improve

  • Both of us made the intentional choice to balance our time practicing for JS Fun and this project, but that unfortunately this led to us not completing iteration 3. Both of us have the intention of completing this after submission so we gain understanding of fetch calls and API implementation.
  • There are parts of our code that get the job done, but are likely not best practice, so we would like to focus on doing things correctly or more intentionally the first time around rather than run out of time to refactor for cleaner code.

Technologies Used

javascript html5 CSS3 Github

- Mocha + Chai - WebPack