Build a React QR Code Scanner & Generator Web App Using jsQR Library in TypeScript

[00:03] video. So in this video I'll show you a react application that I developed which actually generates QR code and also it can also scan QR code at the same time. So it's a single page application. We are running it on local host. So as you

[00:17] can see right here this is actually the interface of the application. So right here we have first of all a search field where you can actually write your text to convert to QR code in real time. So as I'm writing the URL as you can see

[00:33] the QR code is constructed in real time and then you can download this QR code as a QR as an image file. If I click the download button, so now you will see it is saved here as a PNG file [snorts]

[00:49] and at the same time you can even scan the QR code as well. So you can copy to clipboard as well and then you can actually scan it through either an image file or you can start your camera. So if I select an image file here, the result

[01:05] will be shown here. you will see the scanned result and also you can start the camera as well and then you can scan the QR code right here. So it's a single page application that I developed in ReactJS. So this is full

[01:20] directory structure as you can see. Uh if you are interested in this project You can directly purchase the full source code and for building this application we are using as you can see the latest version of React.

[01:36] We are also using Tailwind for the interface and we are using JSQR which is a third party QR code processing library in JavaScript and for actually scanning and generating QR codes. So it's a single page

[01:52] application. No back end is there. It's all pro processing is directly happening in the browser. So once you load the application, you have the capability to application, you have the capability to actually convert the text into QR code

[02:04] or you also have the capability to scan the QR codes through image or camera as well. So you can even start camera as well. So both the buttons are given well. So both the buttons are given right here in this application.

[02:18] So it's very easy to deploy this application. You can run this locally as similarly as I'm running right here by simply npm rundev. So this will start the local development server. Or if you want to build out this uh react

[02:33] application, you can also build out. It's a complete application. Each and every component is divided into its typescript file here. So once you get the source code, you will be very easy for you to modify or add additional

[02:45] features on top of this project as well. It's a fully featured QR code generator It's a fully featured QR code generator and scanner project in ReactJS. [snorts] So the interface looks something like this.

[02:59] So in this video I just shown you this demo here. So if you are needing on this source code if you want this I've given the link in the description. You can check out the source code link. So it's a fully fresh project. This is the main

[03:14] component app.tsx TSX and we are using this QR code component right here to actually return this complete code here which is 220 lines of code here. So

[03:27] if you are interested in this the link is given in the description.