Logo Studio | Michaell Alavedra

La gestión y preparación de identidad visual para entornos web requiere múltiples iteraciones: desde la adaptación de logotipos vectoriales hasta la generación de manifiestos para Progressive Web Apps (PWAs), íconos de diferentes resoluciones y tarjetas sociales (OpenGraph). El problema fundamental radica en la fricción que introducen las herramientas de diseño gráfico tradicionales, que están desconectadas del entorno de desarrollo web, y las herramientas en línea que requieren procesamiento en el servidor, exponiendo activos a latencias de red y problemas de privacidad.

La solución que implementé consiste en una herramienta que traslada íntegramente la carga de procesamiento al navegador del cliente (client-side). Esto permite ingestar gráficos vectoriales escalables (SVG), analizarlos estructuralmente para extraer metadatos (dimensiones, paletas de colores), y aplicar transformaciones geométricas y cromáticas en tiempo real antes de empaquetar los artefactos generados en múltiples formatos.

Flujo Operativo Principal

Ingesta y Normalización: El usuario carga un archivo SVG. El sistema lo analiza utilizando un DOMParser, extrayendo dimensiones intrínsecas (viewBox) y estructurando un árbol de propiedades de color.
Transformación en Tiempo Real: El espacio de trabajo en el lienzo permite aplicar escalas, traslaciones y reemplazos cromáticos dinámicos.
Previsualización Contextual: Los metadatos de configuración (radios de borde, fondos, colores de tema) se inyectan en componentes de React que simulan entornos nativos (Web, Móvil, OpenGraph, Manifiesto PWA).
Empaquetado y Exportación: Mediante la rasterización programática en elementos <canvas>, los vectores modificados se convierten a PNG o se reescriben como SVG modificados. Se generan dinámicamente configuraciones JSON (manifest.json, app.json) y se consolidan en un archivo comprimido asíncrono para su descarga.

Arquitectura de Software

La aplicación sigue principios de separación de responsabilidades, operando como un monorepo que divide el enrutamiento estático, el manejo de estado reactivo y la persistencia local. He optado por una arquitectura Local-First híbrida.

Modelo Estructural

He desacoplado la carga estructural de la página, manejada por un motor estático y de enrutamiento (Astro), de los flujos de interacción de alta fidelidad, que recaen en componentes reactivos (React). Esto minimiza el bloqueo del hilo principal y acelera la métrica Time-to-Interactive.

graph TD
    Client["Cliente / Navegador"] --> AstroRouter["Astro: Enrutador y Static Shell"]
    AstroRouter --> ReactApp["React: Complejidad Reactiva"]

    subgraph Client-Side Rendering
        ReactApp --> EditorState["Gestión de Estado y Eventos"]
        ReactApp --> GeneratorLibs["Librerías Generadoras: SVG, PWA, OG"]
    end

    subgraph Local Persistence
        EditorState <--> DexieDB["(IndexedDB / Dexie.js)"]
        DexieDB --> SyncEngine["Live Queries"]
    end

    GeneratorLibs --> CanvasAPI["Rasterización en Canvas"]
    CanvasAPI --> Export["Generación de .zip / .png"]

Gestión de Estado y Eventos

El núcleo interactivo se gestiona a través de React con un estado derivado de persistencia activa (Live Queries). Las acciones del usuario (drag & drop, inputs cromáticos) emiten eventos que mutan directamente la base de datos local. El componente de interfaz está suscrito a estos cambios, garantizando que el origen de la verdad (Source of Truth) sea siempre la capa de datos y no el estado efímero en memoria de React.

Modelado de Datos (IndexedDB)

La persistencia se maneja mediante Dexie.js, proveyendo un esquema asíncrono sobre IndexedDB. El modelo principal, Project, es una entidad agregada que consolida tanto los activos crudos (SVG) como los parámetros de configuración de salida.

erDiagram
    Project {
        number id PK
        string name
        string svgContent "Carga útil vectorial original/normalizada"
        object colors "Mapa llave-valor de recolorización"
        number borderRadius
        string backgroundColor
        number logoScale
        number logoX
        number logoY
        string displayMode "PWA: standalone, fullscreen, etc."
        string themeColor "PWA Manifest"
        string appBackgroundColor "PWA Manifest"
        array selectedSizes "Dimensiones de exportación"
        array selectedExtraAssets "Activos adicionales: favicon, og, manifest"
        date createdAt
        date updatedAt
    }

Esta estructura aplanada y desnormalizada está optimizada para lecturas y escrituras atómicas de un solo documento por sesión de trabajo, lo cual es ideal para una arquitectura orientada a documentos en el navegador.

4. Stack Tecnológico

Las decisiones de herramientas responden a criterios de máxima eficiencia en el cliente y compatibilidad con estándares de red modernos.

Capa / Dominio	Tecnología	Justificación Técnica
Framework Shell	Astro (v5.2.5)	Renderizado inicial rápido, SEO, gestión de enrutamiento por carpetas, soporte nativo de i18n (`[lang]`).
Capa Interactiva	React (v19)	Gestión de interfaces complejas (UI Editor), ciclos de vida de canvas, componentes de arrastrar y soltar.
Persistencia Local	Dexie.js (v4.3)	Abstracción de IndexedDB. Permite consultas asíncronas y reactivas (`useLiveQuery`) sin bloquear la UI.
Estilos y CSS	Tailwind CSS (v4)	Sistemas de diseño mediante utilidad pura, facilitando variables locales y soporte nativo a modo oscuro.
Manipulación SVG/PNG	Canvas API & JSZip	Transformación client-side de vectores a mapas de bits. Consolidación de exportaciones en memoria.
Generación OpenGraph	Satori	Motor JSX-a-SVG para construir las imágenes meta-sociales, configurado para uso de fuentes locales WOFF2.
Linting y Formateo	Biome.js	Herramienta unificada de análisis estático, reemplazando ESLint y Prettier con mejoras exponenciales en tiempo de ejecución.
Testing	Vitest / Playwright	Pruebas unitarias para utilidades y end-to-end para flujos de interacción del usuario.

Conclusión

La implementación de este sistema evidencia que trasladar el flujo completo de procesamiento gráfico al cliente mitiga la dependencia en infraestructuras de backend dedicadas, eliminando costos de transferencia, persistencia en nube y latencia en tiempo de manipulación. El uso de IndexedDB asegura resiliencia estructural entre sesiones, y la composición híbrida de Astro y React garantiza una distribución estática óptima sin sacrificar la sofisticación del estado en el cliente.