A cocktail being poured from a stainless steel shaker over a large rock. Surrounded by two lemons, fern sprouts, and succulents. Painted cement background.
A cocktail being poured from a stainless steel shaker over a large rock. Surrounded by two lemons, fern sprouts, and succulents. Painted cement background.

Barkeep Journal

Barkeep Journal is a new and exciting project with ambitious plans. It is a simple, clean, and quick personal reference for cocktails.

It features many classic cocktail recipes plus some additions fellow bartenders & I have made along the way.

Cheers

Bartending and drinking culture have always been influenced by social trends. So naturally, taste preferences tend to ebb and flow.

Drinks change with time becoming drier or sweeter, being served in different glassware, or evolving entirely into something new.

Cocktails fall in and out of favor. Some have changed little, if at all, since their inception.

Barkeep Journal will keep you up to date as a quick reference for your favorites cocktails. No need to scroll eight times to get to the recipe!

Current features

A simple and easy-to-use UI to search for what you want or explore the current list of cocktails.

Exploring cocktails is made easy by various options: navigation, searching, or filtering.

Navigation

Radix UI’s Tab component makes up the logic behind this fun element. Each tab will sort the list by the base liquor used in the recipe.

The sliding tab animation uses Framer Motion’s LayoutGroup component.

Search bar

Need to find something specific quickly? The search bar makes that easy.

Currently, cocktails can be queried only by name. In the future, the search will include ingredients.

However, the most concerning issue is its lack of accessibility.

Which headless UI component would be best for proper ARIA attributes and keyboard navigation? Reach UI’s Combobox seems to be a good fit.

Any suggestions would be greatly appreciated. Please feel free to send me any suggestions.

Filter

Another component brought to life using Framer Motion.

A simple element that opens up a menu to allow filtering by how the cocktail is built.

Clean & minimalist

What started as a quick test of the Remix framework became excitement to begin a project I am very passionate over.

The typography and the color palette set a classic yet whimsical mood. Inspired by Débora Linhares's Instagram post it gives the website a unique personality.