https://github.com/apfirebolt/vue_cocktail_app
A cocktail database application in Vue and Tailwind using cocktaildb API
https://github.com/apfirebolt/vue_cocktail_app
api-integration nodejs tailwindcss vue vue-tailwind vuejs
Last synced: 2 months ago
JSON representation
A cocktail database application in Vue and Tailwind using cocktaildb API
- Host: GitHub
- URL: https://github.com/apfirebolt/vue_cocktail_app
- Owner: Apfirebolt
- Created: 2021-03-13T05:08:10.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-03-06T09:12:37.000Z (3 months ago)
- Last Synced: 2025-03-06T10:24:29.841Z (3 months ago)
- Topics: api-integration, nodejs, tailwindcss, vue, vue-tailwind, vuejs
- Language: Vue
- Homepage:
- Size: 1.72 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VueCocktails - Cocktails database app using Vue
## Project Briefing
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.
## Built With
* [Vue JS](https://vuejs.org/)
* [TailwindCSS](https://tailwindcss.com/)
* [Headless UI](https://headlessui.dev/)
* [Docker](https://www.docker.com/)
## Authors
* **Amit Prafulla (APFirebolt)** - (https://apgiiit.com/)
## Project setup
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 dev
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Deployment to Heroku
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/
## Project Screenshots
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.
## Writing tests
After struggling to configure jest, vitest came to rescue. I referred to this video on Youtube https://www.youtube.com/watch?v=iNl6TA29hBM
I was able to write basis tests for Header and Footer components.