This project is a Cocktail Search App that browses through all existing cocktails using TheCocktailDB API. Users can view the image, ingredients and measures, and instructions of the cocktail they searched. The Node JS backend fetches JSON from TheCocktailDB API using Axios, then formats and sends only the required data to the frontend. I utilized dynamic routing for individual cocktails using React Router. The app is hosted on Netlify.

More about the Project

You can select a specific cocktail from the search bar to view its detail page. The search bar has an auto-suggestion function for the cocktails that matches the search input. The detail page consists of the cocktail image, what glass it is served in, the ingredients and measures to make the cocktail, and the instructions. There is also a converter that converts fluid ounces(oz) into millilitres(ml) for users who prefer the metric system. The bottom of the detail page consists of similar drinks to the drink the user searched.