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.
