Skip to content

Recipe Website Proof of Concept

Featured Project

An exploration of recipe data models for improved user experience

By Simeon Griggs

Project Shots

Ingredients and units of measurement

Method "Components" with per-step ingredients repeated

Editing environment

Ingredient schema with alternative names and per 1-cup measurement for live conversions

Custom Component: Ingredient selector in Recipes, including live feedback on conversions

Custom "Method" Component. Creates references to array items in the same document.

Recipe schema showing sets of ingredients and different types of components for the method

About the project

Like a lot of people in lockdown the kitchen has been my escape. But what makes so many recipe websites difficult to follow?

To a developer, any recipe is a collection of components with a complex – but easily modelled – data structure. So eventually I just had to build the website I'd been building in my head every time I was trying to cook!

On the Sanity side the project has two custom components:

One to do live unit conversion while entering ingredients. Enter an amount in grams and see ounces. Enter ounces and see grams. Works for volumes, too.
Another to reference the array of Ingredients used in the recipe, along side each step of the method. It's like an in-document reference. Since Sanity gives every array item a unique Key, this was quite simple to do.

The result is a front-end that does live conversions of amount types, as well as adjustments for serving sizes, and continuous feedback about the ingredient list while reading the method. All powered by a well-structured data model for the recipes and ingredients.

For more details please read my full walkthrough of the Recipe Website project on my blog.

Contributor

Simeon Griggs

Customer Education at Sanity

Related contributions

House Estate Agents

Data modelling with dynamic data imports

Simeon Griggs