back to work
dev

Echoes

An interactive Mandarin character learning site

javascriptmandarintyping-testweb-app

Echoes is a web app designed to help me learn Mandarin characters through a focused typing experience. You type English words or phrases, and upon correct completion, the corresponding Mandarin character appears with visual effects.

How it works

  1. A random English word (or phrase) is displayed at the top.
  2. As you type, the app provides immediate visual feedback on your accuracy.
  3. When you complete the word correctly, the Mandarin character “echoes” onto the screen and is added to a collection grid.
  4. The experience is designed to be fluid and minimalist, focusing on the relationship between the English meaning and the Mandarin form.

The app uses a dictionary of English-to-Mandarin mappings and features various visual effects that trigger upon successful word completion.

Features

  • Minimalist Interface: A clean, distraction-free design focused on core learning.
  • Mobile Friendly: Works seamlessy on desktop and mobile devices with custom input handling.
  • Customisable: Easily expandable dictionary and effect system.
  • Visual Feedback: Smooth transitions and character cascades to reinforce learning.

Test it

You can find the project on GitHub bjsmithxyz/Echoes or test it live here.