Learn more about this project by visiting the Canary Slide Deck.
Learn more about the developer by visiting her LinkedIn.

Canary

Bringing tasty back!

Even though food allergies are on the rise, people are often misinformed about which ingredients contain allergens. This confusion can make it difficult to make smart choices when cooking for friends and family with special dietary needs. Canary aims to provide a tool to empower chefs to identify gluten-containing ingredients in existing recipes and recommends healthy alternatives -- without sacrificing taste.

###Contents

• Overview
• Technologies & Stack
• Features
• Captures
• User Experience
• Responsive Design
• AngularJS Directives
• Forking

Overview

Canary Features a Responsive Search Interface to Explore Recipes

The homepage:

• Shows featured recipes
• Links to recipe detail pages, Yummly search, and open recipe search

Recipe detail pages:

• Shows recipe image, ingredients, and instructions
• Users can identify gluten in the recipe and swap out those ingredients for healthy alternatives
• Flour swaps are optimized for taste and texture, and suggestions are displayed in grams for precision

Yummly search:

• Shows featured recipes from Yummly API, adding gluten-free parameter
• Links to recipe detail page on Yummly

OpenRecipes search:

• Shows featured recipes from OpenRecipe project, adding gluten-free parameter
• Links to recipe detail page

Technologies and Stack

Backend:

Python, node.js, Express, Grunt
Python libraries: BeautifulSoup
Data scraping: Scraped thousands of recipes from Bon Appetit, customized scraper to access unique microformat
Data cleaning, sorting: Wrote python scripts to parse the data, clean it, normalize units, and preprocess the data to optimize client-side processes. Data modeling: Modeled data initially in SQlite, and then in Elasticsearch, creating json documents for seeding

Frontend:

JavaScript, AngularJS, jQuery.
HTML5, CSS3, RWD (responsive web design), and Illustrator for graphics.

APIs:

Yummly, Elasticsearch.

Features

#####Data Visualization and Interaction

• Dynamically display search results, updated by keystroke, with AngularJS two-way data binding
• Elasticsearch allows for free word search, returning 'best match' results, improving search experience
• Elasticsearch nodes mapped to place additional value on hits in recipe name field
• Delightful details: animated gluten identification and swap (with AngularJS directives), attention to typography and layout
• Increase rendering speed by preprocessing data, optimizing key lookup
• Create custom responsive web design (RWD) using CSS3 and material design philosophy

#####Gluten Identification and Swap

• Created an extensive dictionary of gluten-containing ingredients
• Mapped flour types to ratios consisting of taste/texture groupings by: fat, protein, density, lightness, stickiness, texture, starch, binder, and leavener
• Normalized units and quantities with information obtained from USDA documentation
• Swaps are optimized for taste and texture

#####APIs and Cross Origin Resource Sharing

• Enable cross origin resource sharing (CORS) by routing insecure API's through the express server
• Yummly API integration allows users to find additional relevant search results, prefiltered for dietary needs

Captures

###User Experience

####User Actions:

######Identifying Gluten and Swap

####Responsive Design ######Mobile

####AngularJS Elements

######Data Binding

<tr ng-show={{ingredient.show}} data-field="ingredient" ng-repeat="ingredient in ingredients"	ng-class={{ingredient.glutenClass}}>
   <td>
       <data-field="quantity">{{ingredient.quantity}}
       <data-field="unit">{{ingredient.unit}}
       <data-field="name">{{ingredient.name}}
    </td>
</tr>
<tr ng-hide={{ingredient.substitute.hide}} ng-if="ingredient.substitute.name" data-field="ingredient" ng-repeat="ingredient in ingredients" ng-class={{ingredient.substitute.glutenClass}}>
    <td>
       <data-field="quantity">{{ingredient.quantity}}
       <data-field="unit">{{ingredient.unit}}
       <data-field="substitute">{{ingredient.substitute.name}}
    </td>
</tr>

Forking?

You'll need to install node.js, bower, grunt-cli to start.

`$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`
`$ brew doctor`
`$ homebrew install -g node`
`$ npm install -g bower`
`$ npm install -g grunt`

Use bower and npm to install dependencies.

`$ bower install -save`
`$ npm install -save`

Launch Elasticsearch.

`$ cd elasticsearch/bin/elasticsearch`

Launch server.

`$ grunt serve`

I'm happy to answer any questions you may have or help with installation.