0:00
Hello guys, in this video I will show
0:01
you a Vue.js Canva clone uh kind of an
0:05
editor that I built. It's a SAS software
0:08
as a free service kind of a tool. I've
0:10
given this demo link in the description
0:11
of the video. You can check out the
0:13
demo. So it's similar to Canva. We have
0:15
a canvas right here. Here you can change
0:18
the color, add text, images, everything.
0:21
And then you can export it to an image
0:22
and PDF file by going to this file menu.
0:26
It's uh completely coded inside uh
0:29
Vue.js. Let me show you the actual
0:31
source code. So this is the source code
0:37
this is a directory structure. All the
0:38
source code you can buy this source
0:41
code. The link is given in the
0:42
description. So as you can see we have
0:45
used the view 3 the latest version JS
0:48
PDF HTML to canvas fabric JS. So quite a
0:51
number of third party libraries we have
0:53
used. So once you purchase it, you will
0:55
get this directory structure. All the
0:57
components are divided into its
0:59
appropriate Vue.js files. So now to run
1:02
this project, it's very simple. You
1:04
simply run the command npm rundev. So
1:07
I've already started this localhost
1:12
So we can simply show you right here. So
1:16
it's a great tool that you can purchase
1:18
because it's similar to Canva. It has
1:23
So here you can add a title.
1:25
After that we also have support from
1:28
Unsplash. Here you can search for third
1:30
party images as well. So this API
1:33
integration is automatically done or
1:36
then you can change the background as
1:37
well. We have a layer based editor and
1:40
then you can resize it for various
1:41
social media networks as well.
1:44
And here you have the support. If you
1:53
add your own images, you can even do
1:57
So you can see that. So in this easy
2:05
we have started this local host 5173 as
2:09
So you can actually try this again
2:14
as you can see that. So we can even
2:16
change the color of the text here. Bold,
2:18
itallic, all this support is there. You
2:21
can upload your own images. You can
2:23
resize the canvas right here to any size
2:26
of your choice. And then we have the
2:27
ability to actually export it to a PDF
2:30
file as well. So you can see that. So
2:33
just go to the file menu and save this
2:35
canvas to image or PDF. So here you can
2:38
place advertisements to make it a
2:40
software as a service kind of a tool.
2:43
And let me show you the earnings using
2:45
AdSense. If I show you the last three
2:48
years using this tool.
2:52
So basically this these are the
2:54
impressions. These are the
2:57
earnings that we have made similar to
3:00
ISOIC as well which is a high paying
3:02
network. So quite a number of earnings I
3:05
made using this tool. You can deploy
3:07
this place advertisements. So the source
3:10
code is uh you can purchase it once you
3:13
purchase it automatically from Google
3:15
drive you will get the source code.
3:19
So it's coded inside Typescript. So we
3:22
have used quite a number of third party
3:24
dependencies. You can simply run this.
3:27
So I'm just running this Canva clone
3:29
kind of an editor. So you can export it
3:32
to image and PDF. So all the features of
3:34
Canva is there inside this editor. We
3:36
have also have shapes.
3:38
We have also got templates as well. So
3:41
you can select any of these templates
3:43
just using a single click and then you
3:45
can edit the text, images, all the
3:48
customization you can do. So definitely
