Make me a Cocktail
Brief
To build and design the worlds best cocktail resource with a USP of a well designed and functional My Bar feature, allowing users to enter what ingredients they have, and the system showing them what cocktails they can make.
As well as this, the brief included the ability for users to add cocktails to their own bespoke lists, secure voting mechanisms and a user reward mechanism with badges and loyalty points. Throw in a blog, technique, equipment and a large ingredient database, our brief included making this often complex and content rich site into something simple and intuitive to the user.
Challenges
The core challenge I first encountered was how to integrate the USP My Bar feature, allowing users not only to enter what ingredients they have, and show them results based on this, but to run this through a complex ingredient to cocktail database showing results in an instant, while often having to run complex and longer running queries. After having accomplished this I next set my sight on how to offer users suggestions on ingredients to buy next to give them the most bang for their buck in terms of cocktails they can make.
As the build progressed new challenges kept on presenting themselves, and one that I was adamant to solve was site speed and the responsive build. Not only for great SEO practice, but to ensure the site would work quickly and responsively over all devices and network speeds, I spent a long time analysing database calls, optimising PHP and JS functionalities, and learning a lot about caching and deferring JS as needed.
The site as a whole offered up many more challenges, but every one was overcome and polished up to the high standard I set myself for the site.
Build notes
With such a diverse range of functions the site had to achieve, yet maintaining a common design and brand, I tackled the project in two ways. Firstly from a stylistic point of view I took the site as a whole and recognised common design elements to start creating a library of classes and widgets that could be utilised throughout the site. With 90% of the design elements covered I could then tackle the backend coding and programming for the multitude of functions.
With such a diverse range of functionality on the site, I took the site as a whole and started to sketch down a rough class and database schematic that would prove to be the basis for the site. Noting down and programming in all the functions I could theoretically see the site needing, then gave me a great foundation to build on top off, and allow me to write classes to call functions, even if those functions were not complete yet.
This whole build worked from these two core foundational elements, building the site up from there, writing class methods and stylistic elements as each site block was programmed up.
After the site was complete in this way, we then tackled the complex situations of caching, speeding up methods and minimising database calls, to try and alleviate the work that the site had to do, for often very complex and demanding tasks.
Overall the build took around 4 to 5 months, including data migration from an older site, but what was developed in the end was ground-breaking in the cocktail world, offering functionality for drink lovers that had not been seen in this business area.
Technology used
Built on top of a solid PHP platform, running a MySQL database, I utilised jQuery and a host of specialised JS libraries, along with over 4000 lines of bespoke javascript. With this amount of code, code organisation was key with ES6 javascript classes running through Babel ensuring we kept a clean separation of concerns.
Gulp was used for the heavy workload of pre-processing all this data, which ran a bespoke JSCS checker and complexity tool to ensure I was keeping everything to standards, that in the long term would prove invaluable for site upkeep and maintenance.
With such a wide reaching brief quite a few outside libraries and API's were utilised, from Facebook and Twitter social sharing and sign in, to Google Video and Website Results API's, along with social network feeds to display cocktail live updates.
I also integrated auto posting to Twitter and Facebook, and live RSS updates to help with outside sources and marketing off the site. All this and I'm only scratching the surface of the technology that was utilised to build this amazingly powerful yet sleek and intuitive site.
Make me a Cocktail
From initial concepts to launch of the new version of the cocktail website, the process was hugely rewarding, often complex yet not overwhelming and tackled in a methodical and sensible way. The final website?is one that I am most proud off, taking?a host of different technologies and methodologies, and melding?them into one seamless website that is so much more than the sum of its parts.
I think it’s time for a drink….