Sabino · May 1, 2026 · 4 min read
Los Héroes en tu Casa: a private video portal under regulatory deadline.
Los Héroes is one of Chile's largest Family Allowance Compensation Funds (Caja de Compensación), with millions of active affiliates among workers and retirees. Their audiovisual content arm had been running an informal Vimeo catalog with no real access control and no actionable metrics.
Tu Butaca, the production company in charge of the content, hired fuix as a technical and product partner to build a proper portal with its own identity, control, and autonomous operation. The contract is direct with the production company; the regulated end client is Los Héroes.
Four constraints defined the conversation from day one.
Legal privacy. The catalog cannot be indexable or downloadable. Access is exclusive to active affiliates verified against the official registry.
Brand identity. Respect the Los Héroes visual guidelines without falling into corporate cold: the portal is consumed on the couch, in family time — not as a transaction.
Audience predominantly adult and senior. Accessibility is not a nice-to-have; it's the baseline.
Editorial autonomy. Tu Butaca needs to upload, order, and edit content every day without filing a technical ticket.
And a fifth, non-negotiable factor: a fixed production go-live date, no slack.
A high-performance static portal with minimal interactive islands, an admin SPA for the production company, and a private API that owns the integration with the Los Héroes affiliate registry and the signing of video URLs.
Responsibilities are strictly separated: the frontend never sees sensitive credentials, the backend never exposes more surface than needed, and the database is the single source of truth for editorial metadata.
Chilean RUT login. Module-11 validation implemented as a reusable internal package, plus live verification against the active affiliate registry via `api-proveedores.losheroes.cl`, with a 24-hour Redis cache to reduce latency and protect the upstream.
Protected HLS player. Server-signed URLs per session over Bunny Stream, subtitles enabled by default, keyboard-operable controls, and `prefers-reduced-motion` respected. The signing key lives only in the backend.
Admin as source of truth. Tu Butaca edits title, description, tags, and category once in the admin; an automatic sync pushes the changes to Bunny Stream. Bidirectionality was explicitly discarded to avoid drift between systems.
Warm, accessible design system. 18px base typography, tempered charcoal background instead of pure black, Los Héroes orange reserved for CTAs and focus, a 3px focus ring always visible, 48–56px touch targets, and a bottom tab bar on mobile with no hamburger menu. Benchmark: Apple TV+ for typographic breathing room over Netflix's density.
Internal metrics. Daily counters binned in America/Santiago time, login logs, ratings, and an NPS embedded in the video close flow.
Secure-by-default operation. Nginx with HSTS, HMAC-signed httpOnly + SameSite cookies (no JWT — to keep long sessions revocable), per-app segregated secrets, and Certbot-managed certificates.
This project was built with Claude Code operated as the primary development environment — not as autocomplete. The difference is structural.
Project-configured specialized sub-agents. `backend-devops` for infrastructure, API, and Postgres; `frontend-fullstack` for Astro, React, and Tailwind; `ux-ui` for editorial direction and copy. Every decision is delegated to the domain sub-agent before implementation.
Persistent memory across sessions. Accumulated conventions (zero voseo, local build before deploy, integrate real infrastructure when credentials exist instead of deferring with mocks), operational references, and current project state. Per-session ramp-up is near zero.
Curated hooks and permissions. A pre-approved list of safe commands for routine tasks, with mandatory human confirmation on destructive operations.
Mandatory local validation before any deploy: clean build, smoke test of the critical flow (RUT, portal, playback), and visual review.
AI-assisted code review on every branch before merging to `main`.
The practical result: a one-person team delivering what traditionally requires four roles (backend, frontend, devops, product design), with the production company directing product directly — no PM in the middle.
AI doesn't replace judgment. The project's architecture decisions — Postgres over SQLite for concurrency, signed sessions over JWT for revocability, Bunny Stream over self-hosting for bandwidth and cost, admin as single source of truth — were human, discussed, and documented. AI sets conventions, catches mistakes, and accelerates; direction comes from the team.
Deadline met with a regulated end client: production go-live within the committed date.
Public portal performance in competitive ranges thanks to the static-Astro choice: TTFB and LCP measured consistently below Core Web Vitals thresholds.
Zero sensitive credential exposure to the frontend, verifiable by inspecting the monorepo: the Bunny key and the Los Héroes `user_key` live exclusively in the backend service.
Editorial autonomy from day one: Tu Butaca publishes, edits, and reorders the catalog with no technical intervention.
KPIs to track in the first three months post-launch: successful RUT login rate (proxy for access friction), percentage of videos completed, NPS at video close, and weekly retention by affiliate cohort.
fuix directed product, architecture, implementation, and operation of Los Héroes en tu Casa end-to-end, in partnership with Tu Butaca.
Let's talk about your IT operation →
Tu Butaca, the production company in charge of the content, hired fuix as a technical and product partner to build a proper portal with its own identity, control, and autonomous operation. The contract is direct with the production company; the regulated end client is Los Héroes.
Four constraints defined the conversation from day one.
Legal privacy. The catalog cannot be indexable or downloadable. Access is exclusive to active affiliates verified against the official registry.
Brand identity. Respect the Los Héroes visual guidelines without falling into corporate cold: the portal is consumed on the couch, in family time — not as a transaction.
Audience predominantly adult and senior. Accessibility is not a nice-to-have; it's the baseline.
Editorial autonomy. Tu Butaca needs to upload, order, and edit content every day without filing a technical ticket.
And a fifth, non-negotiable factor: a fixed production go-live date, no slack.
The solution
A high-performance static portal with minimal interactive islands, an admin SPA for the production company, and a private API that owns the integration with the Los Héroes affiliate registry and the signing of video URLs.
Responsibilities are strictly separated: the frontend never sees sensitive credentials, the backend never exposes more surface than needed, and the database is the single source of truth for editorial metadata.
Highlight features
Chilean RUT login. Module-11 validation implemented as a reusable internal package, plus live verification against the active affiliate registry via `api-proveedores.losheroes.cl`, with a 24-hour Redis cache to reduce latency and protect the upstream.
Protected HLS player. Server-signed URLs per session over Bunny Stream, subtitles enabled by default, keyboard-operable controls, and `prefers-reduced-motion` respected. The signing key lives only in the backend.
Admin as source of truth. Tu Butaca edits title, description, tags, and category once in the admin; an automatic sync pushes the changes to Bunny Stream. Bidirectionality was explicitly discarded to avoid drift between systems.
Warm, accessible design system. 18px base typography, tempered charcoal background instead of pure black, Los Héroes orange reserved for CTAs and focus, a 3px focus ring always visible, 48–56px touch targets, and a bottom tab bar on mobile with no hamburger menu. Benchmark: Apple TV+ for typographic breathing room over Netflix's density.
Internal metrics. Daily counters binned in America/Santiago time, login logs, ratings, and an NPS embedded in the video close flow.
Secure-by-default operation. Nginx with HSTS, HMAC-signed httpOnly + SameSite cookies (no JWT — to keep long sessions revocable), per-app segregated secrets, and Certbot-managed certificates.
How we built it: AI as part of the team
This project was built with Claude Code operated as the primary development environment — not as autocomplete. The difference is structural.
Project-configured specialized sub-agents. `backend-devops` for infrastructure, API, and Postgres; `frontend-fullstack` for Astro, React, and Tailwind; `ux-ui` for editorial direction and copy. Every decision is delegated to the domain sub-agent before implementation.
Persistent memory across sessions. Accumulated conventions (zero voseo, local build before deploy, integrate real infrastructure when credentials exist instead of deferring with mocks), operational references, and current project state. Per-session ramp-up is near zero.
Curated hooks and permissions. A pre-approved list of safe commands for routine tasks, with mandatory human confirmation on destructive operations.
Mandatory local validation before any deploy: clean build, smoke test of the critical flow (RUT, portal, playback), and visual review.
AI-assisted code review on every branch before merging to `main`.
The practical result: a one-person team delivering what traditionally requires four roles (backend, frontend, devops, product design), with the production company directing product directly — no PM in the middle.
AI doesn't replace judgment. The project's architecture decisions — Postgres over SQLite for concurrency, signed sessions over JWT for revocability, Bunny Stream over self-hosting for bandwidth and cost, admin as single source of truth — were human, discussed, and documented. AI sets conventions, catches mistakes, and accelerates; direction comes from the team.
Results
Deadline met with a regulated end client: production go-live within the committed date.
Public portal performance in competitive ranges thanks to the static-Astro choice: TTFB and LCP measured consistently below Core Web Vitals thresholds.
Zero sensitive credential exposure to the frontend, verifiable by inspecting the monorepo: the Bunny key and the Los Héroes `user_key` live exclusively in the backend service.
Editorial autonomy from day one: Tu Butaca publishes, edits, and reorders the catalog with no technical intervention.
KPIs to track in the first three months post-launch: successful RUT login rate (proxy for access friction), percentage of videos completed, NPS at video close, and weekly retention by affiliate cohort.
Tech stack
- Frontend: Astro 5 static with Node adapter, React 18 islands, Tailwind 3.4, pnpm + turbo monorepo.
- Admin: Astro + React Router SPA.
- Backend: FastAPI, Postgres 16, Redis for registry cache.
- Video: Bunny Stream with server-side signed HLS.
- Auth: HMAC httpOnly + SameSite cookie, revocable sessions.
- Infra: DigitalOcean droplet, Nginx, Certbot.
- Quality: RUT validator tests, AI-assisted code review, local build before deploy.
fuix directed product, architecture, implementation, and operation of Los Héroes en tu Casa end-to-end, in partnership with Tu Butaca.
Let's talk about your IT operation →
Astro Video Auth DigitalOcean Architecture