Up next in 10
Buy the Full Source Code of Application here:
https://procodestore.com/index.php/product/build-your-own-canva-clone-in-react-to-edit-images-pdfs-gifs-like-a-pro/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you I created
0:04
my own Canva clone in React to edit
0:06
images, PDF, GIF files directly inside
0:09
the editor. So I'm running this uh Canva
0:13
clone directly inside localhost 3000. As
0:16
you can see, it's a complete ReactJS
0:18
project. So the this is actually all the
0:21
source code which is there. I've given
0:23
the link in the description. You can
0:24
directly purchase it. Uh now, let me
0:26
show you the actual editor right here.
0:29
So we also have support for adding
0:31
multiple pages. Here you can duplicate
0:33
pages. So inside left hand side corner
0:36
of the screen we have the template
0:37
section. So right here you can
0:39
individually select any template here.
0:42
Simply click on this and the template
0:44
will load. And then after that you can
0:46
actually edit the text replace the
0:49
images. Simply click on this and you can
0:52
also apply various effects instantly and
0:55
the live preview will be seen to you.
0:57
You can even change the background color
0:59
if you don't like it. And then once you
1:02
are happy with it, you click on the
1:04
download button. And then the export
1:06
functionality. You can export this to
1:08
image, PDF, HTML, GIF file. All these
1:11
files uh options are available. So if I
1:14
click on PDF, so it will exp uh export
1:17
this all the pages. You will see this is
1:20
a first page. This is a second page.
1:22
[snorts] And the thing about this editor
1:24
uh it also have all these options. So if
1:27
I want to remove this page, I can remove
1:30
it.
1:32
And we also have the redo option as
1:34
well. So undo, redo options are also
1:36
supported here. So if you just want to
1:40
add your own text, simply go to the text
1:42
option. Simply add your own text as
1:44
well. So simply adjust the size here.
1:48
You can change the color of the text,
1:51
background color, everything. You can
1:53
customize it. So all these color
1:56
combinations are there which canvas
1:57
supports here. So you simply click on
2:00
this and the text will be added directly
2:03
in the canvas here. And then we also
2:05
have options regarding this text as
2:07
well. Position, size, opacity,
2:10
everything is there. And then we also
2:13
integrated support with background
2:15
images using Unsplash API icon finder.
2:19
You can also add different kinds of
2:20
shapes as well. So if you know something
2:23
about ReactJS, if you understand the
2:25
project, you can directly modify it and
2:27
add additional features as well. So this
2:29
is the uh overall structure of the
2:31
project here. Every section is divided
2:33
into its uh appropriate JavaScript file
2:36
here. And as you can see, we have used
2:38
the latest version of ReactJS which is
2:40
18.2.0.
2:42
So you simply go to the description link
2:45
and directly purchase it. After
2:47
purchasing it, you will get the source
2:49
code from Google Drive. And uh you also
2:52
have the support for adding
2:54
uh you can also draw on the canvas as
2:56
well. Simply select the brush here and
2:59
then you can draw on the canvas. And we
3:02
also have support for adding third party
3:04
images as well. So you can add your own
3:06
images as well. Simply place it. And we
3:10
also have support for adding videos as
3:12
well. So you can third party videos you
3:15
can also add. And then we have these
3:18
backgrounds here. These gradient
3:20
backgrounds, readym made backgrounds.
3:22
You simply click on that and the canvas
3:24
will change here.
3:27
So once you're happy with it, you can
3:29
export this to now a PNG image.
3:35
So you can see everything has been
3:37
exported to a image file. So then we
3:40
also have this option of animate here.
3:42
You can also animate the text here. So
3:45
you will see you can animate everything.
3:48
You can even animate this image as well.
3:50
So now if you want to export this to a
3:53
GIF file, you simply click on this and
3:55
click on download GIF. So now all the
3:57
animations will be processed and
3:59
automatically it will created a GIF file
4:02
for you.
4:08
So this is actually everything is there.
4:10
So it's an ultimate Canva editor which
4:12
is there for you. So it's directly coded
4:16
inside ReactJS. So all the applications
4:20
uh sections are divided into its
4:22
appropriate file here.
4:26
And you can even deploy this application
4:28
as well by simply running the command
4:30
here npm run build. So this will build
4:33
out your entire project and you can also
4:35
deploy it into a domain name as well. So
4:38
it's very simple.
4:40
So definitely check out this. It will
4:44
the link is given in the description. If
4:46
you want to purchase it, you can
4:47
directly purchase it.