Proofessor

A Drink Mixing Web App

intern planning

When You Tell College Kids to Make "Anything"

Viget HQ Intern Team:

Jo-Yee Pang: User Experience Design
Eli VanAlsburg: Interface Design, Illustration
Erica Bond: Project Management
Jatin Sharma: Marketing Strategy


We wanted to create something we could use — something tangible that we could share with others.
the Proofessor

How it Works:

Select what spirits, liquors, or mixers you have available and would like to use. Then, the available recipe list filters down to fit your selected parameters. You'll have a refined list to select a recipe from and learn how to make it. If you're indecisive like me, simply shake your mobile device, and Proofessor will flip to a random recipe for you. Check out the bottom of this page to try it yourself!

Wireframes Me Working

Building with Craft

Craft is a beautiful, new custom content management system, created by Expression Engine developers Pixel and Tonic. Version 1.0 was released just a few weeks before Proofessor was conceptualized. Craft lets you create completely customized fields, pages, and forms for clients to have a visual back-end to update their website through, while using Twig as a templating engine to access this data. I wrote about the CMS on my blog here and about how to set it up from scratch on a Mac here.

Using Craft enabled the leanest possible approach to building this very information-driven project. After the system was set up, the project manager (Erica) and marketing intern (Jatin) spent time inputting recipes, icons, and fun facts, while the designer (Eli) and I continued to work on the animations and design.





Craft CMS Craft CMS
proofessor logo
drinks

It's the Little Things

I am definitely a strong believer that the nuances of a project are what make it. I made sure to include touches (in the form of CSS animations, in this case) to just add that little bit of sparkle. The logo mustache wiggles a little on hover, and the bottles flip and gray out when selected (they all flip back when "reset").

But not all of the animations planned actually made it into the production code. Originally I worked on a function to make the recipe count tally up and down upon changes, and the bottles to drain when selected, however I learned to let go of these fun quirks when they became too "expensive" for the browser to handle. I was taught to be a defender of simplicity and understand when to say no.

As a front end developers, we often want to say "yes" to everything, but knowing when a task is too expensive (when to say 'no') is an important skill to have.
Phone Shaking

The Proofessor Playground

I learned SO much about Javascript code from this project, and really had a chance to "play around" with different interactive functions. From playing with shaking (left) to reading the recipe count, it was important to be stay organized. The code was re-factored over and over, but turned out to be something I was very proud of: clean, object-oriented, and name spaced. I organized it mostly based on this model:



window.PROOF || (PROOF = {}); //define a namespace (only ONCE) -- I used PROOF for Proofessor
(function($, window, document, undefined) {
  var _common = PROOF.common = { //this is your js object
    init: function() {
    this.setVars();
    this.bindEvents();
  },
  setVars: function() {
    // set all variables here
    this.helloString = "hello" ; // also _common.helloString
  },
  bindEvents: function() {
    // set event listeners for your functions here
  },
  // the rest of your functions go here
  _common.init(); // don't forget to init!
})(jQuery, window, document);
FED + Des Room Proofessor Proofessor

Try it Yourself: