How I Built a Privacy-First vCard QR Code Generator (No Backend Required)

Source: Dev.to

Why I built it

Every QR code generator I tried required an email, pushed subscriptions, or stored my contact data on their servers. I needed a simple way to share my contact info via QR code for business cards without those drawbacks.

Constraints

• No backend – everything runs in the browser.
• Your contact info never leaves your device.

Tech stack

• HTML/CSS – vanilla, no frameworks
• Tailwind CSS – via CDN for styling
• qrcode.js – client‑side QR generation
• qr-code-styling – for the logo overlay feature
• GitHub Pages + Cloudflare – free hosting with global CDN

What a vCard is

A vCard is just a plain‑text format for contact information. For example:

john@example.com

When this string is encoded in a QR code, phones recognize the vCard format and offer to save the contact.

Example code (JavaScript)

// Generate a vCard string
const generateVCard = (name, phone, email, company) => {
  const [first, ...rest] = name.split(' ');
  const last = rest.join(' ');

  return `BEGIN:VCARD
VERSION:3.0
N:${last};${first};;;
FN:${name}
ORG:${company}
TEL;TYPE=WORK:${phone}
EMAIL:${email}
END:VCARD`;
};

// Generate QR code client‑side
const qrcode = new QRCode(document.getElementById('qr'), {
  text: generateVCard('John Doe', '+15551234567', 'john@example.com', 'Acme'),
  width: 256,
  height: 256,
  correctLevel: QRCode.CorrectLevel.H
});

That’s all—no API calls, no database, no user accounts.

Monetization (without subscriptions)

• Logo overlay – add your company logo to the QR code.

What I learned

The source code is available on GitHub if you want to see how it works: (replace with the actual repository URL).