Structured Content 101: Find out how to make your content work harder (without your team working harder) →
Skip to content
View project liveShare your own project

Recipe Website Proof of Concept

Featured Project

By Simeon Griggs

An exploration of recipe data models for improved user experience

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:

  1. 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.
  2. 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.

Categorized in

Contributor

Other projects by author