InnovaQR — Spec

🏗️

Arquitectura

┌──────────────────────────────────────────────┐       POST /api/qr/generate       ┌──────────────────────────────────────────────┐
│  Blazor WebAssembly                       │  ───────────────────────────────→  │  ASP.NET Core API                    │
│  (Frontend)                                │  ←───────────────────────────────  │  (Backend)                             │
│                                            │                                       │
│  · UI con componentes Blazor               │                                       │  · Generación QR (QrCode.Net)       │
│  · Formulario + subida de logo             │                                       │  · Logo overlay (ImageSharp)        │
│  · Previsualización en vivo                │                                       │  · Sin DB · Sin ORM · Stateless     │
│  · Descarga PNG                            │                                       │                                      │
└──────────────────────────────────────────────┘                                       └──────────────────────────────────────────────┘

🔄 Flujo de una petición

1 URL + logo → 2 Ajustar colores / tamaño → 3 POST /api/qr/generate → 4 Generar QR (H) → 5 Superponer logo → 6 Descargar PNG

🧱

Stack Tecnológico

Capa	Tecnología	Propósito
Lenguaje	C#	Unifica todo el proyecto
Runtime	.NET 9.0	SDK instalado y listo ✅
Frontend	Blazor WebAssembly	Componentes C# compilados a WASM
API	ASP.NET Core Web API	Endpoints REST ligeros
QR	`QrCode.Net`	Generación QR puro en C#
Imágenes	`SixLabors.ImageSharp`	Overlay de logo, redimensionado, PNG
Deploy	Cloudflare Pages + VPS	Frontend gratis, API desde $5–10/mes

📡

API REST

2 endpoints

◉ `POST /api/qr/generate`

Genera un código QR con las opciones especificadas y opcionalmente un logo superpuesto.

Request · `application/json`

JSON

{
  "content":         "https://ejemplo.com",
  "size":           500,
  "foreground":     "#000000",
  "background":     "#FFFFFF",
  "errorCorrection": "H",
  "logoBase64":      "data:image/png;base64,iVBORw0KGgo...",
  "logoSize":       120
}

Campo	Tipo	Default	Descripción
`content`	`string`	—	URL o texto a codificar (requerido)
`size`	`int`	`400`	Tamaño en píxeles (200–2000)
`foreground`	`string`	`"#000000"`	Color de los módulos QR
`background`	`string`	`"#FFFFFF"`	Color de fondo
`errorCorrection`	`string`	`"H"`	L (7%), M (15%), Q (25%), H (30%)
`logoBase64`	`string`	`null`	Imagen del logo en base64 (data URI)
`logoSize`	`int`	`size × 0.25`	Tamaño del logo en píxeles

📤

Response: 200 OK · Content-Type: image/png — cuerpo binario de la imagen PNG.
Errores: 400 si falta content, 413 si el logo excede 2MB.

● `GET /api/health`

JSON

{ "status": "ok", "version": "1.0.0" }

🎨

Funcionalidades

v1.0 — MVP

✅ Input de URL / texto

✅ Subir logo (PNG/JPG)

✅ Nivel de corrección (L/M/Q/H)

✅ Tamaño del QR (200–2000 px)

✅ Color foreground / background

✅ Vista previa en vivo

✅ Descargar como PNG

✅ Responsive (móvil incluido)

✅ Sin registro · Sin cuenta

v2.0 — Próximas

⏳ Exportar SVG vectorial

⏳ Drag & drop de logo

⏳ QR con formas personalizadas

⏳ Gradientes en foreground

⏳ Generación por lote (CSV)

⏳ Acortador de URLs

⏳ Modo oscuro / claro

⏳ Historial (DB opcional)

💡

Notas Técnicas

◉ Corrección de Error — Nivel H

Los QR tienen 4 niveles de corrección. Usamos nivel H (el más alto, 30% de redundancia) para que el logo en el centro no impida la lectura.

L = ~7% redundancia
M = ~15% redundancia
Q = ~25% redundancia
H = ~30% redundancia ← este usamos

◇ Logo Overlay — Algoritmo

Paso a paso de cómo se genera el QR final:

Generar QR con QrCode.Net
Redimensionar logo al tamaño correcto
Calcular posición central del QR
Superponer logo con fondo blanco
Exportar como PNG

🔮 Sin Estado (Stateless)

La API no guarda nada entre peticiones. Cada POST /api/qr/generate recibe todos los datos y devuelve la imagen. Zero configuración para escalar.

🚀

Deploy

Componente	Destino	Costo	Estado
Spec HTML	`innovaqr-spec.pages.dev`	Gratis	✅ Desplegado
Frontend (Blazor WASM)	Cloudflare Pages	Gratis	⏳ Pendiente
API (ASP.NET Core)	Railway / Fly.io / VPS	Desde $5–10 USD/mes	⏳ Pendiente

📋

Checklist de Implementación

☐ Scaffold del proyecto .NET (api + frontend) Pendiente

☐ Implementar QrGenerator.cs Pendiente

☐ Implementar LogoOverlay.cs Pendiente

☐ Endpoint POST /api/qr/generate Pendiente

☐ Endpoint GET /api/health Pendiente

☐ Pruebas unitarias de generación QR Pendiente

☐ Blazor Frontend — formulario Pendiente

☐ Blazor Frontend — preview Pendiente

☐ Blazor Frontend — descarga Pendiente

☐ Deploy API Pendiente

☐ Deploy Frontend Pendiente

☐ Prueba integral Pendiente