Hanzi Draw

React / Next.js / Tailwind

Summary

Web application for practicing the manual writing of Chinese characters (hanzi).

Description

This is an online tool I created for drawing Chinese characters (hanzi). It allows users to practice and improve their Chinese writing skills by tracing the characters with the mouse or finger (on mobile devices).
Upon opening the website, users are presented with a text input field where they can type in the Chinese character they wish to practice. Once the character is typed in, the user can click on 'Draw' and begin practicing writing the character. The user can see the stroke order of the character and follow the path with the mouse or finger, tracing the character on the screen.

Technical Specifications

The project was written in React 18 syntax, using the routing framework of Next.js 13.
The website is fully responsive, providing a great experience for users on desktop, mobile, or tablet.
Soon, I plan to add the login feature, so that users can create a personal account, favorite their favorite character lists, save drawings, and more.

Technologies

React

Next.js

Tailwind

Node.js

back