Building a Client-Side QR Code Generator - Privacy-First, No Server Needed

#ai #privacy #tooling #qr

Most "free" QR generators route your data through a server — some even inject tracking redirects. Here's why a fully client-side approach is both simpler and more private.

Why Client-Side QR Generation Matters

A QR code is just structured data encoded into a visual matrix. There's no technical reason this needs a server round-trip.

// Using qrcode.js library — fully client-side
import QRCode from 'qrcode';

async function generateQR(text, options = {}) {
  const canvas = document.createElement('canvas');
  await QRCode.toCanvas(canvas, text, {
    color: {
      dark: options.darkColor || '#000000',
      light: options.lightColor || '#ffffff',
    },
    width: options.size || 400,
  });
  return canvas;
}

// Wi-Fi QR code format
function wifiQRString(ssid, password, security = 'WPA') {
  return `WIFI:T:${security};S:${ssid};P:${password};;`;
}

// vCard QR code format
function vCardString(name, phone, email) {
  return `BEGIN:VCARD
VERSION:3.0
FN:${name}
TEL:${phone}
EMAIL:${email}
END:VCARD`;
}

Static vs Dynamic - The Technical Difference

// Static — data encoded directly (what TechMind.click does)
generateQR("https://example.com/full-page");

// Dynamic — encodes a redirect link instead
generateQR("https://shortlink.io/abc123");
// Server then redirects abc123 → actual destination
// Editable later, but depends on shortlink.io staying online