A full-stack web app using Hanzi Writer to allow users to practise writing Chinese characters of their choice. A deployed version of the app can be accessed (link).
I have enjoyed using several apps for learning Chinese, particularly Chineasy, Duolingo and Pleco. While Chineasy allows a user to practise characters, they must be drawn from characters that a user has unlocked. I wanted more flexibility, so began some working putting together an app that would allow a user to curate a library of characters that they want to practise.
I made the app with NextJS. Initially, I used the Chinese Character Web API (HTTP address) for pronunciation, search and definition. However, I observed (rather late) that there was no support for secure HTTPS requests. Although the security risks seemed limited to me, I decided it would be better to recreate the functionality myself. I created an API with Postgres that I then populated with data from the same source used by the Chinese Character Web API, the Unihan Database. There are some nice features of the Chinese Character Web API that I have not reproduced, but it broadly succeeds in the requirements I had for this project. One issue I faced was that not all the characters in the Unihan Database can generate quizzes with Hanzi Writer, so I used Make Me a Hanzi's dictionary, which Hanzi Writer uses, to filter the items entered into the database.
The design for the practice page was heavily indebted to Chineasy's character practice UI. For the navigation bar design, I drew from the navigation bar in Duolingo's app. For button design, I was influenced by the work of the design team from my time with Lyfta Education. The modals, and the switches on the settings page, took advantage of templates as well as functionality provided by Headless UI.
