Om
back

Instant QR Creator

A PROFESSIONAL QR CODE TOOLKIT, BUILT FOR SPEED.

RoleSolo Developer
TimelineFeb 2025 - Present
Share
Instant QR Creator screenshot 1
Instant QR Creator screenshot 2
Instant QR Creator screenshot 3

The Vision

A privacy-first QR code toolkit that runs entirely in the browser. Supports 7 QR data types (URL, WiFi, vCard, UPI, Calendar, SMS, Email), full visual customization, batch processing, PDF export, and built-in scan testing. The entire data pipeline is browser-local. No backend processes your data.

The Problem

Most QR code generators online are bloated with ads, force you to create accounts, slap watermarks on free downloads, or straight up upload your data to their servers. WiFi passwords, contact cards, payment links - that's sensitive information being sent to a random server just to generate a square image. I wanted something that works entirely in the browser. You type, it generates. You download, it's yours. No backend processing your data, no accounts, no limits.

Who This Is For

Small business owners generating QR codes for restaurant menus, payment links, or WiFi access. Developers who need batch processing for hundreds of codes. Designers who want full color and style control. Anyone who values privacy and doesn't want to upload their WiFi password to a random website.

Engineering Strategy

The technical reasoning behind the implementation.

Why Vite + React (Not Next.js)

This is a tool, not a content site. There's no SEO-critical dynamic content, no server-side rendering needed, no API routes for data fetching. Everything happens client-side: the QR code is generated in a canvas, styled with options, and downloaded as a blob. Vite gives sub-second hot reload during development and produces optimized static bundles. The entire app ships as a single index.html with hashed JS/CSS chunks. Vercel serves it from a CDN edge. Cold load to interactive is under 2 seconds on average connections. Next.js would add SSR/RSC complexity for zero benefit here. A framework should match the problem. This problem is 'render a canvas in the browser fast.'

Why qr-code-styling (Not qrcode.js)

Most QR libraries give you a black-and-white grid and call it a day. qr-code-styling gives full control over dot shapes (rounded, classy, extra-rounded), corner square styles, corner dot styles, colors, gradients, and logo embedding with automatic error correction adjustment. The library renders to a canvas element and exposes getRawData() for blob extraction. This means downloads are just file-saver's saveAs() with a proper filename - no server roundtrip, no blob URL UUID problems. For the live preview, the library re-instantiates on every option change and appends to a ref-tracked div. React handles the reactivity; the library handles the rendering. Clean separation.

Why Client-Side Everything

The entire data pipeline is browser-local: 1. QR String Building - buildQRString() takes structured data (WiFi credentials, vCard fields, UPI params) and formats it into standard QR encoding strings. 2. Canvas Rendering - QRCodeStyling generates the QR as a canvas/SVG element. 3. Download - getRawData('png'|'svg') extracts the blob, saveAs() triggers the browser download. 4. History & Templates - localStorage with JSON serialization. Last 10 QR codes stored. 5. Logo Embedding - FileReader.readAsDataURL() converts the uploaded image to base64 in-memory. 6. Watermark - Canvas API draws text below the QR image before blob extraction. 7. PDF Export - jsPDF renders the QR canvas to a PDF document entirely in-memory. The only external call is URL shortening, which goes through a Vercel serverless function (/api/shorten) that proxies to is.gd because is.gd doesn't send CORS headers for browser-direct requests.

Why Tailwind CSS

Same reasoning as the portfolio site. Utility-first styling means I write components and style them in the same file. The dark theme uses CSS custom properties (--background, --foreground) defined in index.css, and Tailwind references them via bg-background, text-foreground, etc. The monospace typography (JetBrains Mono) gives the entire app a technical, tool-like aesthetic that matches the audience - developers and power users who expect precision from their tools.

Why TypeScript

The app has seven distinct QR data types, each with their own interface (WiFiData, VCardData, UPIData, EventData, SMSData, EmailData, plus plain text). TypeScript guarantees that buildQRString() receives the correct shape for each type. When I added UPI support, the compiler immediately flagged every form handler that needed updating. The QROptions interface ensures the preview, customization panel, and download handler all agree on what options look like. Add a new option in one place, TypeScript shows you every component that needs to handle it.

Vercel Deployment Strategy

The app is a static SPA served from Vercel's edge CDN with specific optimizations: SPA Rewrites - All routes fallback to index.html so client-side routing works on direct navigation and page refresh. Immutable Asset Caching - Hashed JS/CSS bundles in /assets/ get Cache-Control: public, max-age=31536000, immutable. Users cache vendor chunks forever; only the entry chunk changes on deploys. Vendor Chunk Splitting - Vite's manualChunks splits the bundle into 5 cacheable groups: React core, Radix UI components, QR library, export libs (jsPDF + JSZip + file-saver), and Recharts. Security Headers - X-Content-Type-Options: nosniff, X-Frame-Options: DENY, X-XSS-Protection, strict referrer policy, and camera-only permissions policy. Fluid Compute - The /api/shorten function uses Vercel Fluid Compute for concurrent request handling on a single instance.

SEO Strategy

Even though this is a client-side SPA, SEO is handled through structured data and meta optimization: JSON-LD markup for WebApplication (with feature list, pricing, and aggregate rating), Organization, BreadcrumbList, and FAQPage (5 Q&As targeting common search queries). 17 targeted keywords covering variations: 'QR code generator', 'free QR code', 'QR code maker', 'custom QR code', 'bulk QR codes', 'WiFi QR code', 'vCard QR code'. Canonical URL, XML sitemap, robots.txt, max-image-preview:large for rich search results.

Technologies

Framework
Vite 5 + React 18 - sub-second HMR, optimized static output. No SSR needed for a pure client-side tool.
Language
TypeScript - 7 distinct QR data types (WiFiData, VCardData, UPIData, etc.) need compile-time safety.
Styling
Tailwind CSS 3 - utility-first with HSL design tokens. JetBrains Mono gives the app a technical, tool-like aesthetic.
UI Components
Radix UI + ShadCN - accessible primitives, unstyled by default, full styling control.
QR Engine
qr-code-styling - full visual customization (dot shapes, corner styles, gradients, logo embedding) with canvas/SVG output.
Export
jsPDF for client-side PDF generation, JSZip + file-saver for batch ZIP creation and download.
Hosting
Vercel Edge CDN with immutable asset caching, vendor chunk splitting, and security headers.
Serverless
Vercel Functions with Fluid Compute for the URL shortening proxy.

Core Features

  • 7 QR Code TypesNot just URLs. Generate QR codes for WiFi credentials (auto-connect on scan), vCards (full contact cards), UPI payment links, calendar events (iCal format), SMS messages, and email drafts. Each type has a dedicated form with proper field validation.
  • Full Visual CustomizationForeground and background color pickers with hex input. Five dot styles (square, rounded, dots, classy, extra-rounded). Three corner square styles. Two corner dot styles. Four error correction levels (L/M/Q/H). Three size presets. Logo image embedding with automatic error correction adjustment.
  • Real-Time Preview with Readability ScoreThe QR code re-renders instantly as you change any option. A badge shows a readability score (Good/Fair/Poor) calculated from error correction level, data density, and color contrast using luminance differencing.
  • Multi-Format DownloadDownload as PNG, SVG, or JPEG with proper filenames. Optional watermark/label text rendered below the QR code using Canvas API before blob extraction.
  • PDF ExportExport to print-ready PDF in A4 or business card (89×51mm) layout. QR code centered with label text below. Uses jsPDF for entirely client-side generation.
  • Batch ProcessingPaste multiple URLs/texts (one per line) or upload a CSV file. Generates all QR codes with current style settings and packages them into a ZIP file for download. All processing happens in the browser using JSZip.
  • Templates & HistorySave current style settings as named templates for reuse. Last 10 generated QR codes stored in localStorage with full option restoration. One-click to restore any previous QR code.
  • QR Scan TestingBuilt-in camera scanner using the BarcodeDetector API. Scan your generated QR code to verify it encodes the correct data. Shows match/mismatch status with the input data.
  • URL ShorteningToggle to shorten URLs before encoding. Uses a Vercel serverless function to proxy is.gd API (bypassing browser CORS restrictions). Shorter URLs produce less dense, more scannable QR codes.
  • Embed Code GenerationGenerate an HTML <img> tag using the QR Server API for embedding QR codes directly in websites. One-click copy to clipboard.

Next Steps