← back to work

react docscan

react · opencv.js · vite — document scanner that runs fully in the browser, no upload

view live →frontendcomputer vision

the problem

Scanning a document usually means installing a native app and sending the image to somebody else's server. For anything sensitive — an ID, a contract, a tax form — that upload is the whole problem.

what i built

Everything runs client-side. Capture from the webcam or pick a file, then OpenCV.js via jscanify finds the document edges and applies perspective correction to flatten it. From there, crop, rotate and brightness/contrast tools clean it up before exporting to JPG or PNG. Because there is no backend, the file never leaves the device — which is also what makes it deployable as a static site. State is handled with Zustand and the capture/detect/edit/export flow is split into hooks so each stage can be tested on its own.

stack

react 18typescriptvitetailwindjscanifyopencv.jszustandcropper.js

interested in working together?

get in touch →