FluentReads evita deliberadamente un backend de comercio tradicional. El contenido de productos se compila en páginas estáticas, el carrito permanece en el navegador y el cierre del pedido envía el resumen a WhatsApp. Los pagos y la entrega quedan fuera del límite de la aplicación.
CASO DE ESTUDIO · COMERCIO ESTÁTICO
FluentReads
Una tienda estática para libros de inglés, material de exámenes y paquetes de estudio, construida con Astro 7, islas React, Content Collections, carrito en localStorage y cierre de pedido por WhatsApp.
Código público Mantenido
LÍMITE DEL PRODUCTO
La tienda mantiene acotadas sus responsabilidades comerciales
PROBLEMA
Un catálogo pequeño no necesita automáticamente un backend transaccional
Vender un conjunto enfocado de libros digitales, recursos para exámenes y paquetes de estudio necesita buena navegación, detalle de producto, estado del carrito y una ruta clara para contactar al vendedor. No necesariamente justifica autenticación, sesiones de compra respaldadas por base de datos o una pasarela de pagos cuando el proceso comercial ya termina mediante comunicación directa y transferencia bancaria.
SISTEMA
Contenido estático, estado del navegador y cierre externo permanecen separados
Límite de comercio estático de FluentReads Los datos del catálogo se validan durante el build y Astro genera el sitio. El código interactivo administra el carrito en localStorage y emite eventos cartUpdated. El cierre del pedido sale hacia WhatsApp y un service worker agrega caché same-origin.
MODELO DE CONTENIDO
El catálogo funciona como contrato de build
El repositorio define Content Collections tipadas para libros, paquetes, exámenes, editoriales, testimonios, ofertas, categorías, FAQs y contenido legal. Esto mantiene la tienda pública estática y, al mismo tiempo, da un esquema explícito a los registros de producto.
La configuración de Decap CMS bajo /admin conecta formularios de edición con el catálogo JSON. La integración ya existe como ruta de autoría, mientras el flujo de publicación productiva todavía debe consolidarse antes de convertirse en el mecanismo principal para publicar cambios del catálogo.
ESTADO DEL CLIENTE
El comportamiento del carrito es explícito y recuperable
ESTADO
LOCALSTORAGE MANTIENE EL CARRITO
CartManager inicializa un shoppingCart en el navegador, persiste cantidades y
restaura el carrito entre navegaciones sin crear una sesión de servidor.
EVENTOS
CARTUPDATED DESACOPLA LA ACTUALIZACIÓN DE LA UI
Las operaciones de agregar, eliminar, cambiar cantidad y limpiar emiten un evento
cartUpdated, permitiendo que las superficies interactivas reaccionen sin convertir
toda la tienda en una única aplicación cliente.
CIERRE DEL PEDIDO
WHATSAPP ES EL SIGUIENTE PASO DEL PROCESO
El sitio envía un resumen del pedido a WhatsApp. Los pagos permanecen fuera de la aplicación, manteniendo la solución alineada con el proceso operativo real.
COMPORTAMIENTO OFFLINE
Un service worker pequeño mejora la navegación repetida
El service worker almacena respuestas GET same-origin y puede servir contenido desde caché mientras actualiza en segundo plano. Si una navegación HTML falla sin conexión, puede usar la raíz almacenada como fallback. Es una capa de resiliencia alrededor de un sitio estático; el cierre del pedido todavía depende de WhatsApp.
IMPLEMENTACIÓN ACTUAL
Qué contiene hoy la tienda
STACK ACTUAL
ASTRO 7 · REACT 19 · TAILWIND 4 · BUN
El manifest actual usa Astro 7.0.6, React 19.2.7, Tailwind CSS 4.3.2,
TypeScript 6 y Bun 1.3.14. El repositorio también contiene el esquema de contenido,
CartManager, service worker y configuración de Decap CMS descritos arriba.
ALCANCE DEL PRODUCTO
SIN BASE DE DATOS, AUTENTICACIÓN NI PASARELA DE PAGO ONLINE
La tienda es estática y serverless. No mantiene cuentas de usuario, un registro de pedidos respaldado por base de datos ni un procesador de pagos online; el pedido se completa mediante WhatsApp y transferencia bancaria.
TRADE-OFFS
Static-first reduce infraestructura pero mueve responsabilidad al navegador
Una tienda estática es económica de alojar y sencilla de cachear, pero el almacenamiento del navegador no sustituye un sistema de cuentas y WhatsApp no sustituye un backend transaccional. Ese trade-off funciona porque el límite del producto es intencionalmente pequeño y el proceso operativo termina fuera del sitio.
APRENDIZAJES
Qué reforzó este proyecto
APRENDIZAJE 01
ELIGE INFRAESTRUCTURA PARA LA TRANSACCIÓN REAL
Cuando la entrega y el pago ocurren fuera de la aplicación web, introducir cuentas y una base de datos puede añadir complejidad sin mejorar el proceso real.
APRENDIZAJE 02
ESTÁTICO NO SIGNIFICA NO INTERACTIVO
Un sitio mayormente estático en Astro puede mantener la interactividad acotada: el carrito vive en código de navegador específico mientras el catálogo permanece pre-renderizado.
APRENDIZAJE 03
LA AUTORÍA DE CONTENIDO ES UNA DECISIÓN ARQUITECTÓNICA
Un CMS puede editar contenido de build sin convertir la aplicación pública en un servidor dinámico, pero la responsabilidad de publicación necesita un flujo operativo claro.