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.
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.
Please find the following video to know how to use this
A Glimpse of this webApp could be taken by the following screenshots:
-
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:- Blob(Binary Large Objects).
- Better knowledge of React.
- Libraries like jsZip.
- Enhancements of Css Skills
- Blob(Binary Large Objects).
- For setting up this project, Follow mentioned steps:
- Go to Code and copy https link from there.
- Now Open your terminal.
- Navigate to any directory preferred by you through using cd command.
- Clone project there by
git clone <url copied> - Navigate to Image-Editor by
cd Image-Editorand typenpm ito install all packages. - After Following this steps go to Getting Started Page for further information.
- Go to Code and copy https link from there.