Storefronts
2024 — Present Codex
Digital Publishing Platform
Editorial storefront — ~6.4K lines across 43 files. Books, audiobooks, CYOA interactive stories, and blog — authored in Perspectiva Studio (~15K lines), stored in R2, rendered as SSG with Schema.org SEO.
Year
2024 — Present
Role
Full-Stack Developer
Tech Stack
8 technologies
The Challenge
- Independent publishers need a platform combining traditional content (books, blogs) with AI-enhanced formats (audiobooks, CYOA interactive stories) and professional SEO
- Content pipeline must flow seamlessly from authoring studio to public storefront with dual distribution (codex.cadences.app + cadences.app/blog)
- Protected knowledge base needs auth-gated wiki with JWT verification for internal documentation
The Approach
- Publishing pipeline: Perspectiva Studio (authoring, ~15K lines JS) → R2 storage (PERSPECTIVAS_STORAGE) → Codex storefront (SSG) with prebuild data sync
- Editorial storefront config with type-specific interfaces — books, audiobooks, blog, CYOA sections, each with dedicated settings (postsPerPage, showProgress, showAchievements)
- Hybrid content strategy: static data files as fallback + API-fetched content from Perspectiva Studio at build time and runtime for dynamic blog posts
- Google OAuth via Google Identity Services for protected wiki area
The Solution
- ~6.4K lines across 43 files — 10 routes (ES/EN + wiki + login), 13 components, dark/light theme toggle
- Content types: books catalog, audiobooks with ElevenLabs TTS narration, CYOA interactive adventures (graph-based nodes with inventory/flags/stats), and dynamic blog
- CYOA engine (2,697 lines in Perspectiva Studio) — graph-based story nodes, GameSession state management, multiple endings, save progress, visual temperature for AI creativity
- Blog pipeline: Perspectiva Studio → R2 → prebuild fetch → SSG pages with Schema.org BlogPosting JSON-LD, RSS 2.0 feed, and XML sitemap
- AI chatbot via Workers AI (Llama 3.1 8B Instruct) with editorial context
- Auth-protected wiki: JWT-gated knowledge base with 6 categories, 24 documentation articles, user avatar + logout
- Full SEO: canonical URLs, hreflang alternates, Open Graph, Twitter Cards, Schema.org JSON-LD, RSS feed, XML sitemap, Spanish-aware slug generation
- Apple-style UI: glassmorphism effects, particle animations (SparklesBackground with prefers-reduced-motion), topic pills, stats counters
Key Results
- ~6.4K lines across 43 files with full ES/EN bilingual support
- End-to-end publishing pipeline: Perspectiva Studio → R2 → SSG
- CYOA engine with graph nodes, state management, and multiple endings
- ElevenLabs TTS audiobooks with content-hash caching
- Full SEO: Schema.org JSON-LD, RSS 2.0, XML sitemap
- Auth-protected wiki with 24 docs across 6 categories
Tech Stack
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]
}