⭐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

primer commit

• first commit — Scaffold completo de la app: hook de estado useEditor, lienzo drag-and-drop, entrada QR con 5 tipos de datos, 5 plantillas, panel de propiedades con fondos de color/gradiente, barra de herramientas para agregar formas, descarga PNG vía html2canvas y soporte de impresión. Marca QR OrangeDesigner by Digital Orange.

• 3d effect — Se agregó Tilt3DModal con vista previa 3D interactiva con inclinación por mouse para que los usuarios inspeccionen su diseño de tarjeta con perspectiva antes de exportar.

• Kofi — Se agregó botón de donación Ko-fi en el header para apoyar el proyecto.

Desplegado en qrorange.netlify.app.