QR Architect

QR Architect is a polished QR code studio built with React, TypeScript, Vite, and Tailwind CSS. It lets users generate branded QR codes in real time, preview changes instantly, and export production-ready assets as PNG or SVG.

The app is designed as a focused single-page experience with a modern visual system, live customization controls, dark mode support, and flexible QR payload generation for common use cases like URLs, Wi-Fi credentials, social profiles, contact cards, plain text, and email links.

Overview

• Live QR code generation with instant preview updates
• Export support for SVG and PNG
• Multiple QR payload modes:
  • URL
  • Social
  • Wi-Fi
  • vCard
  • Email
  • Text
• Visual customization for:
  • Size
  • Render engine (svg or canvas)
  • Dot color
  • Background color
  • Dot pattern
  • Corner square style
  • Corner dot style
  • Error correction level
  • Center logo upload
• Persistent light/dark theme toggle via localStorage
• Responsive UI optimized for desktop and mobile layouts
• Vercel-ready SPA routing configuration

Demo Experience

The interface is split into two main areas:

• Studio: input mode selection and QR styling controls
• Preview: live QR rendering and asset download actions

This keeps the editing workflow fast and easy to understand for both casual users and production/design use cases.

Tech Stack

• React 19
• TypeScript
• Vite
• Tailwind CSS v4
• react-router-dom
• qr-code-styling
• lucide-react

Project Structure

src/
├── App.tsx
├── main.tsx
├── components/
│   └── ui/
│       └── ThemeToggle.tsx
├── features/
│   └── qr/
│       ├── components/
│       │   ├── QRControls.tsx
│       │   ├── QRDownload.tsx
│       │   ├── QRInput.tsx
│       │   └── QRPreview.tsx
│       ├── hooks/
│       │   └── useQRCode.ts
│       ├── utils/
│       │   └── generateQR.ts
│       ├── index.ts
│       └── types.ts
├── lib/
│   └── qr.ts
├── pages/
│   ├── ErrorPage.tsx
│   └── Home/
│       └── Home.tsx
└── tailwind.css

How It Works

The QR workflow is organized as a small feature module:

• useQRCode manages the live QR configuration state
• QRInput builds payload strings for different QR content types
• QRControls updates visual and rendering options
• QRPreview creates and updates the QR instance in the DOM
• createQRInstance in src/lib/qr.ts wraps qr-code-styling with the project defaults

When the configuration changes, the preview updates immediately. If the rendering engine changes between svg and canvas, the QR instance is rebuilt to keep output behavior consistent.

Supported QR Content Types

URL

Generates a QR code from a website link such as https://example.com.

Social

Builds profile URLs for:

• Instagram
• Twitter
• GitHub
• YouTube

Wi-Fi

Encodes a Wi-Fi connection string in the standard format:

WIFI:S:<ssid>;T:<type>;P:<password>;;

vCard

Creates a contact card payload using the VCARD format.

Email

Generates a mailto: QR code.

Text

Encodes plain text or arbitrary short content.

Local Development

Prerequisites

• Node.js 20+ recommended
• pnpm recommended

Install

pnpm install

If you prefer npm:

npm install

Start the development server

pnpm dev

Build for production

pnpm build

Preview the production build

pnpm preview

Run linting

pnpm lint

Deployment

This project is ready to deploy as a static single-page application.

Vercel

The repository already includes vercel.json, which rewrites all routes to index.html for SPA routing.

Typical deployment flow:

pnpm build

Then deploy the generated dist/ output through Vercel.

Production Readiness Notes

This project already has a solid front-end foundation:

• Modular feature-based structure
• Typed QR configuration model
• Real-time preview loop
• Clean separation between UI, state, and QR engine creation
• Build tooling suitable for modern frontend deployment

If you want to push it further for a broader production rollout, good next steps would be:

• Add automated tests for payload generation and config updates
• Add form validation for URLs, email addresses, and vCard fields
• Add accessibility review for keyboard navigation and announcements
• Add user-facing error states for invalid uploads or QR generation failures
• Add metadata, Open Graph tags, and analytics if this will be publicly hosted

Scripts

From package.json:

• pnpm dev - start Vite development server
• pnpm build - run TypeScript build and create production bundle
• pnpm preview - preview the built app locally
• pnpm lint - run ESLint

Design Notes

The UI uses:

• large editorial-style headings
• glassmorphism-inspired panels
• animated gradient accents
• theme-aware surfaces for light and dark mode

That makes the app feel more like a small design tool than a generic form-based utility.

License

No license file is currently included in this repository. Add one before public distribution if you want to define usage terms clearly.