Fablango — a language learning React PWA app powered by AI
Fablango — https://fablango.com/ — is an audio-based language learning mobile web app built from scratch. It's designed to help users learn languages through listening to and reading transcripts of short AI-generated stories.
The core experience is simple yet powerful: users listen to stories in their target language while following along with word-by-word transcripts, with translations shown in their native language side-by-side. The app supports 30+ languages and features AI-powered word-level translation matching that color-codes corresponding words between languages.
Like AgoraParts, this is an integrated solution. The user-facing mobile web app, the content generation pipeline (story text generation, TTS, transcription, translation, cover image generation), and the admin backoffice all live in the same monorepo. This massively improves development speed when iterating on content and features.
Being the architect, I decided to use the https://create.t3.gg/ stack again — a pattern that has proven itself time and time again. tRPC with Drizzle handles all our API needs, from story streaming to dictionary lookups to user progress tracking. The type safety from tRPC is invaluable when you're passing complex data structures like word-aligned transcripts between server and client.
The tech stack includes:
Next.js 15 with App Router and Turbopack
React 19 with the new React Compiler
tRPC 11 + Drizzle ORM for type-safe APIs
Tailwind CSS v4 for styling
Google Gemini for story generation and translations
ElevenLabs for high-quality multilingual TTS
Cloudflare R2 for audio/image storage
PostHog for analytics and feature flags
Autumn for payments/subscriptions
The content pipeline is particularly interesting — it's a series of scripts that orchestrate AI calls to: generate story text → synthesize speech → transcribe with word-level timestamps → match translations word-by-word → generate cover images. All outputs are validated with Zod schemas before being stored.
While it's true that this monolithic architecture won't scale forever, for an MVP focused on shipping fast and learning from users, it's exactly the right trade-off. The DX of having everything in one place — from generation scripts to frontend components to API routes — cannot be overstated.
