La Casa del Entretenimiento

E-commerce para venta de cuentas de streaming que elimina el backend tradicional usando Notion como PIM (Product Information Management): el cliente actualiza precios e inventario desde su celular, notion-astro-loader sincroniza los datos en build-time con validación Zod, y la web se reconstruye automáticamente — $0 de infraestructura, Islands Architecture, 100/100 Lighthouse.

🚀 Impacto y Números

• 100/100 Lighthouse en Performance y SEO gracias a generación estática con Astro
• $0/mes en infraestructura: Notion Free Tier + Vercel hosting estático
• El cliente gestiona todo desde su celular: edita precios, stock y productos en Notion sin tocar código
• < 1s TTI (Time to Interactive): solo el carrito y los botones de compra se hidratan, el resto es HTML puro

⚡ Cómo está construido

Notion como fuente de verdad con validación en build-time

• notion-astro-loader: sincroniza la base de datos de Notion en tiempo de build, descarga imágenes y genera rutas estáticas por producto automáticamente
• Esquemas Zod en compilación: si Notion devuelve datos corruptos o faltan campos, el build falla en CI antes de llegar a producción — garantía de estabilidad sin servidor de validación
• TypeScript estricto: interfaces para cada entidad de Notion mapeadas a DTOs con cero any

Estado global atómico con Nanostores

• Átomos reactivos agnósticos al framework: el carrito funciona igual en componentes .astro y .tsx de Preact sin reescribir lógica
• Persistencia automática: @nanostores/persistent sincroniza el carrito con localStorage — sobrevive a recargas sin ningún servidor

Islands Architecture selectiva

• Hidratación client:visible: el catálogo estático no carga JS; solo el widget del carrito y los botones de compra se hidratan con Preact cuando entran en el viewport — bundle JS total < 10KB
• View Transitions API: navegación SPA-like entre páginas de producto sin JavaScript de router

🛠️ Stack

Core: Astro 5, Preact, TypeScript strict Data: Notion API, notion-astro-loader, Zod State: Nanostores, @nanostores/persistent Styling: Tailwind CSS + @tailwindcss/typography, Biome Deploy: Vercel (static) Patterns: JAMstack, Islands Architecture, DTO, Repository

💼 Lo que este proyecto demuestra

Este proyecto demuestra que puedo:

• ✅ Diseñar arquitecturas que eliminan costos y fricción operativa al cliente — no solo código que funciona
• ✅ Usar herramientas no convencionales de forma inteligente: Notion como PIM es una decisión de arquitectura, no un hack
• ✅ Dominar Astro a nivel avanzado: Islands Architecture, content loaders, View Transitions, optimización de assets
• ✅ Garantizar calidad en producción con validación en build-time (Zod) sin infraestructura extra

Diferenciador clave: Usar Notion como backend no es “lo fácil” — es la decisión correcta para este cliente concreto. Elimina semanas de desarrollo de admin panel, reduce el costo a $0 y le da al cliente autonomía total. Eso es pensar en producto, no solo en tecnología.