DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

Bulk Image Converter & Optimizer Tool using React and Electron

Bulk Image Converter & Optimizer Tool using React and Electron

BICO - Bulk Image Converter & Optimizer Tool For Desktop Platform Based on React Electron

Current Version (v0.1.5) Last Updated (02/10/2023)

Bulk Image Converter & Optimizer Tool using React and Electron

Tool for converting bulk images supporting all image format and allow user to adjust dimensions, quality, animation, compression and many more options to discover.

Tech Stack

CLIENT: React, Hooks, Ant Design 5+, Electron, Node

Features

  • Supports all various image formats (webp, jpg, png, tiff, jp2, heif, avif, jxl, raw, gif).
  • Single form settings to select options for desired output.
  • Uses Multi Threaded Task for quick compression and output for larger files.
  • Generates a single Zip file of all converted images.
  • Added Grayscale image conversion support (02/10/2023)
  • Added avif with losseless compression support (02/10/2023)
  • Supports Hardware acceleration.
  • Shows a Table of selected files in an organized way.

Pre Requirements For Local Development

  • React 18+
  • Node, NPM
  • VSCODE With ES6+ Module

Installation

Clone the project

git clone https://github.com/shehari007/BICO-bulk-image-converter-optimizer-tool.git
Enter fullscreen mode Exit fullscreen mode

Go to the project directory

cd BICO-bulk-image-converter-optimizer-tool
Enter fullscreen mode Exit fullscreen mode

Install dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

Start the Electron Project in Windows

npm run electron:start
Enter fullscreen mode Exit fullscreen mode

Project will open in window mode not in browser as normal react app would, Happy Hacking!

Deployment

Deployment is never been easy before, package.json is already configured for every platform (Window, Linux, MacOs). Just need to run build commands for each platform as follows:

For Windows

npm run electron:package:win
Enter fullscreen mode Exit fullscreen mode

For Linux

npm run electron:package:linux
Enter fullscreen mode Exit fullscreen mode

For MacOS

npm run electron:package:mac
Enter fullscreen mode Exit fullscreen mode

Running these commands will give you a package file (Windows->NSIS .exe) || (Linux->.deb) || (macOS->.dmg).

License

MIT

GitHub

View Github

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.