QR Generator
Production URL: https://qr-generator.scottsdalemint.com/
Repository: mini-qr (Vue.js 3 + Vite)
The QR Generator is a modern, full-featured Progressive Web App (PWA) for creating, scanning, and managing QR codes with advanced customization options, encryption capabilities, and batch processing. Built with Vue 3, TypeScript, and Vite, it provides a fast, offline-capable, and privacy-focused solution that works entirely in the browser.
What Does This App Do?
| Capability | Description |
|---|---|
| QR Code Creation | Generate customizable QR codes with style presets, color schemes, logo images, and frames |
| QR Code Scanning | Scan QR codes using camera, file upload, or clipboard with intelligent type detection |
| Encryption | Password-based AES-GCM encryption for secure QR codes that only mini-qr can decrypt |
| Batch Export | Generate hundreds of QR codes from CSV files with custom data, frames, and filenames |
| PWA Support | Install as a native app on desktop and mobile with offline functionality |
| Data Templates | Pre-built templates for URLs, emails, phone numbers, SMS, WiFi, vCards, calendar events, and locations |
| Multi-language | Support for 45+ languages including CJK characters, Arabic, Vietnamese, and emoji |
| Privacy-First | All processing happens client-side - no data sent to servers, no tracking |
Technology Stack
| Layer | Technology |
|---|---|
| Framework | Vue 3 (Composition API) |
| Build Tool | Vite 5 |
| Language | TypeScript |
| UI Library | Radix Vue (accessible components) |
| Styling | Tailwind CSS 3 |
| QR Generation | Custom QR library (fork of qr-code-styling) |
| QR Scanning | html5-qrcode + nimiq/qr-scanner (fallback) |
| PWA | Vite PWA Plugin with Workbox |
| i18n | Vue I18n (45+ locales) |
| Encryption | Web Crypto API (AES-GCM 256-bit) |
| Hosting | cPanel/Apache (static files) |
Key Features
QR Code Creation
- Visual Customization: 6 dot styles, 4 corner square styles, 3 corner dot styles
- Color Control: Full color picker for dots, corners, and backgrounds
- Logo/Image: Add custom logos or images in the center with adjustable sizing
- Frames: Add custom text frames around QR codes (top, bottom, left, right)
- Presets: 15+ built-in presets (Vercel, Supabase, VueJS, Padlet, etc.)
- Error Correction: 4 levels (L, M, Q, H) with smart recommendations
- Export Formats: PNG, JPG, SVG, or ASCII/Unicode text
- Batch Processing: Generate up to 1000+ QR codes from CSV files
QR Code Scanning
- Multiple Methods: Camera scanning, file upload, drag-and-drop, or paste from clipboard
- Auto Type Detection: Recognizes URLs, emails, phone numbers, SMS, WiFi, vCards, calendar events, and geo-locations
- Smart Actions: Click-to-call, mailto links, map navigation for detected types
- Encryption Support: Auto-detects and decrypts password-protected QR codes
Security & Privacy
- Client-Side Only: All data processing happens in your browser
- No Tracking: No analytics, no cookies, no data collection
- Password Encryption: AES-GCM 256-bit encryption with PBKDF2 key derivation
- Secure by Default: HTTPS enforced for camera access and PWA installation
Repository Structure
mini-qr/
├── src/
│ ├── components/ # Vue components
│ │ ├── QRCodeCreate.vue # Main creation interface
│ │ ├── QRCodeScan.vue # Scanning interface
│ │ ├── StyledQRCode.vue # QR code renderer
│ │ ├── QRCodeFrame.vue # Frame overlay component
│ │ └── ui/ # Reusable UI components (Radix Vue)
│ ├── lib/
│ │ └── qr-code/ # Custom QR generation library
│ ├── utils/ # Utility functions
│ │ ├── encryption.ts # AES-GCM encryption/decryption
│ │ ├── qrCodePresets.ts # Style presets
│ │ ├── dataEncoding.ts # Data type encoders (vCard, WiFi, etc.)
│ │ ├── csv.ts # CSV parsing for batch export
│ │ └── convertToImage.ts # Image export utilities
│ ├── locales/ # i18n translations (45+ languages)
│ ├── App.vue # Root component
│ └── main.js # Application entry point
├── public/
│ ├── presets/ # Preset logo images
│ ├── batch_export_templates/ # Example CSV templates
│ └── app_icons/ # PWA icons
├── docs/
│ └── ENCRYPTION.md # Encryption feature documentation
├── DEPLOYMENT_CPANEL.md # cPanel deployment guide
└── vite.config.js # Vite configuration with PWA setup
Quick Navigation
- User Guide → — How to use the app
- Features → — Detailed feature documentation
- Encryption → — Security and encryption guide
- Batch Export → — CSV batch processing guide
- Technical Docs → — Developer documentation
- Deployment → — Hosting and deployment guide
Use Cases
Business Applications
- Conference Badges: Generate QR codes with encrypted contact information
- Product Labels: Batch create QR codes for inventory or product catalogs
- Event Tickets: Create secure, scannable tickets with encryption
- WiFi Sharing: Generate WiFi QR codes for guests and customers
- Digital Business Cards: vCard QR codes for easy contact sharing
Marketing & Engagement
- Campaign Tracking: Generate trackable URLs with custom styling
- Social Media: Create branded QR codes matching your brand colors
- Print Materials: Export high-resolution QR codes for business cards, flyers, and posters
- Menu Access: Restaurant menus, pricing lists, and catalogs
Personal Use
- Contact Sharing: Quick vCard generation with personal info
- Location Sharing: Geo-location QR codes for meetup spots
- Calendar Events: Share event details instantly
- Secure Notes: Encrypted text or URLs for private sharing
Getting Started
- Visit: https://qr-generator.scottsdalemint.com/
- Create Tab: Enter your data and customize the QR code
- Export: Download as PNG, JPG, or SVG
- Scan Tab: Use camera or upload images to scan QR codes
- Install: Click install button to use as a native app (optional)
For detailed instructions, see the User Guide.