Recipe Wizard

This site comes with the all basic parts to get you started making a single page website with webpack fast. | Feb 5th. 2020

By K. Wicz & Dusty McCord

Description

This app is designed let users search for recipes and add those recipes to their weekly meal calendar. Once the user has built their recipe calendar for the week, they are able to print a grocery list of everything they need for their weekly trip to the grocery store!

Setup/Installation Requirements

Make sure you have git version control installed on your computer.

Find the green 'Clone or Download' button and copy the link
Open terminal and type...

Windows

cd desktop

Mac & linux

cd ~/Desktop

In terminal, clone the project by typing:

git clone https://github.com/dustatron/recipe-wizard.git

Navigate to the new folder that was created on your desk:

cd recipe-wizard

In terminal, type:

npm install

Navigate to Google Firebase. Create new credentials for your project.
In terminal, use firebase command line to login with your Google account credentials by typing

firebase login

Create a new Recipe Search API key and ID at Edamam.
In the root directory of your cloned folder, type

touch .env

In your text editor, open the .env file and add

API_KEY = {your key here}
API_ID = {your ID here}

In the command line, start program with

npm run now

In the command line, start the server by running

firebase serve

Navigate to http://localhost:5000/ in your browser to see the project.

Specs

Behavior Driven Development Spec List

Behavior	Input	Output
User will enter ingredient item in search input	chicken	links to 12 chicken recipes
User will select which day they want to make a recipe	Click Monday button	Recipe is added to Monday on the meal calendar
User will deselct meal from meal calendar	Click meal title on calendar	Recipe is removed
User selects start date of meal calendar	11/22/63	Meal calendar is labeled for the week of 11/22/63
User selects Grocery List	Click Grocery List	List of groceries for all recipes selected

Support

The software is provided as is. It might work as expected - or not. Use at your own risk.

Built With

HTML - Simple Scaffolding
JavaScript - Used for interactivity in the page
jQuery - Used to interact with the DOM
Bootstrap 4.4 - Used for styling
webpack
Sass
ESLint
Node.js
Uglifyjs
Jest

Useful tools

Old School Gifs Search
free images @ unsplash
- source.unsplash.com will return a random image at a desired size by simply calling the size after the url followed by a '?' and a keyword. Example below
- https://source.unsplash.com/400x400/?cat
- http://unsplash.it/500/500 - This will just return a random image the size of 500x500

License

This project is licensed under the MIT License - see the LICENSE.md file for details

kwicz/recipe-wizard