Hanzi Play
An interactive web application designed to help users learn and memorize HSK 1-7 Mandarin vocabulary through gamified features and a built-in search dictionary.
React
Next.js
Tailwind CSS
TypeScript
Overview
Hanzi Play is a web-based educational application tailored for learning and memorizing Mandarin Chinese vocabulary according to the latest HSK 3.0 standards (Levels 1–7). By blending gamification with structured learning, the platform helps users build character recognition, master pinyin, and test their vocabulary retention in an interactive way.
Key Features
- Match Card Game: A card-matching game where users pair Hanzi characters with their corresponding pinyin and meaning to train character-to-pronunciation recall.
- Multiple-Choice Quizzes: Quick assessment quizzes designed to test vocabulary recall and keep users engaged through active recall practice.
- Interactive HSK Dictionary: A mini-dictionary grouped by HSK level featuring vocabulary search, translation, pinyin, and bookmarking functionality for targeted study.
- Progressive Web App (PWA): Optimized for offline readiness, allowing users to install the app on mobile or desktop devices and learn on the go.
Technical Implementation
- Next.js & React: Developed using the Next.js App Router for server-side rendering and client-side page transitions.
- Tailwind CSS (v4): Engineered with a modern, responsive layout that includes smooth hover effects, micro-animations, and a unified dark/light theme toggle.
- TypeScript: Written with full type safety to ensure robust data structures for the HSK vocabulary library.
- LocalStorage State: Leveraged local storage to persist bookmarks, audio preferences, and custom application settings across learning sessions without requiring a database backend.