Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/furkan-dogu/qr-code-generator-and-scanner
The project I created with React includes a web application that allows users to generate QR codes and scan them to read information.
https://github.com/furkan-dogu/qr-code-generator-and-scanner
css html5-qrcode javascript react react-icons react-qr-code react-router-dom sweetalert2
Last synced: about 1 month ago
JSON representation
The project I created with React includes a web application that allows users to generate QR codes and scan them to read information.
- Host: GitHub
- URL: https://github.com/furkan-dogu/qr-code-generator-and-scanner
- Owner: furkan-dogu
- Created: 2024-01-01T18:36:38.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-01-06T19:48:57.000Z (12 months ago)
- Last Synced: 2024-01-06T20:44:57.857Z (12 months ago)
- Topics: css, html5-qrcode, javascript, react, react-icons, react-qr-code, react-router-dom, sweetalert2
- Language: JavaScript
- Homepage: https://qr-code-generator-and-scanner-woad.vercel.app
- Size: 5.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](#usage)
- [Technologies Used](#technologies-used)
- [Project Skeleton](#project-skeleton)
- [Screenshots](#screenshots)
## Live Demo
[QR Code Generator and Scanner](https://qr-code-generator-and-scanner-woad.vercel.app/)
## 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](https://react-icons.github.io/react-icons/)
- [Sweetalert2](https://sweetalert2.github.io/) for alert
- [html5-qrcode](https://www.npmjs.com/package/html5-qrcode) for the scanning
- [react-qr-code](https://www.npmjs.com/package/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.