Fablango
Learn through stories. Audio, transcripts, and word-by-word translations in 30+ languages.
Fablango is an audio-based language learning mobile web app built from scratch. It helps people learn languages by listening to and reading transcripts of short AI-generated stories.
Listeners follow word-by-word transcripts in their target language, with native-language translations side by side. The app supports 30+ languages and uses AI-powered matching to colour-code corresponding words across languages.
The mobile web app, content generation pipeline, and admin backoffice live in the same monorepo. Keeping story generation, speech synthesis, transcription, translation, cover images, and product features together makes iteration faster.
As architect, I chose the T3 stack again. tRPC and Drizzle handle APIs for story streaming, dictionary lookups, and progress tracking. Type safety is especially useful for complex structures such as word-aligned transcripts.
The stack includes Next.js 15 with App Router and Turbopack, React 19 and React Compiler, tRPC 11, Drizzle ORM, Tailwind CSS v4, Google Gemini, ElevenLabs, Cloudflare R2, PostHog, and Autumn.
The content pipeline orchestrates story generation → speech synthesis → transcription with word-level timestamps → word-by-word translation matching → cover image generation. Zod validates outputs before storage.
The monolithic architecture is a deliberate MVP trade-off: keeping scripts, frontend components, and API routes together prioritises development speed and learning from users.
