Shake it Up! is a responsive single-page web app that offers users an encyclopedia of popular cocktails along with easy-to-follow step by step instructions. Have some ingredients but don't know what to make? No problem! Our app features a "Build Your Own Cocktail" mode... start with a base spirit (e.g. Whiskey, Vodka, Gin) and our app will intelligently recommend compatible ingredients and potential cocktails. Shake it Up! is your perfect bar-counter companion for an evening out on the town or a fun time enjoying drinks with friends.
- Cocktail suggestions based on multiple user inputs
- Cocktail recipes with detailed step-by-step instructions
- Educational content regarding cocktails & ingredients
- Desktop and mobile-web responsive design
Our fetch thunk actions check the redux state, so that they only make the http request if the data is not already fully loaded. They also accept an optional callback to be executed when the data is fetched.
Search progress persists when users refresh the page. When users press back button or types additional compatible ingredients in the URL, BYOC correctly sets state according to the list of ingredients at the moment and accurately displays potential drinks.
Local state (base, nonBaseIngredients, drinks, compatibleIngredients) is set by setStateFromURL(). The 'base' array stores objects corresponding to the various types of the base spirit selected by the user. After selecting the base spirit, the drinks array is set to be all cocktails containing any of the types of the given base spirit, and the compatible ingredients array is initialized as all ingredients of these drinks except for the ones in base. The user then may select additional ingredients which refines the array of drinks and correspondingly reduces the list of compatible ingredients.
setStateFromURL() sets local state based on the URL wildcard. Since base spirit is the first selection made by the user, the name of the base spirit is the first segment of the (comma-separated) wildcard. So if the wildcard is 'vodka, lime', setStateFromURL sets base to be an array. It also sets the nonBaseIngredients array. The 'drinks' slice of state is set to the array of cocktails which each contains some version of the base spirit, and also every one of the non-base ingredients. Thus, when the user makes their initial selection, namely base spirit, they see all the drinks containing some version of it, and subsequent clicks on ingredients reduce the list of cocktails. Lastly, the compatibleIngredients array stores all ingredients that go into any cocktail in the drinks array, except for the ingredients that have already been selected.
Upon rendering drinks or ingredients index page, all drinks / ingredients are preloaded to allow live search. Users can search for drinks / ingredients instantaneously without making unnecessary AJAX requests to the back-end. The search is also case insensitive.
- Incorporating Regex into Req.params
- Reformatting database schema from a public API to expedite querying by ingredient
- Merging overlapping cocktail tables
- Fetching data from MongoDB and organizing for display in frontend
- Implementing real-time querrying based on multi-value input parameters
- Designing a responsive cross-platform user interface
| Desktop | Mobile |
|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |