Horacio Ontiveros

El Problema

Los portafolios arquitectónicos exigen fidelidad visual extrema: imágenes de alta resolución que documentan detalles estructurales. Los frameworks tradicionales introducen Layout Shifts masivos (CLS), tiempos de LCP deficientes y un SEO fragmentado entre regiones, destruyendo tanto la experiencia de usuario como la visibilidad en buscadores.

La Solución

Ingeniería de una plataforma estática multiidioma de alto rendimiento con Astro 5 + Vue.js 3, combinando arquitectura de islas con pipelines de imágenes en tiempo de build para lograr estados de entrada sin JavaScript, integridad de layout perfecta e internacionalización instantánea.

Arquitectura de Islas e Hidratación Parcial

En lugar de forzar un bundle JS monolítico al cliente, los componentes interactivos se hidratan quirúrgicamente:

• HeroSlider.vue usa hidratación diferida (client:idle) para priorizar la carga del contenido crítico above-the-fold.
• MasonryGallery.vue usa client:visible, inicializando el grid dinámico con Macy.js únicamente cuando entra en viewport, ahorrando tiempo de ejecución en el hilo principal.

Pipeline Automatizado de Imágenes

Para gestionar fotografías arquitectónicas de varios megabytes, se implementó un pipeline de procesamiento en tiempo de build con Sharp:

• Inspección dinámica de metadatos y aplicación de anchos máximos estructurales (1920px)
• Generación automática de formatos next-gen (.webp, .avif)
• Hardcoding de aspect ratios dinámicos en el DOM para eliminar por completo el CLS

Filtrado Asíncrono Multi-Criterio

Sistema de filtrado event-driven entre elementos Astro estáticos y componentes Vue reactivos: CustomEvent('projectFilter') a través de listeners globales en window. El grid de masonry actualiza su estado, ejecuta los cambios de DOM vía nextTick y fuerza recálculos de layout exactamente después de cada micro-interacción.

SEO Multiregión e i18n

• Enrutamiento multi-locale concurrente (/es/, /en/, /fr/)
• Sitemaps de idioma automatizados con inyecciones regionales (sitemap-en.xml, etc.)
• Estructuras JSON-LD estrictas con palabras clave contextuales como VisualArtwork y metadatos geo-targetizados dinámicos

Resultado

Lighthouse 100/100 en Mobile Performance. Carga total por debajo de 1 segundo con componentes visuales pesados, enrutamiento multiidioma dinámico y sets de imágenes responsive que eliminaron completamente el overhead de datos entre dispositivos.

🚀 Caso de Estudio: Motor de Logística Empresarial y Flujo de Órdenes

Rol: Lead Product Engineer (Arquitectura & UI)
Tech Stack: Python, FastAPI, React/UI, PostgreSQL (Supabase), Google Cloud Platform (Cloud Run), Docker, Asyncio.

🛑 El Problema

Las operaciones regionales del cliente estaban bloqueadas por un sistema manual y desarticulado. Procesar logística, calcular polígonos de entrega complejos, aplicar niveles de precios dinámicos y notificar a los clientes requería múltiples intervenciones humanas. Esto resultaba en alta latencia operativa y un mayor margen de errores críticos mientras el negocio intentaba escalar.

📐 La Arquitectura

Abordé este desafío con una mentalidad de Design-to-Deployment: primero mapeando una experiencia de usuario impecable, y luego ingeniando un backend altamente tolerante a fallos y orientado a eventos para soportarla.

⚙️ Ejecución Técnica e Impacto

1. UI y Frontend sin fricción
Aproveché mi experiencia en diseño para construir una interfaz intuitiva y reactiva que abstrae la complejidad subyacente de los operadores, reduciendo el tiempo de capacitación a casi cero.

2. Orquestación Serverless (GCP & Python)
Diseñé un OrderWorkflowManager central usando Python y FastAPI. El backend está contenerizado mediante un Dockerfile multi-stage y desplegado en Google Cloud Run, optimizado para eliminar cold starts y mantener tiempos de respuesta por debajo de 200ms.

3. Procesamiento Async y Orientado a Eventos
Para evitar el bloqueo de la UI durante operaciones pesadas, implementé patrones avanzados de asyncio. Mientras el sistema calcula ray-casting complejo para polígonos de entrega vía Google Maps y ejecuta transacciones ACID en PostgreSQL, simultáneamente:

• Genera recibos PDF físicos en memoria y los sube a Google Cloud Storage.
• Sincroniza tratos y datos de clientes con Pipedrive CRM.
• Dispara Webhooks de WhatsApp en tiempo real vía Respond.io.

🏆 Resultados de Negocio

Se entregó un sistema robusto cubierto por +100 pruebas unitarias (pytest + mocking) para garantizar cero tiempo de inactividad en producción. La plataforma digitalizó por completo el flujo de trabajo regional de la organización, transformando un proceso manual lento y propenso a errores en un motor logístico automatizado y en tiempo real.

El Problema

Los fotógrafos profesionales operan con un flujo de trabajo fragmentado: una herramienta para entregar galerías de alta resolución, otra para rastrear selecciones del cliente, y un CMS separado para actualizar su portafolio público. Esta desconexión les cuesta horas de entrada manual de datos y gestión de assets por cada sesión fotográfica.

La Solución

Arquitectura y desarrollo de una plataforma SaaS centralizada y por suscripción que unifica la entrega al cliente con la generación de portafolio. El sistema permite a los fotógrafos compartir galerías de forma segura mediante códigos de acceso, que los clientes curren sus tomas favoritas, y publica automáticamente las imágenes aprobadas en un portafolio público optimizado para SEO.

Pipeline de Media de Alto Rendimiento

Pipeline automatizado de assets con Python/FastAPI: al subir una imagen RAW de alta resolución, el backend la intercepta, procesa un preview .webp liviano con Pillow, y sube ambos archivos a Google Cloud Storage. Para proteger la propiedad intelectual, todo el acceso a imágenes está restringido detrás de Signed URLs generadas dinámicamente con expiraciones estrictas.

Uploader Concurrente en Lotes (Vue 3)

Para manejar cientos de archivos de varios megabytes sin colapsar el navegador, desarrollé un componente Vue 3 personalizado (GCSUploader.vue) que procesa archivos en lotes concurrentes de tres. Ofrece seguimiento de progreso en tiempo real por archivo y captura instantáneamente errores de cuota excedida del backend (HTTP 403) para activar modales de upsell premium.

Motor de Suscripción con Stripe Webhooks

Motor de suscripción completamente funcional mediante Stripe Webhooks: el backend escucha eventos checkout.session.completed para actualizar automáticamente a usuarios al tier PRO. Lógica de negocio para aplicar cuotas en base de datos (tier Free: 3 galerías vs. PRO: 50 galerías) y revocaciones de acceso por vencimiento de tiempo.

UI Dark Mode y Portafolios Dinámicos

Interfaz dark mode intuitiva inspirada en Adobe construida con Tailwind CSS. Los portafolios públicos dinámicos incluyen generación de schema JSON-LD para SEO y galerías lightbox reactivas con navegación por teclado.

Economía del Negocio

Aplicación production-ready con PostgreSQL Row-Level Security (RLS). La plataforma está arquitectada para operar con un margen de ganancia superior al 90% en sus tiers de suscripción: hosting de media en Google Cloud Storage a fracciones de centavo y deployments serverless para el frontend mantienen los costos de infraestructura prácticamente en cero.

🚀 Caso de Estudio: Agenda Citara — SaaS de Agendamiento Multi-tenant & Control de Flujo en Tiempo Real

Rol: Lead Full Stack & Architecture Engineer
Tech Stack: Next.js 15 (App Router), Supabase (PostgreSQL, RLS, WebSockets), Tailwind CSS, Stripe (Metered Billing), Node.js (Baileys WA Socket), AWS S3.

🛑 El Problema

Los profesionales de servicios (médicos, terapeutas, consultores) lidian con calendarios rígidos. Cuando una sola cita se extiende 15 minutos, el resto del día colapsa — salas de espera llenas y clientes frustrados. Además, los recordatorios automáticos de WhatsApp vía proveedores tradicionales como Twilio tienen costos unitarios elevados que erosionan los márgenes de los profesionales independientes.

📐 La Solución

Diseñé una plataforma de agendamiento multi-tenant altamente escalable. Más allá de las funciones estándar de reserva, Citara introduce un Módulo de Control de Flujo en Tiempo Real (MTR) que recalcula y desplaza dinámicamente toda la agenda del día si una cita se extiende. Para resolver el problema del costo de notificaciones, construí una arquitectura de mensajería híbrida que permite a los usuarios usar plantillas oficiales o conectar su WhatsApp personal mediante un microservicio descentralizado.

⚙️ Ejecución Técnica & Arquitectura

1. Motor MTR & Reprogramación Dinámica
Un motor algorítmico (/api/mtr/appointment/delay) intercepta los check-outs tardíos. Cuando una sesión excede su tiempo asignado, el sistema calcula el desfase en minutos, verifica los límites de buffer configurados por el usuario y propaga el retraso a todas las citas siguientes. Los clientes reciben automáticamente un mensaje de WhatsApp con su nuevo horario ajustado.

2. Microservicio Híbrido de WhatsApp Desacoplado
Diseñé un sistema de mensajería de doble canal para reducir drásticamente los costos de notificación. Los usuarios pueden optar por entrega estándar vía Twilio, o conectar su WhatsApp personal usando un microservicio Node.js/Express basado en @whiskeysockets/baileys. Un pipeline de sincronización con AWS S3 persiste los estados de autenticación entre reinicios de contenedores serverless — habilitando mensajería automatizada de costo cero directamente desde el número del profesional.

3. Facturación por Excedente con Stripe (Webhooks)
Diseñé una integración compleja de Stripe que maneja suscripciones de tarifa plana (Pro/Premium) junto con facturación por uso. El backend registra la cuota mensual de notificaciones en PostgreSQL. Si un usuario supera su límite, el sistema dispara un webhook checkout.session.completed para agregar automáticamente un ítem de excedente medido a su suscripción de Stripe, limitando dinámicamente para evitar facturas inesperadas.

4. Base de Datos en Tiempo Real & Row-Level Security (RLS)
Aseguré la arquitectura multi-tenant con Row-Level Security de Supabase, garantizando aislamiento absoluto de datos entre profesionales. La replicación lógica de PostgreSQL (Supabase Realtime) transmite actualizaciones instantáneas de UI vía WebSockets — el dashboard del operador refleja los estados de citas sin polling manual.

🏆 Resultados de Negocio & Economía Unitaria

Se entregó una plataforma SaaS de alto margen. Al ofrecer el microservicio de WhatsApp personal, se reduce la fricción de adquisición (sin costos extra de mensajes), mientras que los usuarios avanzados ascienden naturalmente a tiers Premium para reportes avanzados y funciones MTR. La arquitectura serverless y optimizada para edge mantiene los costos de infraestructura despreciables, escalando de forma rentable desde el día uno.

Arquitectura de Catálogo

Hialuroniz representa un sistema de información para la salud y el bienestar. El núcleo del proyecto es un motor de búsqueda y filtrado lógico que clasifica cientos de productos basándose en objetivos de bienestar, permitiendo una navegación sistémica y no solo visual.

Eficiencia en la Selección

• Taxonomía Inteligente: Desarrollo de una estructura de categorías cruzadas que optimiza el camino de compra del usuario, reduciendo el número de clics necesarios para encontrar soluciones específicas de salud.
• Optimización de Assets: Implementación de un flujo de carga diferida (lazy loading) avanzado, permitiendo que el catálogo extenso sea fluido incluso en conexiones móviles limitadas.

Impacto Comercial

La arquitectura eficiente del catálogo ha resultado en una mejora directa en la tasa de conversión, facilitando que el usuario tome decisiones informadas basadas en un sistema de información claro y bien estructurado.

Ingeniería de Sistemas

HiPets es un sistema de planificación de recursos (mini-ERP) verticalizado para clínicas veterinarias. La solución integra un motor de persistencia distribuido mediante Supabase, permitiendo que los expedientes médicos digitales estén disponibles de forma segura e instantánea desde cualquier dispositivo en la red de la clínica.

Eficiencia y Automatización

• Control de Inventarios y Citas: Automatización del flujo de citas vinculado a la base de datos de pacientes, lo que previene errores manuales en la programación de refuerzos médicos.
• Backend Reactivo: Implementación de una API ligera en Python/Flask desplegada en GCP, diseñada para tiempos de respuesta ultra-bajos en entornos de alta demanda operativa.

Resultados de Implementación

El sistema centraliza la operación administrativa, reduciendo el tiempo de ingreso de pacientes en un 30% y garantizando un control total sobre el historial clínico digital, vital para la continuidad del tratamiento médico.

Integración de Sistemas

Para Galau Consultoría, el sistema se diseñó como una plataforma de adquisición de prospectos (lead generation). Se integró el núcleo de WordPress con una capa de rastreo avanzado mediante Google Tag Manager, permitiendo medir la eficiencia de cada punto de contacto en el flujo de selección de talento.

Eficiencia en el Embudo

• Automatización de Seguimiento: Configuración de Workspaces integrados que permiten la sincronización de datos entre el portal web y las herramientas de gestión interna del equipo.
• Arquitectura de Bajo Mantenimiento: Despliegue en Google Compute Engine con políticas de backup y escalamiento manual, garantizando la estabilidad operativa del portal.

Impacto en Negocio

El sistema ha profesionalizado la entrada de talento, permitiendo que la consultora gestione un mayor volumen de candidatos sin aumentar su carga administrativa, mejorando la velocidad de respuesta hacia sus clientes corporativos.

Sobre el Proyecto

Desarrollo integral de la presencia digital del Instituto Jalisciense de Cancerología. El enfoque principal fue la accesibilidad de la información para pacientes y personal médico.

Eficiencia Operativa

• CMS a Medida: Desarrollé un backend administrativo optimizado para usuarios no técnicos, permitiendo que la información vital se publique en segundos, eliminando silos de información internos.
• Arquitectura de Base de Datos: Optimización de consultas en MariaDB para soportar altos volúmenes de tráfico concurrente durante periodos de avisos oficiales.

Impacto en el Servicio

La digitalización de procesos de consulta de trámites y directorios ha reducido el flujo de atención telefónica de primer nivel, permitiendo al personal del instituto enfocarse en la atención directa y gestión clínica más compleja.

Ingeniería de Contenidos

Este proyecto se centró en la creación de un sistema de distribución de información de alta disponibilidad. La arquitectura se optimizó a nivel del servidor Apache para manejar picos de tráfico orgánico, utilizando técnicas de compresión y entrega eficiente de assets digitales.

Eficiencia y SEO Técnico

• Arquitectura Semántica: Implementación de una estructura de datos que permite a los motores de búsqueda indexar la información con máxima eficiencia, reduciendo el “presupuesto de rastreo” (crawl budget) consumido por cada visita.
• Rendimiento de Carga: Optimización del pipeline de PHP para garantizar tiempos de respuesta rápidos, vitales para el posicionamiento en buscadores y la retención de usuarios.

Impacto Operativo

El portal funciona como un motor de adquisición orgánica pasiva, generando miles de visitas mensuales con una intervención técnica mínima, gracias a la robustez del sistema y su optimización básica inicial.

Sistemas de Comunicación

El sistema del Centro AJI se estructuró para facilitar la conexión directa entre el usuario y los servicios de salud. Se implementó una arquitectura de contacto integrada que minimiza la fricción operativa, permitiendo que las solicitudes de apoyo lleguen de forma estructurada a los coordinadores del centro.

Eficiencia en la Gestión

• Automatización de Canales: Integración de herramientas de contacto directo que eliminan pasos intermedios en la cadena de comunicación, permitiendo una respuesta inmediata en situaciones críticas.
• Arquitectura Ligera: Optimización de recursos para funcionar de manera estable en entornos de hosting compartido, manteniendo la agilidad del sitio.

Resultados

Un canal operativo 24/7 que ha permitido al centro expandir su capacidad de soporte sin necesidad de aumentar el personal administrativo dedicado a la recepción inicial de casos.