{"id":19522559,"url":"https://github.com/lintangwisesa/react-barcode-generator-scanner","last_synced_at":"2025-04-26T09:32:14.888Z","repository":{"id":61486746,"uuid":"349953399","full_name":"LintangWisesa/React-Barcode-Generator-Scanner","owner":"LintangWisesa","description":"A simple ⚛️ React app to generate \u0026 scan barcode","archived":false,"fork":false,"pushed_at":"2021-03-22T02:33:31.000Z","size":1129,"stargazers_count":38,"open_issues_count":0,"forks_count":26,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-04T10:37:30.747Z","etag":null,"topics":["barcode","quagga","react","react-barcode"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LintangWisesa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-21T09:34:15.000Z","updated_at":"2025-02-05T15:24:29.000Z","dependencies_parsed_at":"2022-10-20T10:45:46.795Z","dependency_job_id":null,"html_url":"https://github.com/LintangWisesa/React-Barcode-Generator-Scanner","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FReact-Barcode-Generator-Scanner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FReact-Barcode-Generator-Scanner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FReact-Barcode-Generator-Scanner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FReact-Barcode-Generator-Scanner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LintangWisesa","download_url":"https://codeload.github.com/LintangWisesa/React-Barcode-Generator-Scanner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967317,"owners_count":21515573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["barcode","quagga","react","react-barcode"],"created_at":"2024-11-11T00:39:37.276Z","updated_at":"2025-04-26T09:32:13.994Z","avatar_url":"https://github.com/LintangWisesa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![simplinnovation](https://1.bp.blogspot.com/-wStk0VZDfMk/YCC0GIRPrDI/AAAAAAAAAGc/1yj7IOUedvoeO1CuCxq7ETLW0FqXni6mwCLcBGAsYHQ/s320/logotext.png)\n\n# React Barcode Scanner \u0026 Generator\n\nA simple React application to generate \u0026 scan barcode. \n\n- __Demo__:\n\n  Click the following picture to see the demo video:\n\n  [![Video](https://img.youtube.com/vi/A0tRKgbmbIg/0.jpg)](https://youtu.be/A0tRKgbmbIg)\n\n- __Clone this repo__:\n\n  ```bash\n  $ git clone https://github.com/LintangWisesa/React-Barcode-Generator-Scanner.git\n  $ npm i\n  $ npm start\n  ```\n\n- __React UI Kit: [Material UI](https://material-ui.com/)__\n\n    Install Material UI core:\n    ```bash\n    $ npm i @material-ui/core @material-ui/icons\n    ```\n\n- __Icons: [Material Design Icons](https://materialdesignicons.com/)__\n\n    Install Material Design Icons:\n    ```bash\n    $ npm i @mdi/react @mdi/js @mdi/font\n    ```\n\n    Add these lines on `./public/index.html` head:\n    ```html\n    \u003c!-- Roboto fonts --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\u0026display=swap\" /\u003e\n    \u003c!-- Material Icons fonts --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" /\u003e\n    ```\n\n- __Barcode Generator: [react-barcode](https://github.com/kciter/react-barcode)__\n\n    Install `react-barcode`:\n    ```bash\n    $ npm i react-barcode\n    ```\n\n- __Barcode Scanner: [quagga](https://github.com/michaeltrollan/quaggaJS#readme)__\n\n    Install `quagga`:\n    ```bash\n    $ npm i quagga\n    ```\n\n- __Preview__\n\n  Home Page\n\n  ![./img/Home.png](./img/home.png)\n\n  Barcode Generator Page\n  \n  ![./img/QRgenerator.png](./img/barcodegenerator.png)\n\n  Barcode Scanner Page\n  \n  ![./img/QRscanner.png](./img/barcodescanner.png)\n\n\u003chr\u003e\n\n#### 🍔 Lintang Wisesa\n\n\u003cbr\u003e\n\n\u003ca href=\"mailto: lintangwisesa@ymail.com\"\u003e\n  \u003cimg align=\"left\" style=\"margin-right:10px\" alt=\"lintang ymail\" width=\"22px\" src=\"https://camo.githubusercontent.com/b6e5ff081d7552ec05656de193794847e14d47ad/68747470733a2f2f732e79696d672e636f6d2f63762f61706976322f6d79632f6d61696c2f4d61696c5f694f535f6170705f69636f6e2e706e67\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://web.facebook.com/lintangbagus/\"\u003e\n  \u003cimg align=\"left\" style=\"margin-right:10px\" alt=\"lintang facebook\" width=\"22px\" src=\"https://camo.githubusercontent.com/a461898d72dd9f4c8c526dfcca9dfdc8a8c69605/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f352f35312f46616365626f6f6b5f665f6c6f676f5f253238323031392532392e7376672f3130323470782d46616365626f6f6b5f665f6c6f676f5f253238323031392532392e7376672e706e67\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://twitter.com/Lintang_Wisesa\"\u003e\n  \u003cimg style=\"margin-right:10px\" align=\"left\" alt=\"lintang twitter\" width=\"24px\" src=\"https://camo.githubusercontent.com/b6943877f3d8a1269974b9f820388403ee2b1978/68747470733a2f2f332e62702e626c6f6773706f742e636f6d2f2d4e786f754d6d7a32624f592f54385f61633937636573492f41414141414141414767302f65337659315f62646e62452f73313630302f547769747465722b6c6f676f2b323031322e706e67\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://www.youtube.com/user/lintangbagus\"\u003e\n  \u003cimg style=\"margin-right:10px\" align=\"left\" alt=\"lintang youtube\" width=\"29px\" src=\"https://www.pinclipart.com/picdir/big/55-557137_a-quiet-drifter-takes-a-janitorial-job-at.png\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://www.linkedin.com/in/lintangwisesa/\"\u003e\n  \u003cimg style=\"margin-right:10px\" align=\"left\" alt=\"lintang linkedin\" width=\"24px\" src=\"https://camo.githubusercontent.com/0d70d8c72e2f45755511d6799489dc49d0e325f0/68747470733a2f2f692e70696e696d672e636f6d2f6f726967696e616c732f63652f30392f33632f63653039336337323134616433353762623636356366643266363661386236622e706e67\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://github.com/LintangWisesa\"\u003e\n  \u003cimg style=\"margin-right:10px\" align=\"left\" alt=\"lintang github\" width=\"23px\" src=\"https://camo.githubusercontent.com/11406e7ae7d4716fcc586cddf450451576d71bef/68747470733a2f2f696d6167652e666c617469636f6e2e636f6d2f69636f6e732f7376672f32352f32353233312e737667\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://www.hackster.io/lintangwisesa\"\u003e\n  \u003cimg style=\"margin-right:10px\" align=\"left\" alt=\"lintang hackster\" width=\"23px\" src=\"https://user-images.githubusercontent.com/10383395/49821324-358fa080-fda0-11e8-8b00-def2a67fc598.png\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://lintangwisesa.github.io/me/\"\u003e\n  \u003cimg style=\"margin-right:10px\" align=\"left\" alt=\"lintang bio\" width=\"24px\" src=\"https://avatars2.githubusercontent.com/u/30064213?s=460\u0026u=6640a1c3d5c1892283e1c273006755de8d32fa59\u0026v=4\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flintangwisesa%2Freact-barcode-generator-scanner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flintangwisesa%2Freact-barcode-generator-scanner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flintangwisesa%2Freact-barcode-generator-scanner/lists"}