← back to projects

Kotoba

ReactTypeScriptViteIndexedDB

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.

Source codeRuns locally with Vite — no live deploy yet.

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

The desk scene — the app's home and main navigation.
The desk scene — the app's home and main navigation.
Reading along with song lyrics; tap a word to look it up.
Reading along with song lyrics; tap a word to look it up.
The built-in dictionary book.
The built-in dictionary book.
Quizzes reinforce vocabulary and earn points.
Quizzes reinforce vocabulary and earn points.