MZ

Juliette’s Recipes

Juliettes Recipes evolved from my final project for HarvardX’s CS50, although the site as it exists today is a completely new creation. The goal for JR was to make a recipe-site that would make cooking-decisions easier based on sorting recipes by ingredients selected.

In creating a brand for the site, I (re-) designed the logo, and introduced a bespoke typeface for the site, Juli. The original Juliettes Recipes was conceptualized with a thin version of Helvetica, but was hard to read, so I specifically designed the Juli typeface to shine in very thin sizes, through it’s stocky shapes, large x-height and clear curves.

I am using highly customized Bootstrap for the layout, utilizing a custom theme, which adds green buttons, adapting the grid to fit the layout better, carousels, and numerous other changes.

Great care also went into the design of the landing page, like adding a banner showing some great recipe pictures, and direct user’s view to the content despite a rather large search box.

Part of the project was the optimizing, improving and finishing of over 100 images. To minimize load times, I am leveraging HTML5 caching of images, icons and sprites. Implemented also is the “Adaptive-Images” script to serve differently size images for different screen sizes. Mobile users will not get the same 300kb image that desktop user get, for example.

Juliettes Recipes is written in php, MySQL and Apache, is using Bootstrap with my own custom theme for layout —and a couple of JQuery Plugins I wrote.

The project’s biggest addition is a Content Management System, so big in fact I made a video just about it.

Juliette designed her own input form mockup, and I implemented it for the website. Much time went into database design. For example, because we also don’t know how many ingredients each recipe contains, JR stores the recipe and the ingredients in two separate tables—the basic recipe information in one, and the ingredient information in another, foreign key linking to the first. Categories summarizing the ingredients are stored in a third.

The input form is dynamic itself, and I am using Javascript to add more ingredient input fields to the form, as well as the option to add categories to the form on the fly, and then within that category, new ingredients. The form keeps track of tab-order, can add pictures with live preview (using HTML5 APIs), and the webshims polyfil helps with validation. Data processing, duplicate handling, sorting and inserting safely into the database is done via php. Of course, recipes can populate the same form for editing.
Juliette’s Recipes screenshots

 

MZback to Gallery