{"id":21246804,"url":"https://github.com/apfirebolt/react_cocktail_app","last_synced_at":"2026-04-28T12:36:26.804Z","repository":{"id":114820586,"uuid":"346764739","full_name":"Apfirebolt/React_Cocktail_App","owner":"Apfirebolt","description":"A Sample Application in React using open API for cocktails using Vite","archived":false,"fork":false,"pushed_at":"2023-03-27T10:01:05.000Z","size":1390,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T04:45:11.283Z","etag":null,"topics":["api-integration","bootstrap","cocktail-db","cocktails-api","react","reactjs","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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-11T16:23:17.000Z","updated_at":"2023-03-23T03:03:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"40f4cb98-c0fe-47b8-b13a-c628a7c879af","html_url":"https://github.com/Apfirebolt/React_Cocktail_App","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Apfirebolt/React_Cocktail_App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2FReact_Cocktail_App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2FReact_Cocktail_App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2FReact_Cocktail_App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2FReact_Cocktail_App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Apfirebolt","download_url":"https://codeload.github.com/Apfirebolt/React_Cocktail_App/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2FReact_Cocktail_App/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265481957,"owners_count":23773979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","bootstrap","cocktail-db","cocktails-api","react","reactjs","vite"],"created_at":"2024-11-21T02:06:38.491Z","updated_at":"2026-04-28T12:36:26.758Z","avatar_url":"https://github.com/Apfirebolt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cocktails - Cocktail Database App in React and Vite\n\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\n![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge\u0026logo=docker\u0026logoColor=white)\n![Nginx](https://img.shields.io/badge/nginx-%23009639.svg?style=for-the-badge\u0026logo=nginx\u0026logoColor=white)\n\n## Project Briefing 👁\n\nThis is a cocktail database app created in React Js powered by Vite. For UI components, customized bootstrap theme from bootswatch is used. This app is using data from the CocktailDb website and contains details about loads of cocktails across the globe. Please support them, in my knowledge it's one of the easiest APIs to use with no authentication. \n\nUsing this app you would be able to search through the cocktail collection by name, you'd be able to filter them by whether they're alcoholic or not, filter by ingredients and more.\n\n### Why Vite ?\n\nVite achieves significant performance improvements over webpack by using intelligent code splitting.\n\nIn development mode, Vite splits the application code into two.\n\nOne is the dependency code, i.e. code imported from node_modules. This code is processed using esbuild. Esbuild is a javascript bundler written in Go that processes around 10-100 times faster than Webpack.\n\nTwo is the application code e.g. the custom-written code for the application such as .jsx, .vue, or .scss files.\n\nUnlike Webpack, Vite uses route-based code splitting to load only the parts of the code that need to be loaded, unlike Webpack which has to rebundle everything.\n\nUsing Vite can dramatically improve the performance of coding many languages during development, and reduce the feedback loop time which is ordinarily incurred with Webpack.\n\nVite also provides an HMR API over native ESM. In this way, precise instant updates can be made to the page with reload or loss of application state. This is an in-built capability when using the Vite CLI to create an app using create-vite.\n\nTo optimise assets, Vite currently uses Rollup. Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. Rollup allows you to develop code in a modern way using ES modules, and compiles it back to older supported formats such as CommonJS modules, AMD modules, and IIFE-style scripts.\n\n## Built With 🧰 \n\n* [React JS](https://reactjs.org/)\n* [Bootstrap](https://getbootstrap.com/)\n* [Vite](https://vitejs.dev)\n* [Docker](https://www.docker.com)\n* [Nginx](https://www.nginx.com)\n\n## Updates\n\n- 23/3/23\n\nConversion into a Vite React project started. For this, package.json was first updated. Then, index.html file was copied from one of my other existing Vite React project inside the root folder.  \n\n## Authors\n\n* Made with ❤️ by **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 or 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## Updates\n\n- 26-05-2022 : Minor changes in the UI\n## Project Screenshots\n\nPlease find some of the screenshots of the application. First screenshot depicts the homepage of the application. Updated screenshots would be added soon.\n\n![alt text](./screenshots/home.png)\n\nThis shows Cock detail page which displays picture of the cocktail, name and ingredients used to make this variant.\n\n![alt text](./screenshots/cocktail_detail.png)\n\nThis screenshot shows the list of cocktails fetched when searched by name for a cocktail.\n\n![alt text](./screenshots/cocktail_list.png)\n\nThis shows page where list of all Cocktail names when filtered through categories, ingredients and glass.\n\n![alt text](./screenshots/cocktail_tags.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Freact_cocktail_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapfirebolt%2Freact_cocktail_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Freact_cocktail_app/lists"}