Interactive Storybook

Washington University in St. Louis — Fall 2024

Tales We Weave is an AI-powered, branching “choose your own adventure” platform built for Washington University's CSE 503S course. Authors create nonlinear stories with branching choice points and configurable visual styles (e.g. anime, oil painting); readers navigate the branches while the app tracks and bookmarks their progress. A custom zoomable, pannable SVG canvas visualizes the entire story tree and highlights the reader's active and previously visited paths.

The frontend is built with Vue 3, Pinia, and Vue Router; the backend is Express.js with session-based authentication and MongoDB (via Mongoose) storing stories as sparse-array models for large narrative trees. Google Gemini generates branching narrative text, while fal.ai's Flux Schnell model generates matching illustrations for each branch. The app also supports a searchable story catalog and GDPR-compliant account deletion with cascading cleanup of orphaned branches and files.

Highlights

  • AI-generated branching narrative text (Google Gemini) and illustrations (fal.ai Flux Schnell)
  • Interactive, zoomable SVG visualization of the full story tree
  • Reader progress bookmarking and a searchable story catalog
  • Session-based auth with GDPR-compliant account deletion

Technologies Applied

Vue.jsPiniaVue RouterNode.jsExpress.jsMongoDBGoogle Gemini APIfal.aiJavaScriptHTMLCSSAI IntegrationGit