/React-QR-Generator-Scanner

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

Primary LanguageJavaScript

simplinnovation

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:

    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

    ./img/Home.png

    QR Generator Page

    ./img/QRgenerator.png

    QR Scanner Page

    ./img/QRscanner.png


🍔 Lintang Wisesa


lintang ymail lintang facebook lintang twitter lintang youtube lintang linkedin lintang github lintang hackster lintang bio