grace teng

See Mister Cocktail

Github Repo for Mister Cocktail

About Mister Cocktail

Mister Cocktail comes at the end of week 6 of Le Wagon's Full-Stack Web Development bootcamp, and it is the first chance for students to synthesise everything we've learnt into a single Rails project.

The assignment is simple: build a cocktail recipe manager. Users should be able to perform the following actions:

In order to do this, I needed to:


After the bootcamp, I returned to my Mister Cocktail project with two main goals:

  1. Paginate the cocktails#index page: my Mister Cocktail seed pulls every cocktail beginning with the letter A, then B, then C, and so on, until the API stops responding or the Heroku dyno terminates the process, which usually happens somewhere between the letters N and T. That's hundreds of cocktails, and having 371 pictures of cocktails load on the index page is a suboptimal experience. I used the Pagy gem to paginate them, resulting in a faster load time and an improved user experience.
  2. Improve responsiveness: we're given two days to complete Mister Cocktail, and at the end of those two days my layout was not fully responsive. Cocktail images would extend past the viewport width on mobile devices, and text would align oddly when the viewport shrank below certain breakpoints. I reworked the layout a little to make it display properly on screen sizes as small as an iPhone SE (320 x 568). There's still a misaligned button that bothers me a bit... but I've decided to put this project down and move on to other things.


Mister Cocktail was the first Rails project I did that felt like a real web application. I've since built bigger and more complex Rails projects, but I have a great appreciation for the fundamentals that we had to learn in the bootcamp in order to truly understand the plumbing of Ruby on Rails. Mister Cocktail laid the groundwork for what I've since been able to accomplish with Rails.