Construyendo QR OrangeDesigner

QR OrangeDesigner es un editor visual en el navegador para diseñar tarjetas profesionales con código QR. Los usuarios generan códigos QR desde texto, URLs, correos, números telefónicos o credenciales WiFi, y luego componen layouts con marca en un lienzo drag-and-drop con plantillas, formas y fondos personalizados — exportando el resultado como PNG en alta resolución.

Qué hace

Generación de QR

Panel QRInput con tipos de entrada en pestañas:

La librería qrcode genera una data URL de 256×256 que se sincroniza con todos los elementos QR del lienzo cuando el usuario hace clic en Generar QR.

Editor visual de lienzo

Superficie de diseño interactiva de 400×240px:

• Drag-and-drop — clic para seleccionar, arrastrar para reposicionar cualquier elemento
• Edición de texto inline — doble clic en elementos de texto para editar en el lugar
• Tipos de elemento — texto, rectángulo, círculo, triángulo y bloques QR embebidos
• Barra de herramientas — agregar formas y texto nuevos desde el panel izquierdo
• Panel de propiedades — editar tamaño de fuente, peso, color, dimensiones, bordes y relleno del elemento seleccionado
• Selector de fondo — 12 colores sólidos y 6 presets de gradiente para el fondo de la tarjeta

Plantillas

Cinco layouts de tarjeta predefinidos en templates.ts:

1. Minimalista Blanco — tarjeta blanca limpia con marco de borde
2. Tarjeta Moderna — fondo con gradiente morado
3. QR Creativo — layout creativo y colorido
4. Elegante Oscuro — tema oscuro elegante
5. Naturaleza Fresca — paleta verde/inspirada en naturaleza

Cada plantilla incluye texto posicionado, placeholder de QR y elementos decorativos listos para personalizar.

Exportación y vista previa

• Download — html2canvas captura el lienzo a escala 2× y guarda como PNG
• Print — diálogo de impresión del navegador para tarjetas físicas
• Vista previa 3D — Tilt3DModal con efecto de inclinación por mouse para inspeccionar la tarjeta en pseudo-3D (agregado en el commit 3d effect)

Estado del editor

El hook useEditor gestiona todo el estado del editor:

• Lista de elementos con agregar/actualizar/eliminar/seleccionar
• Sincronización de datos QR entre todos los elementos de tipo QR
• Carga de plantillas y limpieza del lienzo
• El lienzo por defecto inicia desde la plantilla Minimalista Blanco

Stack técnico

Sin backend — completamente del lado del cliente. Todo el diseño ocurre en el navegador con vista previa instantánea.

Proceso de desarrollo

QR OrangeDesigner es un editor solo en el cliente con Vite + React — códigos QR vía qrcode, export PNG con html2canvas y deploy en Netlify.

Scaffold del editor (primer commit)

• Hook useEditor para estado del lienzo, drag-and-drop y cambio de plantillas.
• 5 tipos de datos QR (URL, texto, email, teléfono, WiFi) con vista previa en vivo.
• 5 plantillas de tarjeta, panel de propiedades para colores/gradientes y formas en toolbar.
• Descarga PNG a escala 2× vía html2canvas y soporte de impresión del navegador.
• Marca QR OrangeDesigner by Digital Orange.

Modal de vista previa 3D

• Tilt3DModal con inclinación por mouse para inspeccionar la tarjeta antes de exportar.
• Render de preview separado del lienzo de exportación para evitar pérdida de resolución al descargar.

Lanzamiento y enlace de apoyo

• Botón de donación Ko-fi en el header.
• Deploy en qrorange.netlify.app con rewrites SPA para deep links.