0:00
Uh hello guys, welcome to this video. So
0:03
in this video, I'll show you a ReactJS
0:06
project that I developed which is
0:08
actually a markdown editor where you can
0:14
editing of markdown files directly
0:17
inside your browser. You can create
0:19
markdown files and we also have the
0:22
option to export your markdown into PDF.
0:25
So we have this button. So this is
0:27
actually a React project. We are running
0:30
it on locally. So this is actually the
0:33
demo here. So we have this markdown.
0:37
I pasted this markdown. And once I paste
0:40
the markdown, you will see the live
0:42
preview of the markdown.
0:45
So with the help of this application,
0:46
you can convert your markdown directly
0:50
into PDF as well. So once you you can
0:53
read your markdown directly as well. So
0:55
this is markdown viewer and editor. You
0:58
can make any sort of change and that
1:00
change will be reflected back on the
1:02
right hand side. So it shows you the
1:04
live preview and apart from that we also
1:06
have export to PDF. So once you click
1:09
the export to PDF button this window
1:11
will open and then you can simply save
1:25
So now I can open that PDF which has
1:28
been saved here. So now I can see
1:42
so yeah so this is the markdown
1:47
editor right here. So if you want to
1:50
purchase the full source code of this
1:52
project, I've given the link in the
1:53
description. So this is the overall
1:55
project here. For this we are using
1:57
quite a number of third party libraries
1:59
which is highlight JS markdown it
2:04
mermmet for the actual diagrams that you
2:09
and as you can see we are using the
2:11
latest version of react. So all the
2:13
components are divided into its
2:15
appropriate TypeScript file. So once you
2:17
get the source code you will be able to
2:18
modify the source code or add additional
2:21
features to it as well. So it's a
2:24
overall project here we running it on
2:26
local host. So once you purchase it you
2:29
will able to run this locally as well by
2:32
simply running the command npm rundev or
2:34
you can even uh deploy this project as
2:37
well to a real domain name as well. So
2:40
you will able to see how I code this
2:43
project from scratch.
2:52
So once you come to this it will look
2:54
something like this. Here you will paste
2:55
your markdown. So I paste this markdown.
2:58
And on the right hand side I see the
3:00
actual live preview of the markdown. As
3:01
you can see the markdown contains
3:04
tables. The markdown contains diagrams
3:07
unordered list everything. The source
3:10
code snippets as well. As you can see it
3:12
is perfectly highlighted in different
3:14
kinds of these are different diagrams as
3:17
well. So it's a complete react project.
3:19
Then we also have the full screen view
3:21
as well. So once you click the full
3:23
screen view you will able to actually
3:25
see the markdown in a full screen view
3:28
the actual ply preview.
3:31
Then we actually have this button here
3:34
export to PDF. So once you click the
3:36
export to PDF button.
3:41
So right here you can simply save this.
3:47
So after exporting this to PDF file. If
3:51
I show you the PDF has been successfully
3:54
generated. As you can see the markdown
3:56
has been successfully converted. All the
3:58
diagrams all the tables
4:01
is converted. all the source code
4:04
snippets as well inside your markdown is
4:06
successfully exported to PDF. So this is
4:09
a very good project that I developed
4:12
guys definitely if you are interested
4:14
you can def definitely purchase it. It's
4:17
a fullyfledged React project and we are
4:21
using uh quite a number of third party
4:24
libraries which is markdown it which is
4:27
a very famous library for working with
4:33
highlight js these are some of the third
4:35
party libraries that we are working
4:37
inside this react project. So if you're
4:40
interested guys uh you can definitely
