Up next in 10
Buy the Full Source Code of Application here:
https://procodestore.com/index.php/product/this-react-app-just-destroys-canva-photoshop-heres-how-i-built-it/
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 a react
0:04
application that I created that will
0:06
actually destroy Canva and Photoshop.
0:09
It's actually a all-in-one editor where
0:11
you can edit your images, PDF, videos,
0:14
everything. So I'm running this
0:16
application on localhost 3000. As you
0:19
can see here, this is a React
0:21
application. So right here we have this
0:23
empty canvas similar to Canva and
0:25
Photoshop. So here you can actually
0:27
change the background color
0:29
and then we inside the left hand se
0:32
section you can add actually add text
0:34
here.
0:36
So simply click on this similar to canva
0:38
and photoshop you can adjust the size of
0:41
it and just
0:44
change the text here and we have all
0:47
these options of at the top bar. You can
0:48
bold, itallic, underline, everything is
0:51
present. You can even animate the text
0:53
as well. You can see that and then we
0:57
also have the export options download
1:00
button. So if you click on that you can
1:02
actually export this to a image PDF HTML
1:05
GIF file. So if I select image click on
1:08
download PNG. So now it will export this
1:10
everything into a image. So this is the
1:13
overall project here uh of inside
1:16
ReactJS. So if you need the full source
1:18
code of this the link is given in the
1:20
description. So you can directly
1:21
purchase it. uh after purchasing it, you
1:24
will actually get a zip file here. Uh
1:26
once you extract the zip file, simply
1:28
you need to run the project. I'm simply
1:30
running it on localhost 3000. And for
1:33
this, you do need to have NodeJS
1:35
installed. So I'm just running the
1:36
latest version of NodeJS, which is
1:38
22.17.0.
1:40
After that, you just need to say npm run
1:42
start. So this will start your ReactJS
1:45
application locally
1:48
at your local host 3000. So I have given
1:52
the link you can directly go to it and
1:54
purchase it. After purchasing it you
1:56
will automatically get the source code
1:58
from Google drive once the payment is
2:00
done. So you will see that we also have
2:03
options to add different kinds of shapes
2:06
as well. So you can even change the
2:08
background color. Then we also
2:11
integrated the support for stock images
2:14
using Unsplash. You can actually click
2:17
on any of these stock photo images. You
2:19
can even search for it in real time. So
2:22
it will search the images for you and
2:24
then you can embed those images. Use it.
2:28
You can also use your own images as well
2:31
inside the upload section. So right
2:33
here, click on the add file button to
2:35
actually upload your own images as well.
2:38
And you can add those images as well. So
2:41
it's very simple.
2:43
And uh we also have the support for
2:45
drawing. You can use the brush here.
2:49
draw something and uh we also have the
2:52
support for embedding videos as well
2:54
which is pixels. We have integrated this
2:57
support here and then we have a set of
2:59
backgrounds that Canva and Photoshop
3:01
supports. So you can actually use these
3:05
backgrounds as well like this instantly
3:07
change it and see the result here. So
3:11
it's a really awesome ReactJS
3:14
application that I created. We also have
3:16
the support for integrating third party
3:18
icons using icon finder API. And then we
3:21
also have a set of templates that you
3:23
can ready templates. You can simply
3:25
click on those templates and edit those
3:28
templates instantly. And then you can
3:30
export this let's suppose to PDF file.
3:33
Now you can click on download PDF. So
3:35
instantly this template will be exported
3:37
to PDF file. So this is the support. you
3:41
will see that you can export it to a
3:43
image file, PDF file, HTML, GIF,
3:46
animation as well. So, it's an
3:49
all-in-one editor which can even compete
3:52
with Canva and Photoshop. You can just
3:54
see here.
3:56
So,
3:58
it's very easy to run. As I already told
4:00
you, you should have just NodeJS
4:02
installed. And once you get the source
4:05
code, you can modify the source code as
4:07
well. So you can just see here all the
4:10
files have been coded inside JavaScript.
4:13
So if you understand the code here, you
4:15
can easily modify it to add additional
4:17
features as well. So you have actually
4:20
used as you can see the latest version
4:21
of React here 18.2.0.
4:24
The link is given. If you like it, you
4:27
can directly purchase it. And uh you can
4:30
just see here we have all these options
4:32
here. You also have the position option
4:35
which Canva supports. You can align them
4:37
accordingly.
4:40
You also have different effects as well.
4:42
We can blur the text here. We can change
4:44
the transparency, opacity, everything we
4:46
can do. We can even duplicate this page
4:49
here if you like it. Click on copy. Then
4:51
it will create a duplication of this
4:53
page here. So you can add a new page.
4:56
You can add multiple pages as well.
4:58
Remove certain pages. So all these
5:01
things are there. You can directly
5:03
integrate this everything here. Just
5:06
select the page here and select the
5:09
template here as well. So definitely
5:12
check out this editor.