/ #personal

Creating GitHub for Recipes

A bowl of karaage we made in Bellingham

My friend David and I love to cook. And for a long time, we nerded out about what makes cook­ing fun: the end­less jour­ney of mak­ing some­thing, know­ing it can be improved, then try­ing again until we’re satisfied.

In a way, this process is very sim­i­lar to ver­sion con­trol (git) for soft­ware devel­op­ment. Code is never fin­ished; there is always some­thing to improve. That’s how we feel with recipes next time, we need more spices or maybe less salt.

There’s also the social ele­ment. GitHub, in a pecu­liar way, is an amaz­ing social net­work. You fol­low smart curi­ous peo­ple, you can see the stuff they make, the things they book­mark, and the peo­ple they fol­low. It’s an incred­i­ble way to see all the cool things being cre­at­ed, and it drives you to want to cre­ate as well.

So final­ly, we decid­ed, let’s make “GitHub for recipes” in our spare time togeth­er. Every­thing is a remix and so are recipes. Every recipe is built on some­thing else, it can be “forked” and mod­i­fied by oth­ers, and we’re sure there’s a fun social ele­ment as well.

David is an engi­neer, he can do most of the cod­ing. I’m a design­er, I can design the inter­face and help out in the fron­tend. And we can shape and cre­ate the features together.

This is strictly a non-­for-profit fun hob­by. But it’s also some­thing we’ve been unwa­ver­ingly pas­sion­ate about for months. And I want to build it in pub­lic doc­u­ment­ing my process as I go.

We only have some nights and week­ends to work on this, which turns out to be a great thing. I’m using it as an oppor­tu­nity to take design less seri­ously (it does­n’t have to serve busi­ness goal­s!) and I can play around with new ideas and interfaces.

The story so far

So far, we’ve designed and imple­mented the recipe page, which I guess is the main page of the product.

It is where peo­ple view, edit, and fork recipes.

There is a rough design sys­tem I’ve been cre­at­ing: col­ors, fonts, etc. Because I have the free­dom to play around, I’m try­ing to avoid reg­u­lar bor­ing inter­face par­a­digms: the usual box­es, cards, and but­tons and so on.

I want it to look more like a print lay­out, which obvi­ously is less usable, but here I can take that liberty.

The recipe page is inspired by tra­di­tional recipe pages you’d see in the New York Times, or oth­ers: intro, ingre­di­ents, and steps.

The main diver­gence, though, is that I really want the edit­ing expe­ri­ence (which is pretty core to the entire expe­ri­ence) to feel like I’m writ­ing on the page. No abstraction.

For us, this was harder to imple­ment, but we got mostly there. Edit­ing is com­pletely WYSIWYG just click edit and write on the recipe itself. Erase the stuff you don’t want, add the ingre­di­ents and steps you need.

We’re also think­ing about units: grams, cups, table­spoons. But also impre­cise units: a lot of us cook by “eye­balling,” so we’d also need units like pinch­es, bunch­es, or maybe no units at all.

For the unit selec­tor modal, I’m try­ing to exper­i­ment. In reg­u­lar inter­faces, we would use shad­ows to com­mu­ni­cate hier­ar­chy and ele­va­tion, ie. tooltips and modals are float­ing on top of other ele­ments, there­fore, they should have shad­ows.

Here, I’m exper­i­ment­ing with for­go­ing all of that. Let’s give it a shot.

So that’s what we have so far. Next, I’ve been start­ing to design the ver­sion his­tory expe­ri­ence. How do we “diff” or com­pare dif­fer­ent ver­sions? How do we visu­al­ize the dif­fer­ences? How does “fork­ing” a recipe work?

This has been very fun and I can’t wait to play around further.