https://github.com/lintangwisesa/react-barcode-generator-scanner

A simple ⚛️ React app to generate & scan barcode
https://github.com/lintangwisesa/react-barcode-generator-scanner

barcode quagga react react-barcode

Last synced: about 1 year ago
JSON representation

A simple ⚛️ React app to generate & scan barcode

• Host: GitHub
• URL: https://github.com/lintangwisesa/react-barcode-generator-scanner
• Owner: LintangWisesa
• Created: 2021-03-21T09:34:15.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-22T02:33:31.000Z (about 5 years ago)
• Last Synced: 2025-04-04T10:37:30.747Z (about 1 year ago)
• Topics: barcode, quagga, react, react-barcode
• Language: JavaScript
• Homepage:
• Size: 1.08 MB
• Stars: 38
• Watchers: 3
• Forks: 26
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![simplinnovation](https://1.bp.blogspot.com/-wStk0VZDfMk/YCC0GIRPrDI/AAAAAAAAAGc/1yj7IOUedvoeO1CuCxq7ETLW0FqXni6mwCLcBGAsYHQ/s320/logotext.png)

# React Barcode Scanner & Generator

A simple React application to generate & scan barcode. 

- __Demo__:

  Click the following picture to see the demo video:

  [![Video](https://img.youtube.com/vi/A0tRKgbmbIg/0.jpg)](https://youtu.be/A0tRKgbmbIg)

- __Clone this repo__:

  ```bash

  $ git clone https://github.com/LintangWisesa/React-Barcode-Generator-Scanner.git

  $ npm i

  $ npm start

  ```

- __React UI Kit: [Material UI](https://material-ui.com/)__

    Install Material UI core:

    ```bash

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

    ```

- __Icons: [Material Design Icons](https://materialdesignicons.com/)__

    Install Material Design Icons:

    ```bash

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

    ```

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

    ```html

    

    

    

    

    ```

- __Barcode Generator: [react-barcode](https://github.com/kciter/react-barcode)__

    Install `react-barcode`:

    ```bash

    $ npm i react-barcode

    ```

- __Barcode Scanner: [quagga](https://github.com/michaeltrollan/quaggaJS#readme)__

    Install `quagga`:

    ```bash

    $ npm i quagga

    ```

- __Preview__

  Home Page

  ![./img/Home.png](./img/home.png)

  Barcode Generator Page

  

  ![./img/QRgenerator.png](./img/barcodegenerator.png)

  Barcode Scanner Page

  

  ![./img/QRscanner.png](./img/barcodescanner.png)



#### 🍔 Lintang Wisesa