⭐Building QR OrangeDesigner

QR OrangeDesigner is a browser-based visual editor for designing professional QR code cards. Users generate QR codes from text, URLs, emails, phone numbers, or WiFi credentials, then compose branded layouts on a drag-and-drop canvas with templates, shapes, and custom backgrounds — exporting the result as a high-resolution PNG.

What it does

QR generation

QRInput panel with tabbed input types:

The qrcode library generates a 256×256 data URL that syncs to all QR elements on the canvas when the user clicks Generar QR.

Visual canvas editor

Interactive 400×240px design surface:

• Drag-and-drop — click to select, drag to reposition any element
• Inline text editing — double-click text elements to edit in place
• Element types — text, rectangle, circle, triangle, and embedded QR blocks
• Toolbar — add new shapes and text from the left panel
• Property panel — edit font size, weight, color, dimensions, borders, and fill for the selected element
• Background picker — 12 solid colors and 6 gradient presets for the card background

Templates

Five pre-built card layouts in templates.ts:

1. Minimalista Blanco — clean white card with border frame
2. Tarjeta Moderna — purple gradient background
3. QR Creativo — colorful creative layout
4. Elegante Oscuro — dark elegant theme
5. Naturaleza Fresca — green/nature-inspired palette

Each template ships with positioned text, QR placeholder, and decorative elements ready to customize.

Export & preview

• Download — html2canvas captures the canvas at 2× scale and saves as PNG
• Print — browser print dialog for physical cards
• 3D preview — Tilt3DModal with mouse-tilt perspective effect to inspect the card in pseudo-3D (added in the 3d effect commit)

Editor state

useEditor hook manages the full editor state:

• Element list with add/update/delete/select
• QR data sync across all QR-type elements
• Template loading and canvas clear
• Default canvas starts from the Minimalista Blanco template

Tech stack

No backend — entirely client-side. All design work happens in the browser with instant preview.

Development process

first commit

• first commit — Full app scaffold: useEditor state hook, drag-and-drop canvas, QR input with 5 data types, 5 templates, property panel with color/gradient backgrounds, toolbar for adding shapes, PNG download via html2canvas, and print support. Branded as QR OrangeDesigner by Digital Orange.

• 3d effect — Added Tilt3DModal with interactive mouse-tilt 3D preview so users can inspect their card design with perspective before exporting.

• Kofi — Added Ko-fi donation button in the header for project support.

Deployed to qrorange.netlify.app.