What's Cookin' Good Lookin'

Project Overview

What's Cookin' Good Lookin' is an application that presents a user with an extensive list of recipes. Users can favorite recipes, save recipes to the 'Let's Cook' section, and delete from their favorites. All recipes include ingredients needed, directions, and cost. On page load, a random user will be generated and they can then interact with the page.

See it in action!

• Upon opening the application, the user is greeted and will see all recipes displayed. They may also search by recipe name or ingredient or filter by recipe type.

• User is able to click on a recipe thumbnail and view the detailed recipe. User may click on any recipe for more details such as directions, ingredients, and total recipe cost.

• From within the recipe, the user may add a recipe to favorites or they can add to cook later. The User may then click on Favorites or Let's Cook to view their saved recipes.

• User may also search for a recipe by name or ingredient within the Favorites View. They can also filter by recipe type and can clear these filters to see all favorite recipes displayed.

• On the favorite recipe view they can delete recipes.

• User is be able to see the ingredients in their pantry.

• User is able to click on a recipe to determine what ingredients they are missing and add them to their pantry.

• A user can delete a recipe from their to cook section after they have cooked it.

• The application is tablet and mobile friendly.

• We're proud to share the the application is also fully tab accessible with a 100% Lighthouse Accessibility Score.

Installation and Setup:

To navigate the website live, a local server download is required.

1. Clone the necessary server and API here
2. In the command line, cd into the directory and run npm install or npm i.
3. After the install is completely, run npm start.

Then clone down this repository

1. In your command line, cd into your local directory and clone down this repository -
   [email protected]:janitastic/whats-cookin-good-lookin.git
2. Install the necessary package dependencies -
   npm install
3. Run the command npm start
4. With both the server running and this package, and visit http://localhost:8080/ in your browser.

Technologies Used

• JavaScript
• HTML, CSS
• Node.js
• Mocha and Chai
• Webpack

Future Goals

• Add more elements to user profile such as profile photo and comments on recipes
• User log in page
• Ability to create custom recipes

Rubric

• Part One Rubric and Project Specifications - Part 1
• Part Two Rubric and Project Specifications - Part 2