Up next in 10
I Built this React Canva & Photoshop Image Canvas Editor Passive Income 10$/Month Web App in Browser
Mar 17, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/i-built-this-react-canva-photoshop-image-canvas-editor-passive-income-10-month-web-app-in-browser/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:03
in this video I will show you uh a
0:05
passive income tool that I developed
0:07
inside react which allows you to edit
0:10
your images right in the browser itself
0:12
something like Photoshop or canva which
0:15
are image editors so this is also a
0:18
image editor that I developed in react
0:21
CHS and it is live deployed here on this
0:24
URL freem mediat tools.com Photoshop
0:28
canva clone so free mediat tools.com is
0:31
my passive income website guys where I
0:33
place advertisements and earn a lot of
0:35
passive income so this is one tool that
0:38
are developed in react CH it's a fully
0:40
image editor something like Photoshop or
0:43
canva so whenever you land on this tool
0:46
you need to either you select this click
0:49
this area and here you will select your
0:51
image file so whichever image file you
0:53
are
0:56
actually so
1:01
let me show you from
1:07
scratch so if you visit free mediat
1:09
tools.com the latest tool that I added
1:11
on my website this is the tool here if
1:14
you land on this tool you need to select
1:17
any image it can be PNG jpg so once you
1:20
select the image we have quite a lot of
1:22
options right here at the bottom of the
1:24
screen you can actually blur the image
1:27
you can add text you can crop the image
1:30
you can add text as well in various
1:32
colors you will see so it is using
1:34
canvas API and also it's a fully
1:38
fleshed uh text editor so first of all
1:40
if you want to add some text you can
1:43
actually use this text tool so this is I
1:46
will say hello
1:48
world so if I put any you will see this
1:52
text will be added then we can even uh
1:57
blur the part of the image let's suppose
1:59
I want to blur this image I will draw
2:02
using the mouse here you will
2:04
see as I'm doing this the image is
2:08
blurred you can see that the phase is
2:10
not visible this is actually the blur
2:13
tool that is there which will hide
2:16
anything you can do using this blur tool
2:19
then we have actually the share tool as
2:22
well so if you want to add some shapes
2:24
in various colors you can add this you
2:27
can see we can even crop the image as
2:30
well using the scissor icon if you see
2:32
the scissor icon is there you can if you
2:35
only want this part of the image you can
2:37
select this portion and the image will
2:39
be cut so on the right hand side if you
2:42
see we have various time stamps so if
2:44
you want to go to a particular location
2:46
you can individually click it so this
2:48
will maintain the history so with the
2:51
latest changes you can revert back very
2:54
easily by going to each changes that you
2:56
made so this is quite easy you can see
2:59
that so this is a latest change if you
3:01
want to download this we have the
3:03
download button as well if you see you
3:06
simply click the download button and it
3:08
will download this
3:14
image you will see with the modified
3:16
changes the image is successfully
3:18
blurred we have added the text we have
3:20
added the shapes as well so this is a
3:23
nice little tool guys uh similar to
3:25
canva or
3:27
photoshop where you can put
3:28
advertisements and on a lot of Revenue
3:30
because people will be coming to your
3:32
website to this tool and they will be
3:35
wanted to edit their images like
3:38
this so this is the actual react CH
3:41
project guys if you need the full source
3:43
code the link is given in the
3:44
description of this video so let me show
3:46
you we are using this
3:48
uh react which is a latest version
3:52
18.3 and we using the canvas API in the
3:55
background to build this project so each
3:57
component right here has a specific
3:59
spefic file right here in typescript if
4:02
you see it is coded inside
4:05
typescript and it's a fully fleshed
4:07
project if you know programming you can
4:09
actually modify the source code as well
4:12
and extend its capabilities the link is
4:15
given if you need this full source code
4:17
you can directly purchase it after
4:19
purchasing it you will get a zip file
4:21
when you extract the zip file you can
4:23
run this project locally first of all we
4:26
need to install this nodejs modules by
4:28
executing the command npmi so this will
4:31
create this node modules folder and now
4:33
to run this locally we simply write this
4:36
command npm run Dev so this will start
4:39
the local development server on your
4:41
machine on Local Host 3000 so it will
4:44
start this project locally so instead we
4:47
can locally open this so Local Host
4:50
3,000 so now if you see the project has
4:54
opened so you can do the same job right
4:57
here
5:00
you can add shapes you can add the
5:04
text you can change the text here right
5:07
here for the
5:10
shapes and then if you want to cut crop
5:13
the image you can select a portion and
5:15
the image will be cropped and then you
5:17
can simply download this so all these
5:19
operations you can see is perfectly
5:21
working we are running it on Local Host
5:23
and now to deploy this application it's
5:26
very easy guys you have the command here
5:29
if you want to deploy your on your own
5:31
website you first of all build this
5:33
project by executing this command mpm
5:36
run build this will build out this
5:38
project and it will create this disc
5:40
directory which will hold the minified
5:43
files right here so you just need to
5:44
upload this folder to a shared hosting
5:46
plan so whatever hosting you are using
5:49
and uh let me show you the income that
5:51
I'm generating the passive income so I
5:55
basically
5:57
enjoy accounts on AdSense and which are
6:00
two popular ad networks related to so my
6:03
domain name is approved on both of these
6:05
ad networks so you after you purchase
6:08
the tool you can deploy this tool and
6:11
get access to ISO which gives you
6:14
passive income on advertisement so we
6:17
are getting this passive income you can
6:18
see that on my website using this tool
6:21
let me also show you the absence the
6:24
last 3 years
6:26
data so you can see that guys we are
6:29
getting constant amount of passive
6:31
income from my tool website you can see
6:33
that on each day I'm getting this
6:35
passive income so you can even do that
6:38
as well guys this project you can
6:40
directly purchase it uh if you are a
6:43
student looking for a job this can be a
6:45
very good project to actually see how I
6:48
coded this project step by step we will
6:51
get to know about each component how
6:53
this is coded to actually make a
6:55
realtime practical application such as
6:57
Photoshop or canva loads so it's a real
7:00
life editor you will see that it's coded
7:02
in react if you are interested the link
7:05
is given in the description and you can
7:08
directly purchase the full source code
7:10
with full directory structure so thank
7:12
you very much guys for watching this
7:14
video and just check out my website free
7:16
mediat tools.com which contains
7:18
thousands of tools regarding audio video
7:20
and
7:21
image and I will be seeing you guys in
7:23
the next video
#Clip Art & Animated GIFs
#Skins, Themes & Wallpapers
#Photo & Image Sharing
#Development Tools
#Video Sharing