0:00
Welcome to this live stream. So in this
0:01
live stream, I'll show you a React and
0:04
NodeJS Express Canva clone ultimate
0:06
image and PDF editor that I developed. I
0:09
also given the demo link in the
0:11
description of the video. You can
0:13
actually see the demo.
0:16
So it has all the features. Let me just
0:18
show you. So this is the actual deployed
0:22
this. So it has all the features. Once
0:24
you land on this, we have the canvas. We
0:26
can add text. We can add images. It has
0:28
all the properties. You can just see
0:30
here in the top bar. You also have the
0:33
export button. If you click this, you
0:35
can export this to a image file.
0:39
As you can see, it has been exported.
0:41
Then we also have the option to exported
0:43
as a PDF file as well. So this is a
0:45
complete project. Let me show you the
0:48
source code. This is the source code of
0:49
this project. Here I basically making a
0:52
lot of money by putting advertisements
0:53
as well. So we have used the latest
0:56
version of React 18.2.0
0:59
and it's divided into multiple sections.
1:01
As you can see each section is coded
1:04
inside JavaScript. You can purchase this
1:06
source code. The link is given in the
1:08
description. After you purchase it, you
1:10
will get the source code automatically
1:12
from Google Drive. Uh now to run this
1:14
project you simply go to the directory
1:20
you simply execute this command here
1:22
which is npm run start. So what this it
1:27
will do it will start this react project
1:36
basically it is coded inside
1:39
react as you can see react 18.2.0 zero.
1:44
Basically all the sections are coded
1:50
So now it has compiled this
1:58
So this is the actual demo here. You can
2:05
so all the source code will be given.
2:08
You can actually try it out. You can
2:10
export this as a PDF file as well.
2:13
Simply go to the file menu and go to
2:16
export and you will also see. So you can
2:19
add multiple pages as well. You go to
2:23
you can add your own multiple images as
2:29
You can actually align it perfectly. So
2:31
as you can see that so you also have the
2:34
option to add text as well. You can
2:37
place the text accordingly.
2:41
You can change the text color. All these
2:43
options are present here. It's very
2:45
easy. As you can see here, you can
2:46
change the background color as well. So
2:49
you have all these options. Underline,
2:54
You also have if different text effects
2:56
are are also there. After that you can
2:59
export this to a image file. It's very
3:05
And you can even export this to a PDF
3:07
file as well. So the source code is you
3:11
can purchase it. The link is given in
3:12
the description. We also come up with a
3:14
lot of templates as well. So first of
3:18
all you can try it out. I've given the
3:20
demo link. So with a single click you
3:22
can use any of these templates here
3:24
which will save you a lot of time here.
3:26
Then you can edit the text images
3:28
accordingly. You can do all sort of
3:35
you also got different kinds of shapes
3:38
as well that you can try out different
3:40
frames as well. And then you also have
3:43
the ability to upload your custom images
3:45
as well. So it's a layer based editor.
3:47
It has a dispositioning system. You can
3:50
basically using your mouse
3:53
mess with the position of elements as
3:59
uh just try out the demo and then if you
4:03
are interested you can purchase it all
4:06
the source code will be you will get.
4:11
So as you can see that this is the full
4:14
react NodeJS express source code.
4:25
and also if I can show you in AdSense we
4:28
are making a lot of money using this
4:29
editor by putting advertisements as you
4:31
can see we have today itself it is
4:34
making that much of and also in ISOIC
4:38
which is also a very popular ad network
4:41
I'm making this much of
4:43
revenue as well by putting
4:46
So I have deployed this. You can check
4:49
out check this out and if you're
4:51
interested you can purchase it.
