Interaktives 147.000-Wörter-Buch als kostenlose Web-App: Wie ich "The Wanting Mind" umsetzte

Ein ambitioniertes Projekt braucht mehr als nur eine klare Vision – es benötigt eine durchdachte technische Umsetzung. Der Entwickler hinter dem interaktiven Buch The Wanting Mind hat dies eindrucksvoll unter Beweis gestellt: Mit einer kostenlosen Single-Page-App (SPA) ermöglichte er es Nutzern weltweit, ein 147.000-Wörter-Werk zu erkunden, das sich wie eine Mischung aus Wikipedia, einem Podcast und einem dynamischen Wissensgraphen anfühlt. Ohne Anmeldung, in vier Sprachen (Englisch, Japanisch, Chinesisch, Thailändisch) und mit einer Fülle an interaktiven Funktionen – darunter KI-generierte Stimmen, 3D-Wissensgraphen und spielbare Simulationen. Doch wie gelingt es, ein solch komplexes Projekt technisch umzusetzen? Und welche Herausforderungen verstecken sich hinter den vermeintlich simplen Entscheidungen?

Die Architektur: Ein technischer Überblick

Die technische Basis von The Wanting Mind ist eine moderne Webanwendung, die auf bewährten Open-Source-Komponenten und cloudbasierten Diensten aufbaut. Der Kern besteht aus einer React 19-Anwendung, die mit Vite 8 gebündelt wird. Diese Kombination ermöglicht einen schnellen Entwicklungszyklus und eine effiziente statische Vorab-Renderung – entscheidend für die Suchmaschinenoptimierung (SEO). TypeScript 5.9 sorgt dabei für typsichere Dateistrukturen, da das Buch auf über 200 Datenbanken basiert. Die visuelle Gestaltung erfolgt mit Tailwind CSS 4, das eine konsistente Designsprache und dunkle Modi unterstützt.

Für die interaktiven Elemente setzt das Projekt auf Three.js (genauer: react-three-fiber und drei), um einen dynamischen 3D-Wissensgraphen zu erstellen. Dieser visualisiert Konzepte, Personen und Kapitel des Buches und macht komplexe Zusammenhänge greifbar. Auf mobilen Geräten läuft die App dank Capacitor 8 als native iOS- und Android-Anwendung – ohne dass ein separates Code-Repository benötigt wird.

Backend- und KI-Integration: Datenhaltung und Automatisierung

Die Datenhaltung und Authentifizierung übernimmt Supabase, das mit Row-Level Security (RLS) konfiguriert ist, um unbefugte Zugriffe zu verhindern. Die Authentifizierung erfolgt dabei ohne eigenen Servercode, was die Wartung vereinfacht. Für die Sprachausgabe setzt das Projekt auf ElevenLabs, eine KI-Text-to-Speech-Lösung, die natürlich klingende Stimmen in mehreren Sprachen bietet. Die Kapitel werden zudem mit fal.ai (Flux-Modell) als KI-generierte Bilder illustriert und mit Gemini Veo 3.1 für kurze Video-Teaser aufbereitet.

Ein zentraler Bestandteil der Lokalisierung ist die KI-gestützte Übersetzung durch Claude von Anthropic. Jedes Kapitel wird automatisch übersetzt und anschließend von einem menschlichen Übersetzer überprüft. Die Hosting-Kosten bleiben dank Amazon S3 und CloudFront überschaubar – aktuell belaufen sie sich auf etwa 3 US-Dollar pro Monat für die gesamte Seite.

Drei unerwartete Herausforderungen und ihre Lösungen

Bei der Entwicklung von The Wanting Mind traten einige Probleme auf, die der Entwickler zunächst unterschätzt hatte. Eine der größten Hürden war die SEO-Optimierung einer Single-Page-App. Standardmäßig indexiert Googlebot den Inhalt einer React-SPA nicht, da der JavaScript-Code erst im Browser ausgeführt wird. Um dieses Problem zu lösen, erstellte der Entwickler ein Skript, das mit Puppeteer jede Kapitel-Seite aufruft, den Inhalt rendert und als statische HTML-Datei speichert. Diese Dateien werden dann auf S3 hochgeladen, sodass Googlebot die Inhalte direkt crawlen kann. Der Effekt war sofort sichtbar: Die Anzahl der indizierten Seiten stieg von einer auf rund 150 – verteilt über die vier unterstützten Sprachen.

Ein weiteres unerwartetes Hindernis war die Erstellung von Shareable-Karten für soziale Medien. Jedes Kapitel enthält eine „Essenz“ – eine prägnante Zusammenfassung in einem Satz, die als Zitat auf einem KI-generierten Hintergrundbild dargestellt wird. Der Entwickler implementierte eine Funktion in QuoteCard.tsx, die diese Karten direkt im Browser mit HTML5-Canvas rendert. Nutzer können die Karten per Rechtsklick speichern oder über die Share-API auf mobilen Geräten teilen. Für die Markenpräsenz wurden diese Karten zudem automatisch mit Playwright generiert, um eine konsistente Darstellung in sozialen Medien zu gewährleisten.

Die dritte große Herausforderung betraf die Verwaltung der App-Store-Listings. Die Aktualisierung der Beschreibungen, Schlüsselwörter und Screenshots für den Apple App Store und Google Play Store in vier Sprachen erwies sich als extrem zeitaufwendig. Um diesen Prozess zu automatisieren, schrieb der Entwickler zwei Skripte: asc-update-listing.mjs für den App Store (über die App Store Connect API) und play-update-listing.mjs für Google Play (über die Google Play Publisher API). Beide Skripte nutzen eine zentrale Quelle in docs/store-listings.md, um die Listings konsistent zu halten. Diese Lösung sparte unzählige Stunden manueller Arbeit und ermöglichte schnelle Updates nach der Veröffentlichung.

Was nicht funktionierte: Lehrreiche Misserfolge

Nicht alle Experimente verliefen erfolgreich. Einer der größten Fehler war das Einbinden des gesamten Wissensgraphen in das Bundle. Die initiale JavaScript-Datei wuchs von 380 KB auf über 2 MB an, was die Ladezeiten erheblich verschlechterte. Die Lösung bestand darin, den Graphen erst bei der Anzeige nachzuladen.

Ein weiteres kostspieliges Experiment war die Streaming-Generierung von Audio-Dateien. Die initiale Idee, Sprachaufnahmen on-the-fly zu generieren, führte zu hohen API-Kosten – insbesondere durch den Bingbot, der die Seite crawlen sollte. Die Umstellung auf vorab generierte MP3-Dateien, die über Supabase Storage ausgeliefert werden, reduzierte die Kosten deutlich.

Schließlich erwies sich die Idee, eine Stripe-Integration erst später zu implementieren, als problematisch. Die spätere Einführung eines Bezahlmodells hätte einen erheblichen Aufwand bedeutet, da bestehende Nutzer hätten migriert werden müssen. Stattdessen wurde ein einfacher Link für freiwillige Spenden in der ersten Woche integriert – ein Ansatz, der sich als deutlich effizienter erwies.

Empfehlungen für Entwickler: Was Sie aus diesem Projekt lernen können

Wer ein ähnliches Projekt umsetzen möchte, sollte einige zentrale Lehren aus der Entwicklung von The Wanting Mind ziehen:

• Wählen Sie eine mobile Shell: Entscheiden Sie sich entweder für Capacitor oder Tauri – die Pflege beider Lösungen gleichzeitig ist extrem aufwendig und fehleranfällig.
• SEO zuerst: Rendern Sie Ihre Inhalte statisch vor, bevor Sie mit der Vermarktung beginnen. Ohne diese Maßnahme wird Ihre Seite von Suchmaschinen kaum gefunden.
• Fehlerüberwachung von Anfang an: Tools wie Sentry sollten frühzeitig integriert werden. Selbst in einem persönlichen Projekt können kleine Fehler zu großen Problemen führen, wenn sie nicht erkannt werden.
• Marketing-Assets aus dem App-Code generieren: Erstellen Sie soziale Medieninhalte direkt aus Ihrer Anwendung heraus. So bleibt das Branding konsistent und Sie sparen Zeit.
• Inhalte als Code verwalten: Speichern Sie Ihre Buchkapitel, Essenz-Zitate und Wissensgraphen als einfache TypeScript-Dateien. Ein Content-Management-System ist für Einzelautoren oft überflüssig – das Dateisystem und Git reichen völlig aus.

Die Zukunft von The Wanting Mind

Das Projekt ist noch lange nicht am Ende seiner Entwicklung. Der Entwickler plant weitere Verbesserungen, darunter die Integration zusätzlicher interaktiver Elemente und die Optimierung der Nutzererfahrung. Besonders im Fokus steht die Erweiterung der KI-gestützten Funktionen, etwa durch die Verbesserung der Sprachsynthese oder die Automatisierung weiterer Prozesse. Langfristig könnte das Projekt auch als Plattform für ähnliche interaktive Lerninhalte dienen – ein spannendes Vorhaben für die Tech-Community.

Für Entwickler, die vor ähnlichen Herausforderungen stehen, ist The Wanting Mind ein inspirierendes Beispiel dafür, wie ein technisch anspruchsvolles Projekt mit den richtigen Tools und einer klaren Strategie umgesetzt werden kann. Die Kombination aus bewährten Webtechnologien, KI-Integration und nutzerzentrierten Funktionen zeigt, dass Innovation nicht immer von komplexen Lösungen abhängt – sondern von einer durchdachten Architektur und der Bereitschaft, aus Fehlern zu lernen.