Mixx is a web-app that allows users to discover which cocktails can be created from their bar stock.
Users can create an account to track their current inventory, receiving cocktail suggestions based on what they have on hand and ingredient suggestions for their next purchase. Users can save cocktails for later or rate cocktails to receive recommendations. Even without creating an account, users can browse the entire database of cocktails and ingredients, viewing recipes and step-by-step instructions.
The project was built using React, Flask, & MongoDB.
The site offers various features including: account creation & modification, inventory storage, viewing of available cocktails, cocktail favoriting (saving), cocktail rating, cocktail recommendations, ingredient purchase recommendations, cocktail & ingredient database exploration, cocktail instructions & recipes, and various filters / search options.
The site is split into two sections: one which is only accessible with an account and one that can be viewed by anyone.
Additionally, the site is completely responsive to different screen sizes.
The Home Page displays the various features this site offers. Clicking “See what you can make” will bring you to the MyCocktails page, which displays the cocktails that can be made from your ingredients.
Homepage
The Navbar features a logo, which links to the homepage, as well as two dropdown menus: My Bar & Explore. My Bar includes pages which require an account, while the pages contained within Explore can be used by all. Sign In links to a login/signup page, and once logged in, it is replaced by a settings icon.
Navbar - 'MyBar' Dropdown
Navbar - 'Explore' Dropdown
Settings Icon (Once Signed In)
The Login / Signup Page allows users to log into their accounts or create a new account. It also displays reasons to create an account, as well as feedback on different errors.
Login / Signup Page (Login Showing)
Login / Signup Page (Signup Showing)
Login Error
On the MyIngredients page, ingredients can be added to or removed from your account. Ingredients can be searched for by name. Hovering over ingredients will show a + or - depending on whether adding or removing. The website is also mobile friendly; when the screen gets too small, there will be tabs to switch between ingredient lists.
My Ingredients Page - Removing an Ingredient
My Ingredients Page - Searching and Adding an Ingredient
My Ingredients Page - Mobile Responsive
The MyCocktails page will display all the cocktails that can be made from your ingredients. Cocktails will be sorted in alphabetical order, with favorited cocktails on top. Cocktails can be favorited for quick access by clicking the heart icon. Cocktail can be searched by name, ingredient, or glassware. These search filters can be toggled on/off by clicking the respective buttons.
My Cocktails Page
My Cocktails Page - Searching & Filtering on Mobile
The My Favorites page is similar in features to the My Cocktails page, but will show those cocktails that have been saved. This is needed in addition, since users can save cocktails that they cannot yet make.
My Favorites Page
Clicking on a cocktail on any page will bring you to that cocktail’s page. This page displays the cocktails name, a description (if available), directions, the garnish, the glassware, and the recipe. There is also a pair of like/dislike buttons, which are used for recommendations. They are not visible to users who are not signed in.
Cocktail Page
Liking a Cocktail
Disliking a Cocktail
The Ingredients page under the Explore navbar menu displays all the ingredients in the database. They are displayed categorized and can be searched similar to the My Ingredients page.
All Ingredients Page
Selecting an ingredient will display all cocktails containing it.
Selecting an Ingredient (i.e Prosecco)
The Cocktails page will display all cocktails in the database. They are displayed and can be sorted similarly to the My Cocktails page. If a user is not signed in, the heart icons will not be visible.
All Cocktails Page
The Settings page allows users to update their profile name, update their email, update their password, delete their account, and sign out. Info banners will appear similarly to the login page in order to display errors and successful updates.
Settings Page
Ingredients are recommended to users based on the largest number of new cocktails that the user can make if they purchase that ingredient. This is done by comparing the user’s ingredient list to the ingredient lists of all cocktails in the database.
Ingredient Recommendations
Cocktails are recommended to users based on their liked and disliked cocktails. A user’s liked cocktails are compared to those of all other users. The most similar user to the given user is determined and cocktails they've liked that are not in the given user’s like & dislike lists are recommended. If there are no similar users then the user is given recommendations based on the number of similar ingredients between their liked cocktails and the other cocktails in the database. The recommendations tab has a toggle button to only recommend cocktails the user can make.
Cocktail Recommendations
Users
{ userID: uid,
email: string,
password: string (hashed)
first_name: string,
last_name: string,
ingredients: [ingredient_id],
favorite_cocktails: [cocktail_id], (i.e saved recipes)
liked_cocktails: [cocktail_id],
disliked_cocktails: [cocktail_id]
}
Cocktails
{ cocktail_id: uid,
name: string,
subtitle: string (description),
img: url,
ingredients: [ { ingredient: ingredient_id, quantity: float, unit: string } ],
garnish: ingredient_id || None
directions: string || None,
glassware: glassware_id,
}
Ingredients
{ ingredient_id: uid,
name: string,
category: category_id,
subcategory: category_id,
}
Glassware
{ glassware_id: uid,
name: string,
}