Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 4 days ago
JSON representation

A simple ⚛️ React app to generate & scan barcode

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



lintang ymail


lintang facebook


lintang twitter


lintang youtube


lintang linkedin


lintang github


lintang hackster


lintang bio