{"id":21246798,"url":"https://github.com/apfirebolt/vue_cocktail_app","last_synced_at":"2026-04-17T02:33:05.865Z","repository":{"id":114820996,"uuid":"347278465","full_name":"Apfirebolt/Vue_Cocktail_App","owner":"Apfirebolt","description":"A cocktail database application in Vue, Typescript and Tailwind using cocktaildb API","archived":false,"fork":false,"pushed_at":"2025-03-06T19:16:16.000Z","size":1898,"stargazers_count":0,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T04:45:11.316Z","etag":null,"topics":["api-integration","kubernetes","nodejs","tailwindcss","typescript","vue","vue-tailwind","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Apfirebolt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-13T05:08:10.000Z","updated_at":"2025-03-06T19:16:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"906db026-8104-47a5-a9f1-916f2a618068","html_url":"https://github.com/Apfirebolt/Vue_Cocktail_App","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Apfirebolt/Vue_Cocktail_App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2FVue_Cocktail_App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2FVue_Cocktail_App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2FVue_Cocktail_App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2FVue_Cocktail_App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Apfirebolt","download_url":"https://codeload.github.com/Apfirebolt/Vue_Cocktail_App/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2FVue_Cocktail_App/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31912456,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-integration","kubernetes","nodejs","tailwindcss","typescript","vue","vue-tailwind","vuejs"],"created_at":"2024-11-21T02:06:10.408Z","updated_at":"2026-04-17T02:33:04.868Z","avatar_url":"https://github.com/Apfirebolt.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VueCocktails - Cocktails database app using Vue\n\n## Project Briefing\n\nThis 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. \n\nThis 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.\n\n## Built With\n\n* [Vue JS](https://vuejs.org/)\n* [TailwindCSS](https://tailwindcss.com/)\n* [Headless UI](https://headlessui.dev/)\n* [Docker](https://www.docker.com/)\n\n## Authors\n\n* **Amit Prafulla (APFirebolt)** - (https://apgiiit.com/)\n\n## Project setup\n\nThis 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.\n```\nnpm install\nnpm run dev\n```\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Deployment to Heroku\n\nThis 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.\nThen, I added a 'postbuild' script and a 'start' script to build production files and serve it through an express server.\nBelow is the app link.\n\nhttps://vue-cocktail-db.herokuapp.com/cocktails/\n\n\n## Project Screenshots\n\nPlease 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.\n\n![alt text](./screenshots/cocktails.png)\n\nThis 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.\n\n![alt text](./screenshots/cocktail_names.png)\n\nThis 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.\n\n![alt text](./screenshots/cocktail_detail.png)\n\nThis 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.\n\n![alt text](./screenshots/cocktail_list.png)\n\n## Writing tests\n\nAfter struggling to configure jest, vitest came to rescue. I referred to this video on Youtube https://www.youtube.com/watch?v=iNl6TA29hBM\n\nI was able to write basis tests for Header and Footer components.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Fvue_cocktail_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapfirebolt%2Fvue_cocktail_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Fvue_cocktail_app/lists"}