DEV Community

Naimul Hasan
Naimul Hasan

Posted on

How I built a privacy-first QR scanner using Next.js (client-side decoding)

#javascript #nextjs #privacy #showdev

QR codes are everywhere now — payments, Wi-Fi access, login links, forms, event check-ins.

But most QR scanner tools still depend on one of these approaches:

  • Uploading images to a server
  • Forcing users to install a mobile app
  • Tracking user behavior and scan data

All of that introduces unnecessary privacy and security risks.

So I built a QR scanner that runs entirely in the browser using Next.js — fully client-side.

No uploads.
No storage.
No tracking.

Everything happens locally on the user’s device.

🚨 The Problem with Typical QR Scanners

Many online QR tools process images on their backend servers.

That means:

  • Wi-Fi credentials may pass through external systems
  • Authentication links can be logged
  • Private data may be stored
  • Latency increases due to upload and server processing

For something as simple as decoding a QR image, server involvement is often unnecessary — and sometimes risky.

🧠 The Idea

Use modern browser APIs and client-side decoding libraries to process QR codes directly on the user’s device.

This approach provides:

  • Faster results
  • Stronger privacy
  • No backend dependency
  • Better mobile performance

⚙️ Architecture

The scanner uses a fully client-side architecture.

Stack:

  • Next.js (App Router)
  • TypeScript
  • Tailwind CSS
  • ZXing + jsQR
  • Browser Camera APIs
  • Canvas processing

Flow:

  1. User uploads an image or opens the webcam
  2. The image is processed locally in the browser
  3. QR data is decoded using JavaScript libraries
  4. Results appear instantly
  5. Nothing is sent to any server

✨ Features

The tool supports multiple real-world QR scenarios:

  • Image-based QR scanning
  • Webcam scanning
  • Screenshot decoding
  • Wi-Fi QR analysis (SSID, password, encryption type)

All decoding happens locally inside the browser environment.

🔐 Privacy-First by Design

Privacy was the core design goal from day one.

  • No image uploads
  • No server-side processing
  • No tracking tied to QR content
  • No storage of scan results

This makes the tool safer for:

  • Wi-Fi QR codes
  • Authentication links
  • Personal or sensitive data

🚀 Performance

Because everything runs client-side:

  • Results appear instantly
  • No upload delays
  • Minimal bandwidth usage
  • Works smoothly on mobile networks

🌐 Live Demo

Try it here:
https://scanqr.ai

🔮 Roadmap & Future Improvements

Planned enhancements include:

  • Batch QR scanning
  • Drag-and-drop interface
  • PWA support
  • Offline scanning mode
  • Advanced Wi-Fi QR parsing

💬 Feedback Welcome

I’d love input from developers who have worked with:

  • Computer vision in the browser
  • Client-side decoding
  • Privacy-focused tools
  • Next.js performance optimization

Top comments (0)