The place where you can find the drink of your dreams
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
In simple words, we want to help everyone to find their favorite cocktail. In order to do that, we have developed this website to give them a way to search information about drinks based on their features. In an easy, simple and intuitive way.
To accomplish our objective, this website is able to:
- Search cocktail by name, type, category or ingredient.
- Filter search results by cocktail type, category or ingredient.
- Show information about cocktails features, their preparation instructions and their ingredients.
- Give ingredients details like a short description, type, if they have alcohol and alcohol by volume percentage.
- Be displayed in any device.
We use TheCocktailDB's API as a source of information for this web site. Thanks to them, we are able to offer information about different cocktails and search based on their features.
- Clone the repo
git clone https://github.com/mutazen/Your-cocktail.git
- Install NPM packages
npm install
- Change node version if it is necesary
nvm use 14.7
- Compile for development
npm run serve
We have a demo if you want to follow the instructions below. View Demo
To search a cocktail by its name, we can introduce its name into the input in the right side of the navbar and press the enter key or click on the magnifying glass button.
In this example, we are going to search for cocktails with the word "smoothie" in their name. So we write "smoothie" in the input and press the enter key.
In this new screen, we can see all the cocktails that we have in our database that containts the word "smoothie" in their name. In this case, there are 7 cocktails that match the pattern.
To search a cocktail by its type, we have to click on the "types" button in the left side of the navbar.
In the new screen, we can see the different types of cocktails: "Alcoholic", "Non alcoholic" and "Optional alcohol".
The alcoholic cocktails are cocktails that have some percentage of alcohol, the non alcoholic cocktails don't have alcohol and optional alcohol cocktails could have alcohol or not.
In this example, we are going to show alcoholic cocktails. So we just have to click on the "Alcoholic" option in the type list.
At the next screen, we can see the alcoholic cocktails that we have.
If you pay attention to the filters at the left side of the screen, you can see that the "Alcoholic" option in the drink type list is selected. So if you want to see the other drink types options, you just have to click on them.
As result of the search, we have 100 alcoholic cocktails to show.
To search a cocktail by its category, we have to click on the "category" button in the navbar.
At this new screen, we can see the cocktails category list. There are eleven different categories.
In this example, we want to check the cocktails that belong to the "ordinary drink" category. So we click on the "ordinary drink" option in the categories list.
In this screen, we can see all the ordinary drink cocktails.
If you pay attention to the filters at the left side of the screen, you can see that the "Ordinary drink" option in the category list is selected. So if you want to see the other categories options, you just have to click on them.
In this case, we have 100 cocktails that belong to the "ordinary drink" category.
To start to search a cocktail by its ingredient, we have to click on the "ingredient" button in the navbar.
In this screen, we can see a list of the different ingredient that are been used in the cocktails that we have registered.
In this example, we are going to show cocktails that use "7-Up" as ingredient. So we just have to click on the "7-Up" card in the ingredient list.
At the new screen, we can see all the cocktails that use "7-Up" in their preparation.
If you pay attention to the filters at the left side of the screen, you can see that the "7-Up" option in the ingredient list is selected. So if you want to see the other ingredient options, you just have to click on them.
In this case, we just have 4 cocktails that have "7-Up" as one of their ingredients.
If we want to filter the results by cocktail type, we have to start searching cocktails using any other parameter.
In this example, we have searched cocktails that have the word "coffee" on their names and we want to see how many of them have alcohol. So in the search result page, at the left controls, we click on the alcoholic option in the drink type list.
At the time that we clicked the option, we can observe that the cocktails displayed have changed. That is because it is showing cocktails that have "coffee" on their name and are alcoholic cocktails.
As result of this filter, we have found 9 coffees that have alcohol.
If we want to filter the results by cocktail category, we have to start searching cocktails using any other parameter.
In this example, we have searched cocktails that have the word "coffee" on their names and we want to see how many of them belong to the "ordinary drink" category. So in the search result page, at the left controls, we click on the "ordinary drink" option in the category type list.
Once we have clicked the option, we can observe that the cocktails displayed have changed. That is because it is showing cocktails that have "coffee" on their name and that belongs to the "ordinary drink" category.
We can observe that only one coffee that belong to the "ordinary drink" category.
To filter the search results by their ingredient, we have to start searching cocktails using any other parameter.
In this example, we have searched cocktails that have 'alcoholic' on their type and we want to see how many of them use "amaretto" as ingredient in their preparation. So in the search result page, at the left controls, we click on the "amaretto" option in the ingredient type list.
At time that we have clicked the option, we can observe that the cocktails displayed have changed. That is because it is showing alcoholic cocktails that have "amaretto" as one of their ingredients.
If we want more information about any cocktail, we only have to click on it in the seach cocktail page.
In this example, we want to see more information about the cocktail named "110 in the shade". So we click on it.
In this new screen, we can see more information about the cocktail. Their name, category, type, type of glass used to serve it, preparation instruction and a list of ingredients with their measure
If we want more information about certain ingredient, we only have to click on it in the cocktail detail page.
In this example, we are in the cocktail which name is "110 in the shade" information page. In this page, we want more information about an ingredient called "Lager". So we click on it in the ingredient list.
In this new screen, we can see more information about the ingredient "Lager". Their name, category, if it has alcohol, their alcohol by volume and description. Also we have a button to search cocktails that use this ingredient on their preparation.
One of the fundamental goals of this website is to be able to be displayed on any device. So we started its design having in mind the mobile first concept.
In order to that, we designed our home page to be very simple. So as it increases its width, we add more elements and we adapted them as long the width increase.
To save more space we hide navbar button within a collapse element that can be open using a toggle button. Thank to this method the user can access to this controls when they need them or hide them when they aren´t useful.
In the search result page, we have the same problem that we have in the navbar. To solve it, we hide the filters controls to give all the space to show the search results in a better way. But we left a toggle button so the users are able to access to the filter controls if need them.
We use a offcanvas element to show the filter controls. Thank to this technique, the user can see the control properly and make of them without any problem.
The pages that show information about cocktails and ingredients are ready to show all the information that they have in a proper way. Independently of user's device.
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Daniel Saavedra - https://www.linkedin.com/in/danielsavgem/
Jeremy Camacho - https://www.linkedin.com/in/jeremycamacholugo/
Project Link: https://github.com/mutazen/Your-cocktail
This website initially was a result of an exercise of Reboot Academy's bootcamp (ed. May-Jul 2021) but we keep working on it, giving it more functionalities and making it better because we loved the idea and we used it to test the skills that we learned. So we want to thank our instructors for their support and their patience. Thank you guys, you are the best!
We want to thank to @othneildrew for share their template for this readme.