Eric Douglas Pratt

Eric's Cocktail Guide

(2020 - Present)

Try it live here!

I enjoy making craft cocktails at home. For years, I kept a hand-written drink journal of my favorite recipes, but eventually it became tedious enough to find specific recipes in there that I decided to build a site with full search and filtering capability.

The homepage of Eric's Cocktail Guide.
Table of Contents

Technical Milestones

When I created the site in April 2020, the site was a one-page list of cocktail recipes, with basic search and ingredient filtering capability. I used create-react-app to set it up, customized buttons and modals from Material UI, and built a simple custom search function. I hosted it on this domain at ericdouglaspratt.com/cocktails.

Screenshot of the initial, one-page cocktail site
The first phase of the cocktail site: a one-page list of cocktails, with recipes popping in a modal upon selection.

The site continued to grow from there. I added more quality recipes, deepened the site's functionality, and launched it on its own domain name:

  • May 2021: Added react-router and split the site into three pages: Home, Explore, and Recipe
  • Sep 2021: Major enhancement to search, with responsive suggestions pane and "next best" ingredient recommendations
  • Feb 2022: Converted site from client-side-only React app to NextJS app with server-side rendering for better SEO and social previews. Converted to CSS Modules. Switched hosting to Heroku and launched on ericscocktailguide.com.
  • Mar 2022: Added two features to the Recipe page: strength comparison charts and "You May Also Like" recipe recommendations, generated from matching combinations of uncommon ingredients
  • Apr 2022: Added liquor brand recommendations as "Eric's Top Choices" to single-ingredient Explore pages, ranked by most commonly called for in my recipes

Home Page

The goal of the home page is to serve as a concise introduction to the site's capabilities and to highlight new content for returning users.

I'm always trying out new cocktail recipes at home. If they're tasty enough to make the cut, I add them to the site. If they're especially incredible, I keep a space at the top of the home page to feature two of the latest and best cocktails.

Below that, I wanted to immediately provide a way to jump into the core of the site's experience: the Explore page. I created a set of responsive link panels that not only link directly to a list of recipes with a common base spirit, but pull out images from the top three cocktails in that category to give the user a sense of what they'll be seeing if they click on it.

The Home page, showing two featured cocktails, links to explore by various base spirits, and a Newest Additions carousel.

Third in priority on the home page is a carousel of the most recently added cocktail recipes, with a link to see all recipes, sorted by most recent first. This helps returning users (and myself) quickly access the newest recipes.

Below that, I showcase various manual and programmatic collections of recipes, based on the time of year and what I'm interested in highlighting.

The lower part of the Home page, showing various rotating collections of recipes.

Explore Page

The Explore page is the heart and soul of the site, with the most sophisticated interactivity. It allows you to quickly browse recipes that contain any ingredient you're interested in, as well as put in your entire liquor and fresh ingredients collection to have the site recommend what you can make with what you have. It's still a work in progress, and I have various improvements in mind for the future.

Zero State

The zero state hints at its filtering capability by showing several dotted-line filter button suggestions up top, while showing recommended recipes below and all remaining recipes after that.

The Explore page with no active ingredient filters.

Single Active Filter

When a single ingredient filter is selected, the Explore page not only shows you recipes containing that ingredient, it also shows you the top brands of that liquor that I use in a section called Eric's Top Choices. The list is ranked by how often I call for a specific brand in my recipes, and is meant as a guide to people branching out into a new spirit or liqueur and wondering which brands to buy. This is a fairly new feature, and I expect to deepen this functionality in the future.

Like many e-commerce sites, each active ingredient filter is a button up top, and clicking it removes that filter. The Explore page also has the stealth capability to exclude an ingredient from the results if you prepend a "!" in front of that ingredient in the URL, but I haven't yet figured out a simple and intuitive way to expose this in the UI. In the future, I'll likely add a Filters modal that can expose more complex options.

The Explore page with a single ingredient filter selected: mezcal.

Multiple Active Filters

When multiple ingredient filters are selected, the Explore page adjusts its recipe grouping algorithm to show you the following categories, in order:

  1. Recipes that can be fully made with the selected ingredients
  2. Recipes that need only one additional ingredient beyond the ones that are selected
  3. Recipes that need only two additional ingredients beyond the ones that are selected
  4. All remaining recipes that match any one or more of the selected filters
The Explore page with eleven ingredient filters selected.

Rather than separate each category with a full-width header, I use a small descriptive badge above each cocktail image to highlight which group it belongs to, and, if only one ingredient is needed, to specify which one. This allows the grid of cocktails to keep flowing unbroken, fitting more recipes in the viewport and facilitating a quicker decision about which one you want to make!

The Explore page with eleven ingredient filters selected, scrolled to show more of the one-ingredient-needed badges.

Next Best Ingredients to Buy

Another useful feature is the "next best ingredient" suggestion list that appears in the zero state of the search pane when a search term hasn't been entered yet. This will recommend which filter to add or which ingredient to buy that will enable you to make the most additional recipes, based on the ingredients you already have selected. I go into more detail on this in my article on building the search feature.

The Explore page with eleven ingredient filters selected and the search pane active.

Sorted Results

Another new feature that's not fully exposed yet in the UI is sorting on the Explore page. At the moment, you can only access this view from the "See All" links on the "Newest Additions" and "Low ABV" carousels on the homepage.

The sort filters that are currently available are: newest, oldest, weakest, and strongest. If any ingredient filters are active, the sort filter will be ignored (for now).

The Explore page with the "newest first" sort filter active.

Recipe Page

The Recipe page starts off pretty simple: it has an image of the cocktail, the name, the list of ingredients with their amounts, and the instructions to make the drink. Each ingredient is a link to the Explore page to browse more recipes containing that ingredient and see the recommended liquor brands for each.

The Recipe page showing the recipe for The Drink of Laughter and Forgetting, one of my favorites.

Strength Comparison Charts

The goal I wanted to achieve with these two charts was to give specific but easily-digestible information on how strong a drink is, while also showing at a glance how it compares to most other cocktails.

Because drinks can vary in volume, merely showing the ABV percentage could be misleading as to how much alcohol you're consuming in total. So I decided to show both an ABV percentage statistic and a total alcohol statistic, measured in standard shots.

You can see the value of this approach in the final screenshot: measured by ABV, the drink is relatively weak, but because it has a larger volume, that raises the total alcohol content to more than you usually find in the average drink (i.e. this one will sneak up on you).

Examples of the strength comparison charts, for cocktails that are weak, average, strong, and weak but larger overall volume.

Relative comparison to the universe of cocktails is shown via the line's position on the chart, and reinforced through the text description. Graphing it on a bell curve subtly illuminates that I am using standard deviation calculations to determine which description to use.

The specific number is also easily seen for those who want the exact data. I chose to show total alcohol in shots rather than ounces to make it more directly relatable to how people consume alcohol (i.e. you don't generally drink ounces of 100% pure alcohol).

"You May Also Like" Recommendations

The recipe recommendations algorithm is a continual work in progress. The ideal I'm striving for is to provide three different branches off of each cocktail that would allow someone to best choose their next drink, based on the flavors they like best.

The recommendation algorithm is currently on version two. Version one found the least common ingredient in the cocktail that was also contained in at least one other recipe, and listed out those other recipes as recommendations.

Version two balances a number of factors, but generally looks for other recipes that contain similar unique combinations of less-common ingredients in roughly the same amounts.

Examples of cocktail recommendations for the Death By Morning and the White Negroni.

As you can see above, I don't simply list the recommendations, I explain why those recommendations were chosen. That's a general principle of the site I try to hold to, in order to build trust and, in this case, to help users choose which cocktail they'd most like to have next. The best part of this feature is watching the recommendations get better and better as I add more cocktail recipes to the site!

"Similar Ingredients" Comparison Table

This feature has some overlap with the recommendations section but with a slightly different purpose and visualization method. Like a product comparison table on an e-commerce site, it compares the current recipe and its ingredients to other recipes with a list of ingredients that are at most two add/remove moves away.

For ease of comparison, it keeps the list of ingredients in the same order as the original recipe and highlights the substitutions or new additions.

Examples of ingredient similarity tables for the Water Lily, Caprice, Manhattan, and Boulevardier.

As you can see above, this is especially helpful in detecting when recipes are related to the classics, such as the Manhattan, Martini, and Negroni. Because I often prefer to try out new recipes with unique combinations of ingredients, only about one-third of the cocktails on the site are similar enough to others for this table to show up.

Search Pane

The primary method to navigate the site is through the search function, especially on mobile. It allows users to search for specific recipes (which takes them to the Recipe page), as well as any ingredient that appears in one of my recipes (which takes them to the Explore page for that ingredient).

Search suggestions displayed during a search for "ama". The ingredient that matches the most recipes is listed first.

For more detail on the search feature, visit my deep-dive article on the topic: Crafting a Responsive Search Bar with Intelligent Autocomplete.

Conclusion

In all, Eric's Cocktail Guide has been a fun and challenging project to create from scratch. It enabled me to continue working with React and hooks while also diving into NextJS and server-side JavaScript for useful SEO. It provided the opportunity for me to finally try out Heroku, Amazon's Route 53, and Heroku's automatic GitHub CI pipeline.

It's also allowed me to hone my graphic design, photography, and UX skills, bringing several patterns from the e-commerce world into a curated experience I believe is superior to many of the cocktail site alternatives out there.