FamousFood.us: Find the restaurants featured on your favourite TV shows

As some of you may already know, I have recently launched a new website named FamousFood.us that allows you to quickly find restaurants featured on TV shows such as Best Thing I Ever Ate, Diners Drive-Ins and Dives, Throwdown with Bobby Flay, etc.. as well as Michellin guide rated restaurants. I figure it finally time for me to write a blog post explaining the site and what I hope to do with it.

The idea for the site came from my summer road trip to Seattle. Since Nithya and I were driving up there with no specific plans we decided that we wanted to try out as many of the Best Thing I Ever Ate restaurants as we could using my existing map as a guide. Right off the bat the first problem I found was that 3 of the restaurants were literally on the same street corner which meant that you didn’t actually see them on a map until you zoomed in all the way. Secondly when you are a stranger in city you don’t really know where you are which makes it quite difficult to look up a map. And last and perhaps most importantly, the map based method was really difficult to use on a mobile phone. Web based mobile maps just are not pleasant to use on the phone.

All these issues led me to think about my requirements for a site to find TV featured restaurants
1) Must work on both PC and mobile. Should play nicely with a variety of different screen sizes.
2) Must autodetect location though users should also be able to set a different location
3) While maps are nice, lists are more important especially in mobile
4) Must be able to pick and choose from different shows
5) Show as much information about the restaurant, show and episode as possible without requiring another page load
6) Get Yelp ratings if possible

On the technical side, I had recently made some simple Nokia WRT widgets (HTML/CSS/Javascript) and I decided to use a similar setup to create a single page javascript web app rather than a complex multipage site. While this would increase the initial load time, I felt that the responsiveness of the app when loaded would be a definite plus especially on the mobile. As an added plus I had always wanted to build an end-to-end web app and this was the perfect opportunity. I would be building everything from the database and API to complete front end including all the (admittedly ugly :-)) graphics. I also got to play with some HTML5 geolocation, CSS and Javascript which was quite an instructive experience.

The first thing I did was to create a single database that included all the restaurant information that I had collected for my existing mashups of DDD, Best Thing and Throwdown. In addition I decided to add restaurants from the 2009 and 2010 US Michelin Guide. Now the Michelin guide may seem out of place in a list of TV restaurants but as the designer it was my perogative to add the things that I wanted to see ;-). The next step was to create a simple JSON API that would allow me access a distance sorted list of restaurants as well as the ability to filter based on specific shows.

Once the API was done, I moved on to creating the front end. It begins with a splash screen above that displays a spinner while it attempts to get the users location. Once the coordinates are obtained they are passed through the Google Maps geocoder to get a human readable location name. In the meantime the front end displays a list based UI which allows the user to select either “All shows” or specific show. This UI is not the most elegant on the PC but it works well on the mobile and allows me to provide reasonable functionality for both with a single design.

Once a show has been selected the web app fires off a request to the JSON api to get the nearest restaurants that fit the required criteria. The returned data is displayed as lost with the name of the restaurant, name of the episode, distance from the user and a colour coded Icon for the TV show. The users also have the option to click the “Map” button the top of the page to see the same information on a map with colour coded pins.

Once the user selects the restaurant they are shown all the info about the restaurant such as address, phone number, website, etc… as well as show and episode information. All the information is hotlinked so that the user can directly call the restaurant, get driving directions, visit the episode home page etc… with just a click. The page also fires off a request via the Yelp API and displays the current ratings and reviews for that restaurant.

And as a final mobile tweak I have setup the site such that iPhone user can directly add it as a web application to their home screen. Just tap the “+” icon in browser and select “Add to Home Screen” in the next menu. This will add a FamousFood icon to your homescreen and allow you to launch the app without having to explicitly open a web browser or select a bookmark.

And that is basically how I built FamousFood.us over a roughly 2 week period. Nithya and I used it extensively during our trip to New York earlier this month and ate at some fantastic restaurants (more in another post). Since the trip I have been adding more shows to the database and the current lineup includes Best Thing I Ever Ate, Diners Drive-Ins & Dives, Food Wars, Man V Food, Throwdown with Bobby Flay and the Michelin Guide. I have linked to site from my 3 existing mashups and am currently getting averaging about 85 hits per day. Head on over to FamousFood.us and try it out for yourself. If you like the site please spread the word (and the link love ;-))