Build a Highly Interactive Web Application in No Time

Do you want to learn how to go from a web 2.0 idea to a concept that can be sold to friends and and venture capitalists alike? Just follow along.

In this post I will show you the thoughtproces that was behind the Recipebook 2.0 prototype I showed you in earlier posts. And the debugging done after Del.icio.us changed their site design and API. So it will show you a bit of both theory and practice. Perfect, not?

Because the art of visual thinking really is an art, I’ll be adding a lot of visual graphics and sketches to my posts. So have a little patience, they’ll improve over time. Here’s the basic concept of Recipebook 2.0 (click for full size).

Basically, I want something that will let me have a list of recipes of what I can make with whatever is in my cupboards. That way I don’t have to go to the store, I can just start cooking something tasty. The upside of the idea is that is much more versatile than that. You can use it to select your favorite ingredients and get some suggestions for recipes you didn’t know yet.

This is actually a pretty simple application with just a long list of recipes. For each recipe the usual stuff is stored:

  • A name
  • The ingredients
  • A short description
  • A link (to the full recipe)
  • (possibly) a picture

Also, at some point, it might be interesting to have such a list for every user. Supposedly there will be an overlap between recipe lists and there could be some kind of “master” list that holds all recipes in the system.

In most cases, one would design a database schema that can hold this information. Add some kind of web framework to the mix and start coding those pages. Nothing complicated really, but once I started thinking about it, I realized that everything already exists. Just replace “ingredients” with “tags” and you’ve got your run of the mill microcontent platform. A user has a bunch of snippets that they can tag and share. No need to start writing fancy CRUD stuff, search code or user management. It already exists. Del.icio.us immediately sprung to mind. If you don’t know del.icio.us yet, now is the time to try it out.

The only other thing I needed was some filtering and formating of the tags. I wanted to keep using del.icio.us for my normal bookmarks, so I prefixed all ingredients with “ingredient.”. That’s basically all there is to it. This diagram gives an overview of the architecture (click for full size):

If you do this kind of thing, try to use “official” API’s. Del.icio.us has always had an API to retrieve your links. However, either they didn’t have anything to retrieve tags, or I missed it. Because I was using Yahoo! Pipes to screen scrape the ingredient tags. This had the unwanted side effect of completely breaking the site when del.icio.us changed their screens. Luckely they have a feed to retrieve all your tags. From there on, it’s straightforward to filter out only the ingredient tags. Just take a look at the pipe I created. As you will notice, I’ve also added the possibility to select the del.icio.us username, which will make it possible to change the user (when I add that functionality).

I hope this first part has given you a glimpse at how you might attack your ideas and implement them. Before you program too much, first think about what is out there. Certainly for a first prototype this will do. Now show me those ideas of yours.