Project Description

U-Call-It is the only app you'll ever need while bartending from the comfort of your home. You can browse for mixed drinks by 3 main categories: alcoholic, non-alcoholic, and optional alcohol as well as search by their name. If you'd like to switch things up you can even hit the "Surprise me" button for a random drink! Click on the drink of your choice and it will display an image and the ingredients you need to make it. A fast and easy way to be the best host at all your gatherings in your home! An app inspired by the current events of the global pandemic. Stay safe, stay in and download U-Call-It!

Link to the API

https://www.thecocktaildb.com/

Example of data response

{
drinks: [
{
idDrink: "12916",
strDrink: "Egg Nog - Healthy",
strDrinkAlternate: null,
strDrinkES: null,
strDrinkDE: null,
strDrinkFR: null,
strDrinkZH-HANS: null,
strDrinkZH-HANT: null,
strTags: null,
strVideo: null,
strCategory: "Punch / Party Drink",
strIBA: null,
strAlcoholic: "Optional alcohol",
strGlass: "Collins Glass",
strInstructions: "Whip egg substitute and sugar together, combine with the two kinds of milk, vanilla, and rum. Mix well. Chill over night. Sprinkle with nutmeg. Makes 6 servings.",
strInstructionsES: null,
strInstructionsDE: "Ei-Ersatz und Zucker verrühren, mit den beiden Sorten Milch, Vanille und Rum vermengen. Gut mischen. Über Nacht kühl stellen. Mit Muskatnuss bestreuen. Ergibt 6 Portionen.",
strInstructionsFR: null,
strInstructionsZH-HANS: null,
strInstructionsZH-HANT: null,
strDrinkThumb: "https://www.thecocktaildb.com/images/media/drink/qxuppv1468875308.jpg",
strIngredient1: "Egg",
strIngredient2: "Sugar",
strIngredient3: "Condensed milk",
strIngredient4: "Milk",
strIngredient5: "Vanilla extract",
strIngredient6: "Rum",
strIngredient7: "Nutmeg",
strIngredient8: null,
strIngredient9: null,
strIngredient10: null,
strIngredient11: null,
strIngredient12: null,
strIngredient13: null,
strIngredient14: null,
strIngredient15: null,
strMeasure1: "1/2 cup ",
strMeasure2: "3 tblsp ",
strMeasure3: "13 oz skimmed ",
strMeasure4: "3/4 cup skimmed ",
strMeasure5: "1 tsp ",
strMeasure6: "1 tsp ",
strMeasure7: " ",
strMeasure8: " ",
strMeasure9: " ",
strMeasure10: " ",
strMeasure11: " ",
strMeasure12: " ",
strMeasure13: null,
strMeasure14: null,
strMeasure15: null,
strCreativeCommonsConfirmed: "No",
dateModified: "2016-07-18 21:55:08"
}
]
}

Visual of your component hierarchy

Wire Frames

Visual Screenshots

Home page

Cocktail Details

User Stories

• As an app user, I want to search for a drink and quickly see the recipe, so that I can begin to prepare my drink.
• As an app user, I want to be able to search by categories, so that I can browse various drinks I may like.
• As an app user, I want to be able to see very clearly the ingredients I need for the drink so that I can determine if I can make this drink.
• As an app user, I want to be able to hit a "random" button so that I do not have to pick a drink if I do not want to.
• As an app user, I want to be able to find a drink quickly so that I can go back to enjoying my night.

MVP Goals

• User can easily navigate the menu
• User can filter drinks through category
• User can type and search for the particular drink they want
• User can click on their drink and see the ingredients needed to make it with a reference image

Stretch Goals

• Users can click a copy link button so they can send the drink details to their friends
• Users who do not wish to have an alcoholic drink can find a non-alcoholic category
• User can have a pleasant user experience with smooth transitions on the page
• User can have a good user experience by being able to use the app on their mobile device and on their laptop

Gold level stretch goals (not included yet)

• User can save their favorite drinks on the app

Technologies used

• React
• CSS
• Javascript

Getting started

• Clone this project from Github
• open on a server like LiveServer or start on NPM scripts

Contribution Guidelines

Thanks for contributing! I am always looking to better my code or find a more efficient way of doing things!

• Please, fork and clone repo and submit a pull request
• If you found a bug? Please submit an issue Thank you again!

Sources:

• API: https://www.thecocktaildb.com/
• images made on canva.com