Building a 147,000-word interactive book: The tech stack behind the project

A 147,000-word interactive book isn’t something you stumble into by accident—it’s the result of deliberate choices about technology, design, and user experience. That’s exactly what developer Kensaurus achieved with The Wanting Mind, a free, no-signup platform that blends Wikipedia’s depth, podcast narration, and interactive 3D graphs into a single seamless experience. Available in four languages and accessible across web and mobile, the project pushes the boundaries of long-form digital storytelling while proving that ambitious ideas can thrive without complex infrastructure.

Why an interactive book?

The Wanting Mind isn’t just another digital book—it’s a layered exploration of human dissatisfaction, weaving together economics, neuroscience, and Buddhist philosophy. Covering 25 chapters, the content spans topics like the Easterlin paradox and Minsky moments, concepts typically reserved for dense academic texts. To make such abstract ideas engaging, the platform integrates multiple modalities:

• AI-generated audio narrations for every chapter, delivered in natural voices by ElevenLabs across four languages.
• An interactive 3D knowledge graph that visualizes connections between concepts, people, and chapters using react-three-fiber and force-graph-3d.
• Playable simulations that let users manipulate data points, such as adjusting parameters to observe real-time changes in economic models.
• Shareable quote cards, generated client-side via Canvas, summarizing each chapter in a visually appealing format.

Despite its depth, the entire experience remains free and accessible without registration. A voluntary $9 supporter tier unlocks offline access and custom voice options—a simple tip jar for engaged readers rather than a monetization barrier.

A deliberately practical tech stack

Kensaurus designed the stack to be maintainable, scalable, and friendly to indie developers. Every component was chosen for reliability and developer experience, avoiding exotic or high-maintenance solutions. Here’s how the architecture breaks down:

Core framework and language

• React 19 + Vite 8: The foundation leverages React’s latest version for performance and Vite for fast compilation, enabling a smooth development cycle and optimized builds.
• TypeScript 5.9: With over 200 data files powering the content, TypeScript’s strict typing prevented countless errors and ensured consistency across translations and metadata.

Styling and UI

• Tailwind CSS 4: Used for its utility-first approach, enabling rapid prototyping and consistent design tokens. Dark mode was implemented seamlessly using Tailwind’s dark: prefix.

3D visualizations and mobile deployment

• react-three-fiber + drei: These libraries powered the interactive 3D knowledge graph and simulation visuals, providing a smooth, browser-native experience.
• Capacitor 8: Enabled cross-platform mobile deployment with a single React codebase, generating native iOS and Android apps without platform-specific rewrites.

Backend and data management

• Supabase: Served as the backend infrastructure, handling authentication, database operations, and file storage. Row-level security (RLS) eliminated the need for custom server logic.

AI-powered features

• ElevenLabs: Delivered multilingual AI narration with natural-sounding voices, avoiding the robotic tone common in text-to-speech systems.
• fal.ai (Flux): Generated chapter essence images, batch-processing visuals to match the book’s thematic tone.
• Gemini Veo 3.1: Produced short video teasers and trailers for each chapter.
• Claude (Anthropic): Handled translation across English, Japanese, Chinese, and Thai, followed by a human review to ensure accuracy.

Infrastructure and monitoring

• S3 + CloudFront: Hosted the static site with minimal costs—just $3 per month at current traffic levels.
• Sentry: Integrated on day one to track errors and performance issues, preventing small bugs from escalating into user-facing problems.
• Firebase FCM: Enabled web push notifications for new chapter releases, keeping readers engaged without requiring email signups.
• Langfuse: Provided observability into every AI call, tracking usage, costs, and performance for optimization.

Lessons that changed the project’s trajectory

Three key decisions had a disproportionate impact on the project’s success, each solving a problem most indie developers overlook until it’s too late.

1\. Pre-rendering for SEO: turning a single-page app into a search engine’s dream

A pure React 19 single-page application (SPA) poses a challenge for search engines like Googlebot, which typically doesn’t execute JavaScript. Without intervention, only the root page would be indexed, rendering the rest of the content invisible. To solve this, Kensaurus built a lightweight prerendering script using Puppeteer. The script navigated to each chapter route (e.g., /en/ch-4), waited for content to render, and saved the fully rendered HTML to a prerendered directory. This static HTML was then deployed to S3, ensuring Googlebot could crawl and index each chapter independently.

The result was immediate: indexed pages jumped from one to nearly 150 across all four languages within a day. For any SPA project aiming for organic growth, prerendering is a prerequisite—not an afterthought.

2\. Shareable quote cards generated entirely in the browser

Every chapter includes an "essence"—a single sentence summarizing its core idea. These essences were transformed into visually striking 1080x1080 cards using HTML Canvas within the app. The generateQuoteCardBlob function in src/components/QuoteCard.tsx rendered the quote on a generated background, added subtle styling, and made the card shareable via a browser’s native share dialog on mobile.

The beauty of this approach was consistency: the same function used to generate cards for social media previews was also used in the app itself. By running entirely client-side, it avoided server costs and ensured zero divergence between what users saw and what was shared online.

3\. Automating app store listings across languages and platforms

Manually updating descriptions, subtitles, and keywords for both Apple and Google app stores across four languages would have been a laborious, error-prone process. Instead, Kensaurus automated the entire workflow using two scripts:

• asc-update-listing.mjs: Interfaced with Apple’s App Store Connect API using JWT authentication, parsed a central markdown file (docs/store-listings.md), and pushed localized metadata for each region.
• play-update-listing.mjs: Performed the same task for Google Play using the Publisher API.

With a single source of truth for all store listings, updates became a one-command process. This automation not only saved hours but also eliminated inconsistencies and reduced the risk of typographical errors in critical marketing copy.

Pitfalls that cost time and money

Even the most meticulously planned projects encounter unexpected challenges. Three missteps stood out as particularly costly.

Bundling the knowledge graph data inflated the JavaScript payload

The initial plan was to embed the entire knowledge graph data directly into the application bundle. While this worked well in development, the production build ballooned from 380KB to a cumbersome 2.1MB. Realizing the performance implications, Kensaurus switched to lazy-loading the graph data only when the visualization was mounted, reducing load times and improving responsiveness.

Streaming audio generation led to a $40 Bingbot bill

The first audio implementation attempted to generate narrations on-demand via streaming. Within two days, automated crawlers from Bingbot triggered thousands of requests, racking up $40 in API costs. The solution was simple but effective: pre-generate all audio files and serve them statically from Supabase Storage. This eliminated runtime costs and ensured consistent performance.

Postponing monetization created unnecessary complexity

Kensaurus initially assumed a payment system could be added later. However, integrating a basic payment link in the first week took only 30 minutes. Retrofitting a paid tier into an existing user base would have required weeks of development, onboarding, and potential disruption. The lesson was clear: address monetization early, even if the implementation is minimal.

Advice for indie developers building similar projects

If you’re considering a long-form interactive project, these insights can save you time and frustration:

• Stick to one mobile shell. Whether you choose Capacitor or Tauri, avoid maintaining parallel builds for iOS and Android. The overhead of feature regression and testing across platforms is substantial.
• Prioritize SEO from day one. Prerender your content before launching any marketing campaigns. Without it, your project may remain invisible to search engines.
• Integrate error tracking early. Even on personal projects, Sentry or similar tools will alert you to issues before users notice them—and before they share their frustrations publicly.
• Generate marketing assets from your app code. Consistency matters, and doing so ensures your branding stays cohesive across platforms and campaigns.
• Automate repetitive tasks. Whether it’s app store listings, social media assets, or content updates, automation reduces errors and frees up time for creativity.

The Wanting Mind proves that ambitious digital experiences don’t require massive teams or budgets—just thoughtful architecture and a willingness to iterate. As digital storytelling continues to evolve, tools like AI, interactive visualizations, and seamless cross-platform delivery are democratizing what was once reserved for publishers with deep pockets. For indie developers, the future isn’t just about building—it’s about building smart.