Skip to content

Latest commit

 

History

History
187 lines (143 loc) · 7.86 KB

README.md

File metadata and controls

187 lines (143 loc) · 7.86 KB
Raw

Recifilter logo

Video Demo

Description: A recipe-filtering web application that lets users, with or without complex dietary need, find and bookmark recipes from the internet.

Deployment

https://recifilter.pythonanywhere.com/

Technologies

  • Flask
  • Python
  • SQLite
  • Javascript
  • jQuery
  • HTML
  • CSS
  • Bootstrap 5

Installation

  • Clone / fork this repository.
  • Create a virtual environment in your local Recifilter directory.
  • Install the required libraries that are listed in requirements.txt.
  • Sign up to Edamam's Recipe Search API to get your own API_ID and API_KEY.
  • Save your API_ID and API_KEY somewhere you can easily copy and paste in a format like this (replace 123456789 with your API_KEY and API_ID):
export API_KEY=123456789
export API_ID=123456789
  • Copy and paste your API_KEY and API_ID to terminal:
$ export API_KEY=123456789
$ export API_ID=123456789
  • Run the application:
$ python3 app.py

Features

Login / Register Page

Login page Register page Users have to create an account prior to using this application. Validation is implemented in both front end and back end. Users have to provide a name (which will be used to greet users in the index page), a minimum of four-alphanumeric-characters username that will be used to identify which user has logged in, and a password. The password stored in the database is hashed first, but for safety measures, PLEASE DO NOT USE YOUR ACTUAL PASSWORD!

Index Page

Index page Index with input Users can find recipes by ingredients / keywords in the text field, by checklists, or a combination of both. Input will be sent to back end via get request since we're only using it to retrieve a JSON data from the API.

  • Text Field

The index page consists of a text field that can be added or removed dynamically with javascript (tutorial can be found here). Empty value in the text field is handled in the back end e.g. if users added four text field but only typed in two, the back end will recognize it as two keywords and the headline in the result page will only show these two keywords. User can also use the text field as it is, but a comma separated keywords is expected for this method.

  • Checklists

There are four different categories available. Description of each label is taken from https://developer.edamam.com/edamam-docs-recipe-api:

  1. Dish Type

    Will return recipes that match with at least one label (if user checked more than one).

    • Starter
    • Main Course
    • Side Dish
    • Drinks
    • Desserts

  2. Diet Labels

    Will only return recipes that match with all the checked labels.

    • Balanced: Protein/Fat/Carb values in 15/35/50 ratio.
    • High Fiber: More than 5g fiber per serving.
    • High Protein: More than 50% of total calories from proteins.
    • Low Carb: Less than 20% of total calories from carbs.
    • Low Fat: Less than 15% of total calories from fat.
    • Low Sodium: Less than 140mg Na per serving.

  3. Allergies / Restrictions

    Will only return recipes that match with all the checked labels.

    • Alcohol-Cocktail: Describes an alcoholic cocktail.
    • Alcohol-Free: No alcohol used or contained.
    • Celery-Free: Does not contain celery or derivatives.
    • Crustacean-Free: Does not contain crustaceans (shrimp, lobster etc.) or derivatives.
    • Dairy-Free: No dairy; no lactose.
    • DASH: Dietary Approaches to Stop Hypertension diet.
    • Egg-Free: No eggs or products containing eggs.
    • Fish-Free: No fish or fish derivatives.
    • FODMAP-Free: Does not contain FODMAP foods.
    • Gluten-Free: No ingredients containing gluten.
    • Immuno-Supportive: Recipes which fit a science-based approach to eating to strengthen the immune system.
    • Keto-Friendly: Maximum 7 grams of net carbs per serving.
    • Kidney-Friendly: Per serving – phosphorus less than 250 mg AND potassium less than 500 mg AND sodium less than 500 mg
    • Kosher: Contains only ingredients allowed by the kosher diet. However it does not guarantee kosher preparation of the ingredients themselves.
    • Low-Potassium: Less than 150mg per serving.
    • Low-Sugar: No simple sugars – glucose, dextrose, galactose, fructose, sucrose, lactose, maltose.
    • Lupine-Free: Does not contain lupine or derivatives.
    • Mediterranean: Mediterranean diet.
    • Mollusk-Free: No mollusks.
    • Mustard-Free: Does not contain mustard or derivatives.
    • No oil added: No oil added except to what is contained in the basic ingredients.
    • Paleo: Excludes what are perceived to be agricultural products; grains, legumes, dairy products, potatoes, refined salt, refined sugar, and processed oils.
    • Peanut-Free: No peanuts or products containing peanuts.
    • Pescatarian: Does not contain meat or meat based products, can contain dairy and fish.
    • Pork-Free: Does not contain pork or derivatives.
    • Red-Meat-Free: Does not contain beef, lamb, pork, duck, goose, game, horse, and other types of red meat or products containing red meat.
    • Sesame-Free: Does not contain sesame seed or derivatives.
    • Shellfish-Free: No shellfish or shellfish derivatives.
    • Soy-Free: No soy or products containing soy.
    • Sugar-Free: No sugar.
    • Sugar-Conscious: Less than 4g of sugar per serving.
    • Sulfite-Free: No Sulfites.
    • Tree-Nut-Free: No tree nuts or products containing tree nuts.
    • Vegan: No meat, poultry, fish, dairy, eggs or honey.
    • Vegetarian: No meat, poultry, or fish.
    • Wheat-Free: No wheat, can have gluten though.

  4. Cuisine Type

    Will return recipes that match with at least one label (if user checked more than one).

    • American
    • Asian
    • British
    • Caribbean
    • Central Europe
    • Chinese
    • Eastern Europe
    • French
    • Greek
    • Indian
    • Italian
    • Japanese
    • Korean
    • Kosher
    • Mediterranean
    • Mexican
    • Middle Eastern
    • Nordic
    • South American
    • South East Asian
    • World

Result Page

Result page Recipe's modal

Recipes that match users' input will be shown as cards in this page. These cards will only show minimal information for users to skim through. A click on these cards will show more information of the recipes via Bootstrap's modal. Users can go to the recipe's source link or add recipes to bookmarks from here.

Bookmarks Page

Empty bookmarks Bookmarks Similar to the result page, recipes that are saved in this page will be shown as cards and bootstrap's modal is used to show more information about the recipe or to remove it.

Settings

Settings Users can change name, username, and password in this page. Validation is implemented in back end. Vertical tab tutorial can be found here.

  • Name

    Name Users are free to use their name, a single letter, or even an emoji to be their name. Name will be displayed in the index page to greet users.

  • Username

    Username Username should contain at least four alphanumeric characters. Username is unique and used to identify which user has logged in.

  • Password

    Password Password should be a minimum of eight alphanumeric characters and should not contain trailing spaces.