shawnmcmahon/refactor-tractor-wc

Refactor the codebase from hell while creating a recipe helper that allows users to find and search recipes by name or ingredients. Also allows the user to see if they can cook the recipe through the Pantry feature.

What's Cookin Refactor Tractor

Table of Contents

• Overview
• Features
• How does this work?
• Project Reflection
• How To Contribute
• Instructions for Running Project
• Authors and Contributors

Overview and Project Goals

The goal of this group project that was made for Module 2 at Turing School of Software and Design is refactor an existing code-base that was previously set up and not working, and create a functional application.

Why was this project created?

To solidify and demonstrate the understanding of:

1. Building on top of a pre-existing code base that someone else wrote.
2. Make network requests to API endpoints to retrieve and manipulate data.
3. Ensure the application follows accessibility.
4. Use Sass to DRY up CSS.
5. Incorporate Webpack compiler

Back to top

Instructions for Running Project

1. This project fetches data from an API so you will need to begin by cloning down the API and running it.
2. Clone the API by running git clone git@github.com:turingschool/What-s-cookin--starter-kit-API.git
3. CD into that directory, run npm install and then npm start. You should see “What's cookin-starter-kit API is now running on http://localhost:3001 !”
4. Open a NEW terminal tab and cd somewhere outside of the API repo you just cloned. Do not close the tab that is running the API.
5. Clone a copy of this repo to your machine by running git clone git@github.com:clairefields15/whats-cookin.git
6. CD into the directory
7. Run npm install
8. Run npm start
9. A link will appear in the terminal similar to http://localhost:8080/ (you might see 8081). Open that link in your browser.

How does this work?

Demonstration of the app:

Favorite Recipes, Recipes to Cook, and Pantry View

Recipe Details, Recipe & Favorite Recipe Search, and Filter by Tag

Back to top

Technologies Used

Webpack

API

SCSS

Testing Frameworks Mocha & Chai

Accessibility Score: 98

• Tested with Lighthouse

Project Reflection

Wins

• Successfully applying TDD in order to confirm our logic using a smaller dataset before implementing the functionality to the page and using a larger dataset.
• Applying a divide and conquer approach as a group in order to strengthen our individual and shared learning goals.

Challenges

• Ensuring that we created small, actionanable steps in order to approach this large project.

Future Features

• Ability to add any missing ingredients to a grocery list.
• Add a log-in screen.
• add a seven day calendar to the cooking queue page.

Credits

Authors

Lourdes Mendoza GH

Claire Fields GH

Shawn GH

---

This project was created for Turing School of Software and Design

2021/06/08

Back to top