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/
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: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 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:07
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:23
will actually get a zip file here. Uh
1:26
once you extract the zip file simply you
1:28
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've 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:15
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 all-in-one
3:50
editor which can even compete with Canva
3:52
and Photoshop. You can just see here.
3:55
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:34
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.
5:06
Just select the page here and select the
5:09
template here as well. So definitely
5:12
check out this editor.
#Visual Art & Design
#Programming