Recipelist was created after identifying a common problem Pinterest users experience when trying to organize ingredients from several recipes they have saved.

For many people, Pinterest serves as the primary platform for saving meals and recipes. It even provides the user with useful information upfront, like ingredients and their quantities.

However, it becomes difficult for the user to prepare a grocery store trip or compile a list of ingredients to buy online because recipes can only be viewed one at a time and ingredients couldn’t be compiled into a single list. Recipelist solves this problem.

Pinterest made retrieving data straightforward by providing well formatted data within their API. This included formatted ingredients, including categories and amounts.

While creating the strategy for the tech stack, I considered the cross-platform nature of the application. UI and logic was consistent between the two platforms. However, there was a decent amount of data that needed to be stored on the product’s database. Rails was chosen for this task because it could easily render the front-end site, create database models, and integrate with a GraphQL controller layer.

Application logic between the desktop and mobile apps were able to be shared since both of the front-ends relied on React and React Native, respectively. This was especially beneficial for the Redux stores, as the states were identical across platforms.

Given that Recipelist would be used in tandem with Pinterest, it was important that the experience felt familiar and easy to use. Concepts like “Boards” and “Pins” needed to be represented in ways that users would recognize easily.

Grouping ingredients by category helps organize ingredients that may be near each other while in a physical grocery store space. Ingredients can be checked as done and the “Clear All” button removes all ingredients when a grocery trip is complete. These additional design considerations are complementary to many user’s expectations and behaviors when grocery shopping.

The application was first built out as a web application that was a single page application. Pinterest boards and pins were displayed on the left two thirds of the page with the running list of ingredients displayed on the right.

The web application is also fully responsive and provides a smart banner to download the native application.