Are you having guests over for dinner tonight and don't know what to make? Do you have ingredients in your fridge and don't know what to do with them?
The MyCookingAssistant app is a search engine that returns the most relevant recipes from the most popular sites on the web.
With this app, you can
- Search for a variety of recipes from many sources.
- Find out what ingredients you need to make a recipe.
- Favorite a recipe so that you can view it later.
- Unfavorite a recipe.
- Add your own personal notes to a recipe.
- About this project
- Live
- Contributors
- Getting started
- Structure of the project
- Screenshots
- Technologies used to create app
- About the Edamam Recipe Search API
- App features
- Future code development
- Known issues
- Feedback
On the back end, this project uses the Edamam Recipe Search API to create an app that returns the most relevant recipes from the most popular sites on the web. The API is accessed by using HTTPS GET requests on a query URL. When the request is complete, the API returns the result of the query (that is, all the recipes about a particular food query) in JSON format. The app has a single search field where a user can enter a particular food item they want to make. The user input from the search field is used to construct the query URL and display relevant recipes in the search results section of the app.
To create a personalized user experience, the app does require users to sign up for an account and log in to the app to use the various app features. This app uses Firebase and an email/password sign-in method to authenticate users. Requiring users to log in allows users to save recipes they like (which are stored in Firebase on a per user basis) so that they can view these recipes at a later time. The app allows users to remove recipes from their favorite list as well as add notes to their favorite recipes. So, each user has their very own personal Recipe box. This information is stored in the Firebase database that's used for this project, so the data is remembered each time a user logs in and logs out of the app.
On the front end side, this project uses Materialize to help create the styling and layout of the app. Materialize is a css framework based on Material Design, a design language created and designed by Google. Read the Materialize Getting Started documentation to learn more.
App is available at the following URL
http://www.mycookingassistant.com
Run these commands to set up this project locally on your computer:
git clone https://github.com/philipstubbs13/Project-Longshot.git cd Project-Longshot
After downloading the project files from GitHub, the project directory should look something like this:
- /public/assets/javascript: This directory contains the Javascript to:
- Initialize the Firebase database.
- Grab the user input from the search field when a user starts a recipe search.
- Perform a AJAX GET request to retrieve the relevant recipe data using the Edamam API, including the recipe name, the list of ingredients, an external link to more information, and an image of the recipe.
- Display the recipe data in the search results section after the AJAX request is complete.
- Save, remove, and add notes to recipes.
- Trigger modals that are used in the app.
- Hide and show app features based on whether a user is logged in to the app or not.
- /public/assets/css: This directory contains the external stylesheet used for the app. Materialize is the css framework used for this project.
- /public/index.html: This file contains the code for the HTML and Materialize css markup.
- firebase.json: This is the Firebase configuration file located in the project root directory.
- /public/assets/images: This directory contains images used for this project.
- database.rules.json:This file contains the database rules that grant permissions to users who are logged into the app.
- HTML5
- CSS
- Materialize (http://materializecss.com/)
- Javascript
- JQuery (https://jquery.com/)
- Firebase API for database hosting and email/password authentication (https://firebase.google.com/)
- Edamam Recipe Search API (https://developer.edamam.com/edamam-recipe-api)
To learn about the Edamam API and the various API parameters, read the Recipe Search API documentation.
Edamam requires developers to use a key (api_key) and an app id (app_id) to access API data. To use the Edamam API, you'll need a (free) Edamam developer account.
After you have an app key and id, you can use the API to search for recipes matching the specified query.
To get started using the app, you need to log in with your app credentials (email and password). If you don't have an account, you can sign up for one from the Log in screen.
To search for a recipe, enter the name of the food item (for example, pizza) you want to make in the Find something to make search field and click FIND. The app will return the top recipes and information about those recipes, including ingredients, the external recipe source link, the recipe title, and an image of the recipe. To see more recipes, click LOAD MORE at the bottom of the search results.
To see a list of ingredients for a recipe, click the vertical ellipses icon next to that recipe in the search results to reveal the ingredients.
To favorite a recipe, click the cutlery icon next to that recipe in the search results. After you favorite a recipe, it is added to your Recipe box.
The Recipe box is where you can view your favorite recipes. You must be logged in to use this feature as the Recipe box will be different from user to user. After you are logged in, you can view favorite recipes by clicking the cutlery icon in the top navigation bar.
To remove a favorite recipe, open your Recipe box by clicking the cutlery icon in the top navigation bar and then click the trash icon next to the recipe you want to remove.
To add notes to a favorite recipe, open your Recipe box by clicking the cutlery icon in the top navigation bar and then click the pencil icon next to the recipe you want to edit.
Additional help information is available within the app by clicking Help in the footer.
Source code will be developed over time to handle new features in the future.
The following is a list of potential user stories for a future sprint:
- Add a feature to the app that allows users to import their own recipes. For example, if a user has a hand written recipe or a recipe they want to share, they can import their recipe into the app to save it in case the hand written one gets thrown away or lost.
- Add additional search parameters that allows users to search for recipes based on the ingredients they already have in their homes.
- Add Facebook and other social authentication options to Firebase to allow users to log in with their social media accounts and easily share recipes with others.
- Integrate the Edamam Nutrition Analysis API to show users the nutritional content of meals and recipes.
- Create a separate screen for sign up. Currently, the same form is used for logging into the app and signing up for a new account.
- Integrate Materialize form validation into login screen. Currently, the app uses form validation built in with Firebase authentication.
The following are known issues to be addressed in a future code update.
If you find an issue while using the app, file an issue.
If you find an issue while using the app or have a request for a feature that you would like to see implemented, log the issue or request here.