Kotoba
Kotoba is a Japanese-learning web app built around a playful, skeuomorphic desk scene. Instead of a conventional dashboard, you interact with physical objects on a desk — a laptop, CDs, photocards, and a dictionary book — to move between learning tools.
The core loop is learning vocabulary through song lyrics: pick a track, read along with its Japanese lyrics, tap unfamiliar words to look them up in the built-in dictionary, then reinforce what you've learned through quizzes that earn you points.
Under the hood, Kotoba takes an unusual architectural stance. Rather than a component-driven React app, the UI is a set of hand-designed static HTML pages, each with inline CSS and JavaScript. React exists only as a thin shell that hosts the current page in an iframe and bridges its DOM events to the real backend services — a deliberate trade that keeps each page's visual design fully hand-authored while still wiring into typed domain logic.
highlights
- Skeuomorphic desk-metaphor UI — drag-and-drop CDs, a laptop popup, photocards, and a dictionary book
- Learn vocabulary in context by tapping words directly in song lyrics
- Built-in Japanese dictionary with instant word lookup
- Quizzes and a points/rewards system to reinforce learning
- Local-first data persistence with Dexie over IndexedDB — no backend server required
- Unusual 'static-HTML-first with a thin React bridge' architecture
screenshots




