This is a cocktails database app created in Vue 2 powered by tailwind css and vue-tailwind package. This app using data from the Cocktail Database API. Here is the link of their open source API. https://www.thecocktaildb.com/api.php. Please support them, in my knowledge it's one of the easiest APIs to use with no authentication.
This app would have information related to tons of delicious cocktails around the globe including their ingredients, whether they're alcoholic in nature or not and what glass they're served in.
- Amit Prafulla (APFirebolt) - (http://amitprafull.com/)
This should be a piece of cake for you if you have worked under npm environment before. Simply initialize an empty project using 'npm init' and then install packages. Simply clone the project and install dependencies.
npm install
npm run serve
npm run build
npm run lint
This project was deployed on Heroku on 14th November 2021. Deployment through Heroku is a smooth process which required installation of express and serve-static libraries for Node. Then, I added a 'postbuild' script and a 'start' script to build production files and serve it through an express server. Below is the app link.
https://vue-cocktail-db.herokuapp.com/cocktails/
Please find some of the screenshots of the application. First screenshot depicts the cocktails page of the application with a search form where you can search cocktails through name, category, glass and ingredients.
This shows cocktail names list in form of a modal when filtering is applied based on ingredients, glass or category. Clicking on the image would direct you to the details page of that specific cocktail.
This screenshot shows the detail of the cocktail page. On the details page, you'd find the image, ingredients used, name and other information about the cocktail in consideration.
This shows results of cocktails fetched when search is performed based on the cocktail name. The result is displayed in tabular form using vue-tailwind tables.
