This 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.

Using 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.

Vite achieves significant performance improvements over webpack by using intelligent code splitting.

In development mode, Vite splits the application code into two.

One 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.

Two is the application code e.g. the custom-written code for the application such as .jsx, .vue, or .scss files.

Unlike 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.

Using Vite can dramatically improve the performance of coding many languages during development, and reduce the feedback loop time which is ordinarily incurred with Webpack.

Vite 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.

To 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.

• React JS
• Bootstrap
• Vite
• Docker
• Nginx

• 23/3/23

Conversion 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.

• Made with ❤️ by Amit Prafulla (APFirebolt) - (https://apgiiit.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 or simply clone the project and install dependencies.

npm install
npm run dev

npm run build

• 26-05-2022 : Minor changes in the UI

Please find some of the screenshots of the application. First screenshot depicts the homepage of the application. Updated screenshots would be added soon.

This shows Cock detail page which displays picture of the cocktail, name and ingredients used to make this variant.

This screenshot shows the list of cocktails fetched when searched by name for a cocktail.

This shows page where list of all Cocktail names when filtered through categories, ingredients and glass.