Storefronts
2024 — Presente Codex
Plataforma Editorial Digital
Storefront editorial — ~6.4K líneas en 43 archivos. Libros, audiolibros, historias CYOA interactivas y blog — creados en Perspectiva Studio (~15K líneas), almacenados en R2, renderizados como SSG con SEO Schema.org.
Año
2024 — Presente
Rol
Full-Stack Developer
Tecnologías
8 tecnologías
El Desafío
- Los editores independientes necesitan una plataforma que combine contenido tradicional (libros, blogs) con formatos potenciados por IA (audiolibros, historias CYOA interactivas) y SEO profesional
- El pipeline de contenido debe fluir sin fricción del estudio de autoría al storefront público con distribución dual (codex.cadences.app + cadences.app/blog)
- La base de conocimiento protegida necesita wiki con autenticación JWT para documentación interna
El Enfoque
- Pipeline editorial: Perspectiva Studio (autoría, ~15K líneas JS) → almacenamiento R2 (PERSPECTIVAS_STORAGE) → storefront Codex (SSG) con sincronización prebuild
- Config storefront editorial con interfaces específicas por tipo — libros, audiolibros, blog, secciones CYOA, cada una con settings dedicados (postsPerPage, showProgress, showAchievements)
- Estrategia híbrida de contenido: archivos estáticos como fallback + contenido de la API de Perspectiva Studio en build time y runtime para posts dinámicos
- Google OAuth vía Google Identity Services para área wiki protegida
La Solución
- ~6.4K líneas en 43 archivos — 10 rutas (ES/EN + wiki + login), 13 componentes, toggle tema oscuro/claro
- Tipos de contenido: catálogo de libros, audiolibros con narración TTS ElevenLabs, aventuras CYOA interactivas (nodos basados en grafos con inventario/flags/stats) y blog dinámico
- Motor CYOA (2.697 líneas en Perspectiva Studio) — nodos de historia basados en grafos, gestión de estado GameSession, múltiples finales, guardar progreso, temperatura visual para creatividad IA
- Pipeline de blog: Perspectiva Studio → R2 → fetch prebuild → páginas SSG con Schema.org BlogPosting JSON-LD, feed RSS 2.0 y sitemap XML
- Chatbot IA vía Workers AI (Llama 3.1 8B Instruct) con contexto editorial
- Wiki protegida: base de conocimiento con JWT, 6 categorías, 24 artículos de documentación, avatar de usuario + logout
- SEO completo: URLs canónicas, alternates hreflang, Open Graph, Twitter Cards, Schema.org JSON-LD, feed RSS, sitemap XML, generación de slugs con soporte español
- UI estilo Apple: efectos glassmorphism, animaciones de partículas (SparklesBackground con prefers-reduced-motion), pills de tópicos, contadores de stats
Resultados Clave
- ~6.4K líneas en 43 archivos con soporte bilingüe ES/EN completo
- Pipeline de publicación end-to-end: Perspectiva Studio → R2 → SSG
- Motor CYOA con nodos de grafo, gestión de estado y múltiples finales
- Audiolibros TTS ElevenLabs con caché por hash de contenido
- SEO completo: Schema.org JSON-LD, RSS 2.0, sitemap XML
- Wiki protegida con 24 docs en 6 categorías
Tecnologías
Astro 4.x React 18 Tailwind CSS 3.4 TypeScript 5.6 Cloudflare Pages R2 Workers AI ElevenLabs
$ cat project.json
{
"name": "Codex",
"status": "production",
"stack": [8],
"url": "codex.cadences.app",
"results": [6]
}