LintangWisesa / React-QR-Generator-Scanner

A simple ⚛️ React app to generate & scan QR code

React QR Code Scanner & Generator

A simple React application to generate & scan Quick Response code (QR code).

• Demo:

  Click the following picture to see the demo video:

  

• Clone this repo:

  $ git clone https://github.com/LintangWisesa/React-QR-Scanner-Generator.git
  $ npm i
  $ npm start

• React UI Kit: Material UI

  Install Material UI core:

  $ npm i @material-ui/core @material-ui/icons

• Icons: Material Design Icons

  Install Material Design Icons:

  $ npm i @mdi/react @mdi/js @mdi/font

  Add these lines on ./public/index.html head:

  <!-- Roboto fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
  <!-- Material Icons fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

• QR Generator: qrcode.react

  Install qrcode.react:

  $ npm i qrcode.react

• QR Scanner: react-qr-reader

  Install react-qr-reader:

  $ npm i react-qr-reader

• Preview

  Home Page

  

  QR Generator Page

  

  QR Scanner Page

  

---

🍔 Lintang Wisesa