>_ DevTrendses

Idioma

Inicio

Lenguajes

Secciones

Frontend Backend Móvil DevOps AI / ML GameDev Blockchain Embebidos Seguridad
TypeScript

Cómo dejar de pagar por servicios en línea para generar códigos QR básicos

Cada vez que un diseñador o artista de maquetación necesita un código QR limpio para una página de destino o materiales impresos, comienza la misma búsqueda. Abres el primer generador que encuentras en una búsqueda, dedicas cinco minutos ajustando colores, subes un logo, presionas el botón de descarga, y de repente el sitio exige registro, una suscripción de pago, o genera un código dinámico que redirige a través de sus servidores lentos. ¿Te suena familiar?

Hace poco descubrí un proyecto de código abierto llamado mini-qr desarrollado por un programador conocido como lyqht. Es una aplicación web ligera que hace exactamente lo que esperarías: genera rápidamente códigos vectoriales hermosos sin marcas de agua, rastreadores ni suscripciones.

Por qué este proyecto es útil en la práctica

La mayoría de los generadores de código abierto generan cuadrados negros y blancos aburridos en formato básico. Mini QR va más allá y ofrece un editor de estilo visual con control adecuado sobre el resultado.

Esto es lo que esta herramienta puede hacer:

  • Estilizar módulos y marcos. Puedes cambiar la forma de los puntos, los patrones de búsqueda (marcadores de esquina), redondear las esquinas y configurar el marco exterior con texto personalizado.
  • Insertar logos en el centro. La aplicación gestiona automáticamente el Nivel de Corrección de Errores para que los escáneres sigan leyendo el código de forma fiable incluso con el centro cubierto.
  • Plantillas de datos para diferentes tareas. No necesitas ensamblar manualmente cadenas sin formato como WIFI:S:MyNet;T:WPA;P:secret;;. La interfaz tiene formularios listos para credenciales Wi-Fi, contactos vCard, eventos de calendario, geolocalizaciones, enlaces e incluso pagos QR EPC (SEPA).
  • Exportar a cualquier formato. El resultado se entrega como SVG limpio para impresión, PNG/JPG ráster, o como caracteres ASCII/Unicode directamente en la terminal.

La exportación por lotes merece una mención especial. Puedes alimentar a la aplicación con una tabla CSV con una lista de enlaces o contactos, y generará todo un lote de imágenes con estilo consistente en un archivo. Para credenciales de conferencias o etiquetas de inventario en un almacén, esto ahorra un par de horas de trabajo rutinario.

Escáner integrado y procesamiento local

Junto al generador, la aplicación incluye un escáner. Funciona directamente a través de la transmisión WebRTC desde una cámara web o analiza una imagen subida.

Si el código contiene datos estructurados (por ejemplo, una contraseña Wi-Fi o un contacto), el escáner reconoce el tipo y muestra un botón de acción rápida. No hay solicitudes a backends de terceros aquí: todo el análisis y renderizado ocurre estrictamente en el navegador del lado del cliente. Tus datos no van a ninguna parte.

La aplicación también soporta PWA, por lo que puedes instalarla como un icono separado en tu escritorio o teléfono y usarla sin una conexión de red constante.

Bajo el capó

La pila técnica del proyecto se ve moderna y limpia:

  • Vue 3 con TypeScript
  • Construido con Vite
  • Componentes basados en shadcn-vue y Tailwind CSS
  • Localización en más de 30 idiomas a través de Crowdin
  • Pruebas de componentes a través de Storybook

Los autores se tomaron la accesibilidad en serio: la interfaz cumple con los requisitos básicos de WCAG A, soporta temas de color claro, oscuro y del sistema, y maneja correctamente caracteres UTF-8 complejos (escritura árabe, caracteres CJK, emoji).

La biblioteca interna de renderizado se puede probar por separado directamente en el Storybook público del proyecto, lo que facilita integrar componentes similares en tus propios servicios frontend.

Ejecutarlo localmente

Si no quieres usar la demo pública en Vercel o quieres desplegar el generador dentro de la red interna de tu empresa con tus propios ajustes de marca, el proyecto es fácil de poner en marcha localmente.

Clona el repositorio e instala las dependencias:

git clone https://github.com/lyqht/mini-qr.git
cd mini-qr
pnpm install
pnpm dev

Para producción, el proyecto viene empaquetado en un contenedor Docker o construido en una carpeta estática con el comando pnpm build, después de lo cual puede ser servido por cualquier servidor web como Nginx o Caddy.

El proyecto tiene licencia GPL-3.0. Esto significa que el código está abierto para bifurcaciones y autoalojamiento, pero no podrás cerrar las fuentes al modificarlo.

A quién le será útil

Mini QR aborda dos necesidades a la vez.

Primero, es una herramienta de trabajo conveniente para tareas cotidianas: imprimir una contraseña de Wi-Fi de invitados para la cocina de la oficina, preparar códigos SVG para una presentación, o formatear enlaces en credenciales de asistentes a conferencias.

Segundo, es un buen ejemplo de una aplicación Vue 3 y Tailwind de calidad. Aquí puedes ver cómo organizar flujos de trabajo de Storybook para componentes gráficos especializados, cómo configurar exportaciones de archivos convenientes, y cómo automatizar vistas previas para pull requests.

Si tratas regularmente con códigos QR, echa un vistazo a la demo o guarda el proyecto. Resuelve la tarea de forma limpia y sin ruido extra.

Proyectos relacionados