Building a Modern QR Code Generator with React and Cloudflare Workers

Building a Modern QR Code Generator with React and Cloudflare Workers

QR codes have become ubiquitous in our digital world, from restaurant menus to contact sharing. Today, I want to share how I built Peza QR Generator, a modern web application that creates QR codes for URLs, text, and contact information, deployed seamlessly on Cloudflare Workers.

The app was built so i can thinker with technologies i am not familiar with.

• Frontend: React 19 with TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• QR Generation: QRious library
• Deployment: Cloudflare Workers

🏗️ Architecture & Key Features

The app supports three distinct QR code types:

1. URLs - Automatically adds HTTPS protocol if missing
2. Plain Text - Any custom text content
3. Contact Cards - Generates vCard format for easy contact sharing

💡 Technical Highlights

Responsive Design System

Built with Tailwind CSS, the interface adapts seamlessly across devices.

vCard Generation

For contact QR codes, the app generates proper vCard format:

const generateVCard = (contact: ContactInfo): string => {
  return `BEGIN:VCARD
VERSION:3.0
FN:${contact.firstName} ${contact.lastName}
N:${contact.lastName};${contact.firstName};;;
ORG:${contact.organization}
TEL:${contact.phone}
EMAIL:${contact.email}
URL:${contact.url}
END:VCARD`;
};

Future Enhancements

• Additional QR formats
• Custom styling options
• Batch QR generation

Try the live application at qr-generator.pablopeza.com