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

Every QR code generator I tried had the same problems: they wanted my email, pushed subscriptions, or stored my contact data on their servers.

So I built my own. Here's how.

The Problem

I needed a simple way to share my contact info via QR code for business cards. But every tool I found:

• Required account creation
• Stored contact data on their servers
• Pushed monthly subscriptions for basic features

For something as simple as encoding a vCard string into a QR code, this felt like massive overkill.

The Solution: 100% Client-Side

I built vcardqrcodegenerator.com with a simple constraint: 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 Pro logo overlay feature
• GitHub Pages + Cloudflare — Free hosting with global CDN

How vCard QR Codes Work

A vCard is just a text format for contact info:
BEGIN:VCARD
VERSION:3.0
N:Doe;John;;;
FN:John Doe
ORG:Acme Inc
TEL;TYPE=WORK:[phone]
EMAIL:[e-mail]
END:VCARD

The QR code simply encodes this string. When scanned, phones recognize the vCard format and offer to save the contact.

The Code (Simplified)

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', '[phone]', '[e-mail]', 'Acme'),
  width: 256,
  height: 256,
  correctLevel: QRCode.CorrectLevel.H
});

That's it. No API calls, no database, no user accounts.

Monetization Without Subscriptions
I added two Pro features (one-time payment, not recurring):

Logo overlay — Add your company logo to the QR code
Bulk generation — Upload a CSV and generate hundreds of QR codes
Both use the same client-side approach. Payment is handled via Dodo Payments, and access is granted for 24 hours via localStorage.

What I Learned
Privacy sells — "No data collection" resonates with users tired of creating accounts everywhere
Simple > Feature-rich — Most users just need the basics
One-time payments work — Not everything needs to be a subscription
Try It
🔗 vcardqrcodegenerator.com

The code is on GitHub if you want to see how it works.