FoodStash

Overview

Problem/Motivation

Recipe sharing at present is a cumbersome and disconnected process, offering little visibility or potential for collaboration among amatuer cooks and chefs. There are a variety of ways that recipes are shared including through websites and blogs. Despite the prevalence of recipe sharing, there are currently no platforms designed with power users in mind that offer advanced features such as collaboration and version control. Foodstash’s goal is to provide people with a robust platform for recording, preserving, sharing, and collaborating on recipes.

Users

Kitchen power-users and cooking enthusiasts who enjoy collaboration, experimentation, and preservation of recipes.

Logistics

  • Duration: April 2018
  • The Team: James, Chris, & Robby
  • My Role: Research, Design, Development
foodstash mobile interface

Research & Results

To get a better understanding of the current tools and means by which recipe sharing takes place online, I researched a variety of online recipe platforms and looked through cooking blogs. In order to develop a deeper understanding of the strengths and weaknesses of these platforms and understand how users interact with them, I interviewed a variety of individuals who enjoy cooking and often use online resources to locate recipes. Many people that I interviewed reported that blogs played a significant role in how they discovered new recipes and often shared them with other friends. People often curated a collection of blogs and recipes to preserve their favorite ones through a variety of ways. In addition, my research also found that people typically made slight modifications of their favorite recipes over time.

Design

Based on my research, I identified a compelling opportunity that was lacking in other platforms— a version control system for recipes. This system for would enable people to freely experiment with both collaboratively and alone while preserving previous iterations.

I came up with a series of core tasks that users in the platform should be able to achieve.

  • Add recipes to recipe database
  • Search for recipes by name, category, and required ingredients
  • Rate recipes
  • Make derived version of recipes within recipe page to iterate on an existing recipe
  • Select and view previous iteration of a recipe
  • Select two iterations of a recipes and select compare to view a summary of the differences between the recipes
  • Create and add recipes to a virtual cookbook

Following this I made a series of wireframes to plot out the various screens and their relationships that would exist within the platform.

foodstash wireframe

Implementation

I created the application in a fairly short time-frame (~ 1 week) using React.

The following are the technologies powering the application.

  • State management with Redux
  • Authentication using JSON web tokens and bcrypt
  • Client-side routing with React Router
  • Responsive mobile-first CSS Grid/ Flexbox Layout