Giter VIP home page Giter VIP logo

prodrate's Introduction

prodRate aka Barcode Monkey

Simple client-side web app designed to remind the user whether he liked the purchased product last time or not.

Goals

It should be compatible with screen readers. The app is already green in Lighthouse but I want it to pass 100% of tests. It should work at least in latest Chrome, Edge, Firefox and Safari.

How it works

The app is based on SvelteKit, and I use Svelte Material UI as a UI library.

The app uses MediaDevices API to capture video stream from device's camera and BarcodeDetector API to search for barcodes in the stream. Since the BarcodeDetector API is still experimental, this feature has a JS fallback. Scanned barcodes are outlined and highlighted with simple canvas drawing and user is asked if he like or dislike the corresponding item. The answer is stored in IndexedDB storage so if user scans the same barcode later, he will know his previous answer.

User can share or save all his answers, as well as upload prevously saved answers into his database.

Since the app is PWA ready, it can be installed.

prodrate's People

Contributors

dependabot[bot] avatar shadow-identity avatar

Stargazers

avatar

Watchers

avatar

prodrate's Issues

a11y

  • provide captions for video / detection
  • run on screen reader to find issues

Landing + README.md

  • README.md
  • Landing with a quick intro a cookies request (for indexeddb).
  • Check consent before open the camera etc

Layout fixes

Leave only vertical layout
Put content into cards

Check for recognition errors

Sometimes BarcodeDetector fails with detection due to bad image quailty. That's critical for barcodes without EDAC.

After the first match app should detect the barcode again from another frame and continue only if two detections are the same.

Style and layout

  • Make animation for unknown barcode
  • Make button appearance more obvious
  • Unify colors
  • Make canvas responsive
  • Leave only vertical layout
  • [] Put content into cards

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.