Sabino · May 1, 2026 · lectura de 4 min
Los Héroes en tu Casa: portal de video de alta demanda.
Los Héroes es una de las Cajas de Compensación de Asignación Familiar más grandes de Chile, con millones de afiliados activos entre trabajadores y pensionados. Su brazo de contenidos audiovisuales venía operando con un catálogo informal en Vimeo, sin control real de acceso ni métricas accionables.
Tu Butaca, productora audiovisual a cargo del contenido, contrató a fuix como partner técnico y de producto para construir un portal propio con identidad, control y operación autónoma. La relación es directa con la productora; el cliente final regulado es Los Héroes.
Cuatro restricciones definieron la conversación desde el primer día.
Privacidad legal. El catálogo no puede ser indexable ni descargable. El acceso es exclusivo para afiliados activos verificados contra el padrón oficial.
Identidad de marca. Respetar la pauta visual de Los Héroes sin caer en frío corporativo: el portal se consume en sofá, en tiempo familiar, no en un trámite.
Audiencia mayoritariamente adulta y adulta mayor. La accesibilidad no es un nice-to-have; es la línea base.
Autonomía editorial. Tu Butaca necesita subir, ordenar y editar contenido todos los días sin abrir un ticket técnico.
Y un quinto factor no negociable: una fecha de salida a producción fija, sin margen.
Un portal estático de alto rendimiento con islas interactivas mínimas, un panel de administración SPA para la productora, y una API privada que custodia la integración con el padrón de afiliados de Los Héroes y la firma de URLs de video.
La separación de responsabilidades es estricta: el frontend nunca ve credenciales sensibles, el backend nunca expone más superficie de la necesaria, y la base de datos es la fuente única de verdad para metadata editorial.
Login por RUT chileno. Validación módulo 11 implementada como paquete interno reutilizable y verificación en línea contra el padrón de afiliados activos vía `api-proveedores.losheroes.cl`, con caché Redis de 24 horas para reducir latencia y proteger el upstream.
Reproductor HLS protegido. URLs firmadas server-side por sesión sobre Bunny Stream, subtítulos activados por defecto, controles operables por teclado y respeto a `prefers-reduced-motion`. La clave de firma vive solo en el backend.
Admin como fuente de verdad. Tu Butaca edita título, descripción, tags y categoría una vez en el panel; un sync automático empuja los cambios a Bunny Stream. La bidireccionalidad fue descartada de forma explícita para evitar drift entre sistemas.
Sistema de diseño cálido y accesible. Base tipográfica de 18px, fondo carbón templado en lugar de negro puro, naranja Los Héroes reservado para CTAs y focos, focus ring de 3px siempre visible, targets táctiles de 48 a 56px y bottom tab bar en mobile sin menú hamburguesa. Benchmark: Apple TV+ por respiración tipográfica más que Netflix por densidad.
Métricas internas. Contadores diarios binneados en zona horaria America/Santiago, logs de inicio de sesión, ratings y NPS embebido en el flujo de cierre del video.
Operación segura por defecto. Nginx con HSTS, cookies HMAC firmadas httpOnly + SameSite (no JWT, para mantener sesiones largas revocables), secretos segregados por aplicación y certificados gestionados con Certbot.
Este proyecto se construyó con Claude Code operado como entorno de desarrollo principal, no como autocompletado. La diferencia es estructural.
Sub-agentes especializados configurados por proyecto. `backend-devops` para infraestructura, API y Postgres; `frontend-fullstack` para Astro, React y Tailwind; `ux-ui` para dirección editorial y copy. Cada decisión se delega al sub-agente del dominio antes de implementar.
Memoria persistente entre sesiones. Convenciones acumuladas (cero voseo, build local antes de deploy, integrar infraestructura real cuando hay credenciales en vez de diferir con mocks), referencias operativas y estado vigente del proyecto. El ramp-up por sesión es cercano a cero.
Hooks y permisos curados. Lista pre-aprobada de comandos seguros para tareas rutinarias, con confirmación humana obligatoria en operaciones destructivas.
Validación local obligatoria antes de cualquier deploy: build limpio, smoke test del flujo crítico (RUT, portal, reproducción) y revisión visual.
Code review asistido sobre cada rama antes del merge a `main`.
El resultado práctico: un equipo de una sola persona entregando lo que tradicionalmente exige cuatro perfiles (backend, frontend, devops, diseño de producto), con la productora dirigiendo producto directamente, sin PM intermedio.
La IA no reemplaza el criterio. Las decisiones de arquitectura del proyecto — Postgres sobre SQLite por concurrencia, sesiones firmadas sobre JWT por revocabilidad, Bunny Stream sobre self-host por ancho de banda y costo, admin como fuente única de verdad — fueron humanas, discutidas y documentadas. La IA fija convenciones, atrapa errores y acelera; la dirección la pone el equipo.
Plazo cumplido con cliente final regulado: salida a producción dentro de la fecha comprometida.
Rendimiento del portal público en rangos competitivos por la elección de Astro estático: TTFB y LCP medidos consistentemente por debajo de los umbrales de Core Web Vitals.
Cero exposición de credenciales sensibles al frontend, verificable por inspección del monorepo: la clave de Bunny y la `user_key` de Los Héroes viven exclusivamente en el servicio backend.
Autonomía editorial desde el día uno: Tu Butaca publica, edita y reordena catálogo sin intervención técnica.
KPIs a observar en los primeros tres meses post-lanzamiento: tasa de login exitoso por RUT (proxy de fricción de acceso), porcentaje de videos completados, NPS al cierre de reproducción y retención semanal por cohorte de afiliados.
fuix dirigió producto, arquitectura, implementación y operación de Los Héroes en tu Casa de extremo a extremo, en alianza con Tu Butaca.
Conversemos sobre tu operación TI →
Tu Butaca, productora audiovisual a cargo del contenido, contrató a fuix como partner técnico y de producto para construir un portal propio con identidad, control y operación autónoma. La relación es directa con la productora; el cliente final regulado es Los Héroes.
Cuatro restricciones definieron la conversación desde el primer día.
Privacidad legal. El catálogo no puede ser indexable ni descargable. El acceso es exclusivo para afiliados activos verificados contra el padrón oficial.
Identidad de marca. Respetar la pauta visual de Los Héroes sin caer en frío corporativo: el portal se consume en sofá, en tiempo familiar, no en un trámite.
Audiencia mayoritariamente adulta y adulta mayor. La accesibilidad no es un nice-to-have; es la línea base.
Autonomía editorial. Tu Butaca necesita subir, ordenar y editar contenido todos los días sin abrir un ticket técnico.
Y un quinto factor no negociable: una fecha de salida a producción fija, sin margen.
La solución
Un portal estático de alto rendimiento con islas interactivas mínimas, un panel de administración SPA para la productora, y una API privada que custodia la integración con el padrón de afiliados de Los Héroes y la firma de URLs de video.
La separación de responsabilidades es estricta: el frontend nunca ve credenciales sensibles, el backend nunca expone más superficie de la necesaria, y la base de datos es la fuente única de verdad para metadata editorial.
Features destacadas
Login por RUT chileno. Validación módulo 11 implementada como paquete interno reutilizable y verificación en línea contra el padrón de afiliados activos vía `api-proveedores.losheroes.cl`, con caché Redis de 24 horas para reducir latencia y proteger el upstream.
Reproductor HLS protegido. URLs firmadas server-side por sesión sobre Bunny Stream, subtítulos activados por defecto, controles operables por teclado y respeto a `prefers-reduced-motion`. La clave de firma vive solo en el backend.
Admin como fuente de verdad. Tu Butaca edita título, descripción, tags y categoría una vez en el panel; un sync automático empuja los cambios a Bunny Stream. La bidireccionalidad fue descartada de forma explícita para evitar drift entre sistemas.
Sistema de diseño cálido y accesible. Base tipográfica de 18px, fondo carbón templado en lugar de negro puro, naranja Los Héroes reservado para CTAs y focos, focus ring de 3px siempre visible, targets táctiles de 48 a 56px y bottom tab bar en mobile sin menú hamburguesa. Benchmark: Apple TV+ por respiración tipográfica más que Netflix por densidad.
Métricas internas. Contadores diarios binneados en zona horaria America/Santiago, logs de inicio de sesión, ratings y NPS embebido en el flujo de cierre del video.
Operación segura por defecto. Nginx con HSTS, cookies HMAC firmadas httpOnly + SameSite (no JWT, para mantener sesiones largas revocables), secretos segregados por aplicación y certificados gestionados con Certbot.
Cómo lo construimos: IA como parte del equipo
Este proyecto se construyó con Claude Code operado como entorno de desarrollo principal, no como autocompletado. La diferencia es estructural.
Sub-agentes especializados configurados por proyecto. `backend-devops` para infraestructura, API y Postgres; `frontend-fullstack` para Astro, React y Tailwind; `ux-ui` para dirección editorial y copy. Cada decisión se delega al sub-agente del dominio antes de implementar.
Memoria persistente entre sesiones. Convenciones acumuladas (cero voseo, build local antes de deploy, integrar infraestructura real cuando hay credenciales en vez de diferir con mocks), referencias operativas y estado vigente del proyecto. El ramp-up por sesión es cercano a cero.
Hooks y permisos curados. Lista pre-aprobada de comandos seguros para tareas rutinarias, con confirmación humana obligatoria en operaciones destructivas.
Validación local obligatoria antes de cualquier deploy: build limpio, smoke test del flujo crítico (RUT, portal, reproducción) y revisión visual.
Code review asistido sobre cada rama antes del merge a `main`.
El resultado práctico: un equipo de una sola persona entregando lo que tradicionalmente exige cuatro perfiles (backend, frontend, devops, diseño de producto), con la productora dirigiendo producto directamente, sin PM intermedio.
La IA no reemplaza el criterio. Las decisiones de arquitectura del proyecto — Postgres sobre SQLite por concurrencia, sesiones firmadas sobre JWT por revocabilidad, Bunny Stream sobre self-host por ancho de banda y costo, admin como fuente única de verdad — fueron humanas, discutidas y documentadas. La IA fija convenciones, atrapa errores y acelera; la dirección la pone el equipo.
Resultados
Plazo cumplido con cliente final regulado: salida a producción dentro de la fecha comprometida.
Rendimiento del portal público en rangos competitivos por la elección de Astro estático: TTFB y LCP medidos consistentemente por debajo de los umbrales de Core Web Vitals.
Cero exposición de credenciales sensibles al frontend, verificable por inspección del monorepo: la clave de Bunny y la `user_key` de Los Héroes viven exclusivamente en el servicio backend.
Autonomía editorial desde el día uno: Tu Butaca publica, edita y reordena catálogo sin intervención técnica.
KPIs a observar en los primeros tres meses post-lanzamiento: tasa de login exitoso por RUT (proxy de fricción de acceso), porcentaje de videos completados, NPS al cierre de reproducción y retención semanal por cohorte de afiliados.
Stack técnico
- Frontend: Astro 5 estático con adapter Node, islas React 18, Tailwind 3.4, monorepo pnpm + turbo.
- Admin: Astro + React Router SPA.
- Backend: FastAPI, Postgres 16, Redis para caché del padrón.
- Video: Bunny Stream con HLS firmado server-side.
- Auth: cookie HMAC httpOnly + SameSite, sesiones revocables.
- Infra: DigitalOcean droplet, Nginx, Certbot.
- Calidad: tests del validador RUT, code review asistido por IA, build local previo a deploy.
fuix dirigió producto, arquitectura, implementación y operación de Los Héroes en tu Casa de extremo a extremo, en alianza con Tu Butaca.
Conversemos sobre tu operación TI →
Astro Video Auth DigitalOcean Arquitectura