Project Date: Winter 2014

Technologies: HTML/CSS, AngularJS, PHP, MySQL, Twitter Bootstrap

Computer Science House’s most famous project is without at doubt Drink, the networked vending machine that was once listed among the 10 Greatest Hacks of All Time. The project has undergone several changes over the years, including the addition of two more machines (Little Drink and Snack) and multiple rewrites of the server component. The latest server rewrite (using Node.js) also brought the addition of a web interface dubbed “WebDrink”, but it was in need of some updates. For my senior-year major project, I stepped up to the challenge and created WebDrink 2.0!

The main goal of WebDrink 2.0 was to provide an overall nicer experience. Using Twitter Bootstrap 3’s responsive components I redesigned each page with mobile in mind to create an easy-to-use site for phones, tablets, and desktops alike. I paid special attention to the admin panel, since the Drink admins - those who manage inventory, distribute Drink credits, and maintain the machines - used WebDrink more than anyone else. This project was more than just a redesign; the entire site was written from the ground-up as a single-page web app powered by AngularJS.

I also decided to facilitate the creation of other Drink clients (mobile apps, etc) by creating a RESTful API for WebDrink. Written in PHP, the API handles all drink operations - getting machine stock, updating a user’s credits, and more - except dropping, which is handled by WebDrink itself (using a websocket connection to the server). Authentication is provided by CSH’s WebAuth, or you can pass an API key with each request after generating a key in WebDrink.

Check out the live demo!

View the project on GitHub!


Here are some side-by-side comparisons of WebDrink (left) to WebDrink 2.0 (right):