0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you I built out
0:04
a ReactJS JSON formatter validator
0:08
minifier web application directly in the
0:10
browser. I'm running it on local host.
0:13
It's a single page application uh which
0:15
directly happens all the processing in
0:17
the browser. The interface is quite
0:19
simple. You basically come to the
0:21
application and uh you can either upload
0:24
a JSON file or basically paste a raw
0:27
JSON to get started. You can click this
0:30
button or sample. It will paste a bunch
0:33
of JSON right here. And then you have an
0:35
option right here to actually format
0:37
this by selecting whatever spaces, two
0:40
spaces, four spaces and click on this
0:43
process button. And automatically on the
0:45
right hand side your JSON will be
0:48
and then you can either click the copy
0:51
to clipboard button or you can download
0:53
this as a new JSON formatted new file.
0:57
You can also change the formatting to
0:59
four spaces and then click on. So now it
1:02
will be formatted through four spaces.
1:05
We also have the option to minify this
1:07
as well. So it's an all-in-one JSON
1:09
editor directly in the browser. So with
1:12
the single click you will able to
1:15
download this as a formatted and it also
1:19
validates your JSON as well. So if you
1:21
make any sort of mistake here let's
1:22
suppose you miss a bracket here and
1:25
click on this. So it will exactly tell
1:28
you the error which is happening on
1:31
position or line number. So after you
1:36
so exactly you see this bracket is
1:38
missing. So here you need to just add
1:40
this bracket and then again click. So
1:43
now the JSON is valid.
1:46
So also you have an option right here to
1:49
actually upload a JSON file as well. So
1:56
you can select and upload a JSON file as
2:01
well and similarly repeat the process if
2:04
you want to format this. So
2:06
automatically you can format this. So
2:08
this is a full ReactJS project. So it's
2:12
all the components are coded directly in
2:15
JSX. As you can see this is the main
2:19
So I've given the source code in the
2:21
description. So you can directly
2:22
purchase it. So once you purchase it,
2:24
you will get this directory structure.
2:26
It's coded inside latest version of
2:28
React as you can see 19. And this is the
2:32
main file here app.tsx. So we are
2:34
running this project locally here. So
2:36
simply you just need to run the command
2:38
npm rundev. So this will start the local
2:41
development server at localhost 3000. So
2:45
it's a single page application. The
2:47
interface is quite simple. Either you
2:49
can upload or you can paste your raw
2:52
JSON. After pasting it, you can simply
2:57
or validate this or minify this with a
3:00
single click. So it will do all the
3:03
processing for you directly in the
3:04
browser. It's a single page application.
3:06
As you can see, it's really fast as
3:08
well. So it's a professional JSON
3:13
validator and minifier that I developed
3:15
in ReactJS. So if you're interested the
3:17
link is given in the description you can
3:19
directly purchase the full source code.
3:21
So this is the main file here app.tsx in
3:29
So this is a fully fledged uh react
3:31
project. So once you get the source code
3:33
you will be able to modify the source
3:35
code or add additional features as well.
3:38
So it basically directly runs in the
3:40
browser here. So I just shown you the
3:43
demo here. we are running it locally.
3:46
You can even deploy this to a domain
3:49
name as well. So very simply. So the
3:52
application is very uh fast and
3:57
efficient as well. So all the processing
4:00
directly happens in the browser. It's a
4:02
single page application. So if you're
4:04
interested, the link is given in the
