Table of Contents:

• About
• Getting Started

About

Image-Editor as its name suggests is an image editor. It lets you edit multiple photos, You only have to edit properties mentioned in the slider and it will edit all the photos for you.

Inspiration

I got an idea of building this, when I had to compare multiple photos for a small Mini-Project in different look. It just was kind of massacre to test by looking into each, Also it did not give a better clarity. That's when I thought of building this.

Usage

Please find the following video to know how to use this

Glimpse

A Glimpse of this webApp could be taken by the following screenshots:

Miscellaneous

• Why didn't use Backend?
  At the time of making this Web App, I did know enough backend and middlewares like Multer which could have been made things much easier. But I was curious if this problem could be solved using Frontend only. I thought of giving it a try and it came well and it taught me a lot in the FrontEnd domain.

• Why didn't I use any Inbuilt Image Editor As mentioned in the previous Paragraph, I build this webApp for sole purpose of learning and enhancing my skills. Without using library I got to learn about image proprties in css.

• Learning Outcomes
  Through building this I learnt many things, some of them are:
  

  1. Blob(Binary Large Objects).
     
  2. Better knowledge of React.
     
  3. Libraries like jsZip.
     
  4. Enhancements of Css Skills

Installation Steps:

• For setting up this project, Follow mentioned steps:
  
  1. Go to Code and copy https link from there.
     
  2. Now Open your terminal.
     
  3. Navigate to any directory preferred by you through using cd command.
     
  4. Clone project there by git clone <url copied>
     
  5. Navigate to Image-Editor by cd Image-Editor and type npm i to install all packages.
     
  6. After Following this steps go to Getting Started Page for further information.