What's Cookin'? Project

All Recipes View

My Recipes View

Abstract

Our fully remote team created a recipe site that presents users with an array of recipe cards which they can filter and search through by the type of recipe they are looking for while saving recipes to their "My Recipes" view. When viewing a recipe, users will be informed if they have the required ingredients in their pantry with the option to add them. There is a "My Recipes" view where users can review their bookmarked recipes and add any needed ingredients to their pantry. Users will find the site to be thoughtfully-designed, intuitive, and responsive to various screen sizes.

This team project took place in the second term of the Turing front-end software engineering program and required students to synthesize all the technical and project management skills we have honed over the past weeks to create a fully functioning site from the design phase to production in four weeks. This project required extensive research to determine and implement new technologies to make the product surpass expectations.

Feature Spotlight

In order to provide users with an expanded view of any recipe, we researched and determined MicroModal.js to be the best solution. We successfully implemented MicroModal as seen in the above gif. Users are able to see in red and green which ingredients they will need to add before cooking the selected recipe. This view is dynamic and guides the user if they are able to proceed with cooking the selected recipe—thus removing those ingredients from their pantry—or if they still need to add more ingredients beforehand.

Contributors

Spencer Haka
Tim Thomas
Sam Rice
Zac Walters

Research and Documentation

Design document we developed with Excalidraw:

Our data model and DOM flowchart:

Agile/Scrum project board we created and managed in GitHub:

Technologies

• MicroModal.js 3rd party library
• Fetch API
• Lighthouse and WAVE accessibility tools
• Webpack module bundler
• Git/GitHub
• GitHub project board
• JavaScript
• CSS
• HTML
• Mocha JavaScript testing framework
• Chai assertion library
• Node.JS
• Excalidraw

Methodologies

• Design the UI to adapt to various screen sizes
• Test-driven development
• Error handling
• Ensure accessiblity through WAI ARIA states, roles, and properties
• Implement ES6 classes which support a complex data model
• Use object and array prototype methods to perform data manipulation
• Create a user interface that is easy to use and clearly displays information
• Write modular, reusable code that follows SRP (Single Responsibility Principle)
• Implement a robust testing suite using TDD
• Make network requests to retrieve data
• Demonstrate DRY principles
• Utilize Agile/Scrum project management

Installation Instructions

1. Fork this repository.
2. Clone your new, forked repository to your local machine.
3. Clone this API repository to your machine.
4. cd into the API repository on your local machine and run npm install, then npm start to launch the API's server.
5. In a seperate tab, cd into the main project repository on your local machine and run npm install, then npm start to launch the application's server.
6. Open the link to your local server (listed in your terminal) in your web browser to view the live page.