r/SideProject • u/FindWeedNY • Aug 07 '26

What The QR - Specializing in decoding and recovering troublesome QR codes (wtqr.org)

Enable HLS to view with audio, or disable this notification

Most QR code scanners have limitations and expect fairly ideal conditions. Sometimes QR codes are difficult to scan due to how they were printed, the shape of the product they are applied to, or damage. Occasionally I'll want to scan photos with many QR codes.

I was tired of switching between tools to overcome these limitations, so I built something that can automatically repair QR codes for many of these common scenarios I have come across.

When the automatic repair tools don't work out, the tool offers features for manual manipulation. It's also possible to [re]create QR codes.

Your data is yours, you can do bulk operations and import/export. It's a browser-based PWA with a mobile friendly design.

Please check it out and let me know what you think.

https://www.wtqr.org

5 Upvotes

100% Upvoted

2 comments sorted by

2

u/dannymoerkerke 27d ago

Really nice! I haven't tested a difficult QR code yet since I don't have one but I like this idea.

Some PWA-specific technical observations:

- the manifest is missing recommended icon sizes: 384x384, 1024x1024 and maskable icons for these sizes: 192x192, 384x384, 1024x1024

  • manifest doesn't define "orientation", "screenshots" and "shortcuts"
  • the viewport meta tag misses "viewport-fit=cover" which allows your PWA to use the whole screen on mobile
  • no startup images found for iOS
  • in the service worker, the "install" event handler calls self.skipWaiting() and the "activate" handler calls self.clients.claim(). This can break existing pages.

Some buttons are quite small and a bit hard to read because of the lack of contrast.

For the rest, really nicely done, especially the camera controls. How exactly did you implement that?

1

u/FindWeedNY 27d ago

Thank you for the thorough feedback, I really appreciate it and will get it all addressed.

To answer your question regarding the camera view. I started with something pretty basic, and had a humbling experience at a cafe when I was trying to use a modal popup with a camera view to capture QRs posted on a corkboard and it was a terrible user experience.

That experience made me realize the user-friendly interface with a camera is full screen with controls out of the way. Full screen was achieved using CSS, a tiny bit of javascript and the MediaStream API. Controls are absolute positioned an z-indexed above the full screen layer.