Kitschy is a one-stop recipe finder and grocery list generator for all your cooking needs. It allows for recipe searching via Edamam API's recipe database. Once the desired recipes are added to "My Meals", a grocery list can be generated that will combine any common ingredients between the recipes into a single quantity.
Kitschy utilizes Firebase cloud databasing to enable users to cloud save grocery lists for access by others in their households, whether accessing from desktop or mobile.
This app's layout was designed with viewing on mobile devices in mind, utilizing viewport breakpoints and scaling to produce responsive experiences regardless of screen size.
Here are a few code snippets and basic explanation of the functions they performed. The first snippet is that of our ajax api call. We used this in tandem with our user's input, searchTerm, to retrieve information for up to 20 different recipes matching the input. We then created an empty array which we pushed the results into for future use.
Next is a bit of code relating to our cloud storage api, Firebase. Firebase was our solution to our problem of "How can we store our user's recipe information without using local storage?" While this is certainly not all you need, this bit of code was our starting point.
Next is the portion of code that is resposible for creating the recipe cards that a user will see. This code works in tandem with an event listener, not shown, that will toggle the recipe's ingredients list on or off when a recipe card is clicked.
Lastly is what we dubbed the "final boss" of this coding project. The major function of this app is to create a grocery list from the various recipes a user has chosen, and add all like ingredients into one total amount. This list can be downloaded and used when at the store so that a user can be sure to get everything they will need to start cooking.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
- IDE to view/edit source code (e.g. Visual Studio Code).
- Firebase API developer account.
- Edamam API key.
- Clone repository.
- Substitute your Edamam and Firebase API keys and config data.
- Open index.html in web browser.
- Upload index.html and assets folder to webhosting site, such as GitHub.
- If using GitHub, deploy via GitHub Pages.
| Emily Dorgan | Vince Lee | Tyler Yeager |
|---|---|---|
| - Portfolio | - Portfolio | - Portfolio |
| - Github | - Github | - Github |
- Recipe search API from Edamam.
- Modal plugin by Kyle Fox: jQuery Modal.
- Custom font from Google Fonts.
- Icons provided by FontAwesome.
