What's Cookin

Abstract

A recipe tracking / meal planning application that allows users to view recipes they want to cook and plan shopping trips around them. Users should view a list of recipes and choose recipes to cook.

This is a learning project from Turing School Module 2.

• The spec for Part I can be found here.
• The spec for Part II can be found here.

Learning Goals

• Use object and array prototype methods to perform data manipulation
• Create a user interface that is easy to use and clearly displays information.
• Write DRY, reusable code that follows SRP and trends toward function purity
• Implement a robust testing suite using TDD
• Make network requests to retrieve data

Preview

Features

Part I

• View all recipes;
• Filter recipes by tag;
• Search recipes by name;
• Click on a recipe to view more information (directions, ingredients needed, and total cost);
• Chose user at random on load;
• Add/remove a recipe to a user's list of recipes to cook;
• Filter user's recipes to cook list by multiple tags;
• Search user's recipes to cook list by name;
• Search user's recipes to cook list by ingredient;
• Implement fetch API for accessing the data from provided endpoints, instead of hardcoded data files;
• Build test suite using sample dataset;
• Extension - Filter by multiple tags;
• Extension - Search by name or ingredient;
• Extension - Implement one of the listed 3rd party libraries - Micromodal.

Instructions

See live page!

Or...

• Clone this repo.
• Change into the directory and run npm install.
• Run npm start and open http://localhost:8080/ in your browser.
• When done, use command ctrl + c to stop the local server.
• To run tests, run npm test.

Technologies used

• JavaScript
• Mocha
• Chai
• Webpack
• Fetch API
• Micromodal.js

Design Inspiration

• Frontend Mentor - Layout, filtering
• Robb Owen's website - Colors, typography

Credits

• Micromodal.js
• Notioly by Mary Amato - Notion-style illustrations free pack, for the hero image.

Helpful links

• A (more) Modern CSS Reset by Andy Bell
• HTML / Sass Jumpstart by Stephanie Eckless - Minimal HTML/Sass Template, used mostly for sensible sizing.
• Fluid Typography Tool
• google-webfonts-helper - A Hassle-Free Way to Self-Host Google Fonts
• MDN - The Dialog element
• Accessible cards by Kitty Giraudel