Mixology is a Single Page Application allowing different kinds of selection operations over Cocktail recipes.
What a user can do :
- Search a cocktail recipe by name.
- Browse all cocktail recipe lists by the first letter.
- Toggle dark or light mode.
- Generate random cocktail recipe.
- Filter & sort by ingredient, category, glass, vegan or "makeable from your bar".
- Able to "Favourite" cocktails.
- See measurements in either parts, ml, cl or oz.
- Create your own cocktail recipe.
Enrichment and images integration with TheCocktailDB
To run this project locally you'll need clone the respository, then:
install json-server globally and run the command below to run the server:
$ json-server --watch db.json
The goal of Mixology is to make a strong first impact with the Landing page, and therefore move the exploration and the research on other parts of the page.
- Landing Page- Striking the first impression and link to its functionalities.
- Search bar- Search by ingredients, page each request calling an API.
- Toggle button - Toggles dark mode & light mode.
- Generate random cocktail button - Generates random cocktail recipe.
- Show all button - Displays all cocktail recipes.
As a visitor of the Mixology website, a user can expect the following:
- To find with when a user look for cocktail recipes, the layout of the website should make sense other than confusion or frustration while using it.
- The information provided by the website should be easily laid out in a way that is convinient to read and understand.
- The website should be easily navigable from any device (desktop, tablet, phone) - Content should be viewable through these devices.
- To be able to learn about cocktails and their recipes so that it is easier to prepare them when user wants to.
- To be able to find cocktail recipes with ingredients available by a user.
- High quality images of the cocktail.
- To be able to suggest when a user is indecisive.