🚀 Storefronts de Cadences.app

Para explicar a alguien sin conocimientos técnicos

Lo que la gente piensa: "Es una web estática, no se puede modificar"

La realidad: Es un sistema completo con CMS, CRM, base de datos, IA integrada, panel de administración y recompilación bajo demanda. Solo que está optimizado para SEO.

🎯 ¿Qué es un Storefront?

Un Storefront es una web profesional conectada a Cadences.app como su "cerebro".

Imagina que tienes:

• Una tienda física bonita (el storefront web)
• Un backoffice potente (Cadences.app)
• Un asistente inteligente (IA integrada)
• Todo conectado y sincronizado en tiempo real

Ejemplos reales:

💡 Lo que SÍ podemos hacer (y mucha gente no sabe)

1. Modificar TODO desde un panel de administración

• Sin tocar código
• Con autenticación segura (Google Sign-In)
• Cambios guardados en base de datos real
• URL: /admin en cualquier storefront

2. CMS completo (Content Management System)

Los storefronts tienen un CMS integrado para gestionar:

3. CRM integrado (Customer Relationship Management)

Cada formulario del storefront crea:

• Un lead en Cadences
• Una tarea de seguimiento
• Notificaciones automáticas
• Historial completo del cliente

4. Recompilación bajo demanda

Cuando haces cambios en el admin:

1. Click en "Publicar Cambios"
2. El sistema obtiene los datos frescos de la API
3. Regenera TODAS las páginas con los nuevos datos
4. Despliega automáticamente a producción
5. En 1-2 minutos tu web está actualizada

5. IA Integrada

• Chat asistente en el storefront
• Responde preguntas de clientes
• Conoce todos tus productos/servicios
• Funciona 24/7

🏗️ Arquitectura (explicación simple)

┌─────────────────────────────────────────────────────────────────┐
│                    TU STOREFRONT WEB                            │
│         (goviajes.pages.dev, restaurant-23.pages.dev)           │
│                                                                 │
│   ┌─────────────┐  ┌─────────────┐  ┌─────────────┐            │
│   │  Página     │  │  Formulario │  │   Panel     │            │
│   │  Principal  │  │  Contacto   │  │   Admin     │            │
│   └──────┬──────┘  └──────┬──────┘  └──────┬──────┘            │
└──────────┼────────────────┼────────────────┼────────────────────┘
           │                │                │
           ▼                ▼                ▼
┌─────────────────────────────────────────────────────────────────┐
│                     CADENCES.APP (Backend)                      │
│                                                                 │
│   ┌─────────────┐  ┌─────────────┐  ┌─────────────┐            │
│   │  📊 API     │  │  💾 Base    │  │  🤖 IA      │            │
│   │  Datos      │  │  de Datos   │  │  Asistente  │            │
│   └─────────────┘  └─────────────┘  └─────────────┘            │
│                                                                 │
│   ┌─────────────┐  ┌─────────────┐  ┌─────────────┐            │
│   │  📋 CRM     │  │  📈 Analytics│  │  🔐 Auth    │            │
│   │  Leads      │  │  Dashboard  │  │  Seguro     │            │
│   └─────────────┘  └─────────────┘  └─────────────┘            │
└─────────────────────────────────────────────────────────────────┘

🔌 APIs disponibles para cada Storefront

Cada storefront tiene estas APIs automáticas:

Públicas (no requieren login)

Privadas (requieren login de admin)

📝 Flujo de trabajo real

Escenario: "Quiero añadir un nuevo destino a mi web de viajes"

Paso 1: Entras a goviajes.pages.dev/admin

Paso 2: Login con tu Gmail autorizado

Paso 3: Vas a "Destinos" → "Nuevo"

Paso 4: Rellenas el formulario:

• Nombre: "Bali"
• Descripción: "Paraíso tropical..."
• Imagen: (subes o pegas URL)
• Precio desde: 1.299€

Paso 5: Click "Guardar" → Se guarda en la base de datos

Paso 6: Click "Publicar Cambios" → En 1-2 minutos tu web tiene el nuevo destino

Escenario: "Un cliente envía un formulario"

1. Cliente rellena formulario en la web
2. Se crea automáticamente un Lead en Cadences
3. Recibes notificación (email/WhatsApp)
4. Puedes ver el lead en Cadences y dar seguimiento
5. Historial completo guardado

🛠️ Plantillas disponibles

1. Travel Template (GoViajes)

Ideal para: Agencias de viajes, touroperadores, DMCs

Secciones incluidas:

• ✅ Página de inicio con hero, testimonios, destinos destacados
• ✅ Catálogo de destinos con filtros
• ✅ Fichas de viajes con itinerario detallado
• ✅ Formulario de solicitud de viaje
• ✅ Páginas de experiencias (cultural, aventura, etc.)
• ✅ Página "Nosotros"
• ✅ Panel de administración completo

Datos gestionables:

• Destinos (nombre, imagen, descripción, país, precio)
• Viajes (itinerario día a día, precios, fechas, incluye/no incluye)
• Experiencias (categorías de viaje)
• Testimonios de clientes
• Configuración general

2. Restaurant Template (Restaurant23)

Ideal para: Restaurantes, bares, hoteles con restaurante

Secciones incluidas:

• ✅ Página de inicio con ambiente y especialidades
• ✅ La Carta con categorías y platos
• ✅ Menús del día / degustación
• ✅ Sistema de reservas online
• ✅ Galería de fotos
• ✅ Información y mapa
• ✅ Panel de administración

Datos gestionables:

• Espacios/Salas (capacidad, ambiente)
• Platos (nombre, descripción, precio, alérgenos)
• Menús (composición, precio)
• Horarios de servicio
• Reservas (gestión completa)
• Configuración general

3. Clinic Template (en desarrollo)

Ideal para: Clínicas, consultorios, centros de salud

4. Festival Template (en desarrollo)

Ideal para: Festivales, eventos, conciertos

🔐 Seguridad

• Autenticación: Google Sign-In (OAuth 2.0)
• Autorización: Solo emails autorizados pueden acceder al admin
• Tokens: JWT con expiración de 24h
• Base de datos: Cloudflare D1 (SQLite distribuido)
• Hosting: Cloudflare Pages (edge network global)
• SSL: Automático en todos los dominios

💰 ¿Por qué es diferente a Wix/Squarespace/WordPress?

🎓 Concepto clave: "Static Site Generation con datos dinámicos"

1. Build time: Generamos HTML estático (como un PDF)
2. Runtime: El HTML ya está hecho, carga instantáneo
3. Cuando cambias datos: Regeneramos el HTML

Beneficios:

• SEO perfecto (Google ve HTML real)
• Velocidad extrema (no hay servidor procesando)
• Seguro (no hay base de datos expuesta al público)
• Barato (no pagas por tráfico)

Tecnologías usadas:

• Astro: Framework de generación estática
• React: Componentes interactivos (formularios, etc.)
• Tailwind CSS: Estilos modernos
• Cloudflare Pages: Hosting en el edge
• Cloudflare D1: Base de datos SQLite distribuida
• Cloudflare Workers: APIs serverless
• Cloudflare AI: Modelos de IA integrados

📞 Preguntas frecuentes

"¿Y si quiero cambiar los colores?"

→ Desde el panel admin, sección Configuración → Branding

"¿Y si quiero añadir una página nueva?"

→ Contacta con nosotros, lo hacemos en minutos

"¿Y si quiero otro idioma?"

→ El sistema soporta multiidioma (ES/EN incluidos, otros bajo demanda)

"¿Cuánto cuesta?"

→ Incluido en tu plan de Cadences (no hay coste adicional por el storefront)

"¿Puedo usar mi propio dominio?"

→ Sí, se configura en 5 minutos

"¿Qué pasa si Cadences se cae?"

→ Tu web sigue funcionando (es estática). Solo el admin y los formularios requieren conexión.

🚀 Cómo empezar

1. Ya tienes cuenta Cadences: Contacta para activar tu storefront
2. No tienes cuenta: Regístrate en cadences.app
3. Quieres ver demo: Visita goviajes.pages.dev

📁 Estructura técnica (para desarrolladores)

storefronts/
├── travel-template/          # Plantilla para viajes
│   ├── src/
│   │   ├── pages/           # Páginas Astro
│   │   │   ├── admin/       # Panel de administración
│   │   │   ├── destinos/    # Páginas de destinos
│   │   │   └── viajes/      # Páginas de viajes
│   │   ├── components/      # Componentes React/Astro
│   │   ├── data/            # Datos estáticos (generados por API)
│   │   └── config/          # Configuración del storefront
│   ├── scripts/
│   │   └── fetch-data.mjs   # Pre-build: obtiene datos de API
│   └── package.json
│
├── restaurant-template/      # Plantilla para restaurantes
├── imaging-clinic-template/  # Plantilla para clínicas
└── festival-template/        # Plantilla para festivales

functions/api/storefront/     # Backend (Cadences.app)
├── [id]/
│   ├── auth.js              # Autenticación Google
│   ├── deploy.js            # Trigger de deploy
│   ├── requests.js          # Recibe formularios → CRM
│   ├── ai-chat.js           # Chat con IA
│   ├── sync.js              # Sincroniza schemas
│   ├── cms/
│   │   ├── destinations.js  # CRUD destinos
│   │   ├── trips.js         # CRUD viajes
│   │   └── experiences.js   # CRUD experiencias
│   ├── data/
│   │   └── [project].js     # API pública de datos
│   └── admin/
│       ├── dashboard.js     # Estadísticas
│       └── reservations.js  # Gestión reservas

📊 Métricas de rendimiento

🔄 Flujo de deploy

┌─────────────────┐
│  Admin hace     │
│  cambios en CMS │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Click "Publicar│
│  Cambios"       │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  API /deploy    │
│  llama a CF API │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Cloudflare     │
│  hace build     │
│  - fetch-data   │◄─── Obtiene datos frescos de API
│  - astro build  │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Deploy a       │
│  producción     │
│  (1-2 minutos)  │
└─────────────────┘

Última actualización: Diciembre 2024 Autor: Equipo Cadences