Overview
The Cocktails Browser is a user interface that allows users to browse and filter a list of IBA cocktails and other popular drinks. It offers various features such as browsing cocktails, maintaining a personal bar inventory, filtering by ingredients and categories, favoriting cocktails, and integration with TheCocktailDB for enrichment and cocktail images. The application is built using functional components and React hooks. It is a small pet-project and a work in progress.
Features
- Browse all 77 IBA cocktails: Users can explore a comprehensive list of 77 IBA cocktails.
- Maintain your bar: Users can keep track of their personal bar inventory by describing what they have at home.
- Filtering options: Users can filter cocktails by ingredient, category, glass type, vegan status, or if the cocktail can be made using the ingredients from their bar.
- Favorite cocktails: Users can mark their favorite cocktails for quick access.
- Integration with TheCocktailDB: The application is integrated with TheCocktailDB to provide additional enrichment and access to cocktail images.
- Persistence: The application supports local browser storage for storing data.
- Configurable color schemes: Users can select and customize the color scheme of the interface.
- Measurement options: Users can view measurements for ingredients in parts, milliliters, centiliters, or ounces.
- Pro-mode: Users can have measurements replaced with bartender lingo like “Jigger” and “Pony”.
- Installable on smart devices: The application can be installed on smart devices using the PWA (Progressive Web App) functionality or by adding it to the home screen.
Installation
To run the Cocktails Browser locally, follow these steps:
- Make sure you have Node.js and npm installed on your system.
- Clone the repository to your local machine.
- In the project directory, run
npm installto install the project dependencies. - All the data is stored in JSON files under the
src/datadirectory, so there is no need for a server or database setup.
Summary
The Cocktails Browser is a user-friendly application that allows users to explore and filter a vast list of cocktails. With features like maintaining a personal bar inventory, filtering by ingredients and categories, and integration with TheCocktailDB, users can easily find and try new cocktail recipes. The application is built using functional components and React hooks, and it is a small pet-project in constant development. Users can also customize the color scheme, measurement units, and experience pro-mode with bartender lingo. The application can be installed on smart devices, making it easily accessible for cocktail enthusiasts on the go.