QR Code Generator and Scanner

About the Project

The project I created with React includes a web application that allows users to generate QR codes and scan them to read information.

Table of Contents

• Usage
• Technologies Used
• Project Skeleton
• Screenshots

Live Demo

QR Code Generator and Scanner

Usage

Scanning a QR Code

• On the main page, click on the 'Scanner' option.
• Direct your camera towards the QR code.
• Once the code is scanned, the relevant information will be displayed.

Creating a QR Code

• On the main page, click on the 'Generator' option.
• Enter the required information (e.g., text, link, or other data types).
• Obtain the QR code by clicking the 'Download' button

Technologies Used

• React
• React-Router-Dom
• Icons from React Icons
• Sweetalert2 for alert
• html5-qrcode for the scanning
• react-qr-code for the creating

Project Skeleton

QR Code Generator and Scanner (folder)
|
|----readme.md         
SOLUTION
├── public
│    └── index.html
├── src
│    ├── assets
│    │     └── [images]
│    ├── components
│    │     ├── Generator.jsx
│    │     └── Scanner.jsx
│    ├── pages
│    │     └── Home.jsx
│    ├── router
│    │     └── router.js
│    ├── App.js
│    ├── index.css
│    └── index.js
├── package.json
└── yarn.lock

Screenshots

Compatibility

The project is compatible with both wide-screen computers and mobile devices.