Recipe page

This is the core experience and something we thought the most about.

For us, the functionality we needed on the recipe page was quite obvious:

1. Create recipes from scratch

2. Edit existing recipes

3. Fork recipes and use them as a starting point (we call this “remix”)

The tough part would be nailing down what the recipe page looks like and how people interact with it.

We want it to be a simple — just start typing, starting creating. But as you use it more, you start finding new things you can do, you start growing into it.

In tangible terms, we wanted to make an experience designed specifically for recipes. This means:

• WYSIWYG (what you see is what you get)

• A proper data structure

What you see is what you get

Our ideal experience is WYSIWYG.

This means when you are editing the recipe, you are directly interacting with the end result. The page you are editing is the exact same page others will see.

This sounds obvious. But most recipes you see aren’t created this way.

Most recipes are written in WordPress, a tool for making blogs. You would write the ingredients and cooking steps in an abstracted format and when you press “save,” they get transformed into a recipe page.

Basically, you are not writing a recipe. You are a writing a blog post that gets converted to look like a recipe.

This is fine if the end result is all that matters. But we believe tools matter and good tools help us think and help us create better things.

In our case, we hope a better tool helps people have more fun experimenting with recipes.

We are heavily inspired by Notion here. It’s a tool that anyone (like students or marketing people) can just pick up and use, and use at a high level too. It’s also a tool that people want to use. Find me anyone that wants to use similar tools like OneNote or Confluence.

A proper data structure

It’s a little silly bringing up data structures while discussing good user experiences. But we are making a GitHub for recipes after all, and it really matters here.

As mentioned above, traditionally people write recipes in WordPress. It may look fine thanks to plugins and CSS. But in the backend, all you have are paragraphs of text, undifferentiated from each other. You can’t take that data and do anything meaningful with it.

For us, a proper data structure for recipes unlocks so many things we want to do.

We know what the ingredients are (chicken thighs), how much we need (2), and in what units (pounds). This means we could do conversions (display the amount in kilograms instead), or we could suggest alternatives (maybe use chicken breast if you want something more lean).

We know a recipe is made of many parts. For example, a chicken katsu curry is actually made of 2 separate parts: Japanese curry sauce and chicken katsu.

Chicken katsu isn’t exclusive to curry. You could make a chicken katsu recipe, then reuse it in other recipes like a curry or a sandwich. Later, when you refine that katsu recipe, it’s also updated everywhere else.

There are so many interesting things we could do in the future, and a proper data structure lays the groundwork for all of that.

Fun bits

It’s not done yet, but there are many micro details we had fun designing and making!

Tiptap

We use Tiptap to power our editor. It does the small things right and makes writing a joy.

Fractions

It turns out fractions are used a lot in recipes, especially in America. 3/4 cup of this, 1 1/2 cup of that.

This isn’t an issue if we didn’t care about data and just treated everything as a string. But we do care!

Handling it so that when you type fractions, we recognize it as fractions, and still store that as a number so we can manipulate it later was fun. And it gets messier when you have mixed fractions (1 1/4 cup of sugar). Just use grams, man!

For me personally, I want to use Test Kitchen as a design playground. I can try things that might be too weird or too unconventional. Anyways, a small thing is I want to use monospace fonts.

Typically, you can probably only use monospace for variableNames or code blocks. Here, we use it for ingredient amounts and units. I think it adds a fun nerdy flair. I hope people like it.