0:00
Uh hello guys, welcome to this uh video.
0:03
So in this video, I'll show you a react
0:05
application that I developed which
0:07
actually generates QR code and also it
0:09
can also scan QR code at the same time.
0:12
So it's a single page application. We
0:14
are running it on local host. So as you
0:17
can see right here, this is actually the
0:19
interface of the application. So right
0:21
here we have first of all a search field
0:24
where you can actually write your text
0:28
to convert to QR code in real time. So
0:31
as I'm writing the URL as you can see
0:33
the QR code is constructed in real time
0:35
and then you can download this QR code
0:37
as a QR as an image file. If I click the
0:43
So now you will see it is saved here as
0:49
and at the same time you can even scan
0:51
the QR code as well. So you can copy to
0:54
clipboard as well and then you can
0:57
actually scan it through either an image
1:00
file or you can start your camera. So if
1:02
I select an image file here the result
1:05
will be shown here. you will see the
1:07
scanned result and also you can start
1:10
the camera as well and then you can scan
1:13
the QR code right here.
1:16
So it's a single page application that I
1:18
developed in ReactJS. So this is full
1:20
directory structure as you can see. uh
1:22
if you are interested in this project
1:24
I've given the link in the description
1:26
you can directly purchase the full
1:28
source code and for building this
1:30
application we are using as you can see
1:32
the latest version of react
1:36
we are also using tailwind for the
1:37
interface and we are using JSQR which is
1:41
a third party QR code processing library
1:47
for actually scanning and generating QR
1:50
codes so it's a single page application
1:52
no back end is there it's all pro
1:55
processing is directly happening in the
1:56
browser so once you load the application
1:58
you have the capability to actually
2:01
convert the text into QR code
2:04
or you also have the capability to scan
2:07
the QR codes through image or camera as
2:10
well so you can even start camera as
2:12
well so both the buttons are given right
2:14
here in this application
2:18
so it's very easy to deploy this
2:20
application you can run this locally as
2:23
similarly as I'm running right here by
2:25
simply npm rundev. So this will start
2:28
the local development server or if you
2:30
want to build out this uh react
2:32
application you can also build out it's
2:34
a complete application each and every
2:37
component is divided into its typescript
2:40
file here. So once you get the source
2:42
code you will be very easy for you to
2:43
modify or add additional features on top
2:46
of this project as well. It's a fully
2:49
featured QR code generator and scanner
2:54
So the interface looks something like
2:59
So in this video I just shown you this
3:02
demo here. So if you are needing on this
3:04
source code if you want this I've given
3:07
the link in the description. You can
3:08
check out the source code link. So it's
3:11
a fullyfledged project. This is the main
3:14
component app.tsx TSX and we are using
3:17
this QR code component right here to
3:19
actually return this complete code here
3:22
which is 220 lines of code here. So
3:27
if you are interested in this the link
3:29
is given in the description.
