(2020 - Present)
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.
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.
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:
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.
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 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.
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.
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.
When multiple ingredient filters are selected, the Explore page adjusts its recipe grouping algorithm to show you the following categories, in order:
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!
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.
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 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 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).
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).
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.
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!
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.
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.
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).
For more detail on the search feature, visit my deep-dive article on the topic: Crafting a Responsive Search Bar with Intelligent Autocomplete.
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.