HSK Nest
A Mandarin study app I built to bring vocabulary, practice, and review into one focused learning flow.
Live Demo & Source
Experience the App
A fully functional instance is running at hsknest.com. You can try it instantly via Guest Mode or create an account to start studying.
The focus-ring dashboard tracking daily progress, due reviews, and an upcoming study forecast.
Overview
Mandarin learners often have to move between vocabulary lists, example sentences, and review tools. I built HSK Nest to bring those steps into one flow: encounter a word, practise it in context, and return to it later.
I designed the study flow, HSK-level onboarding, practice modes, and review queue around that problem. The app includes HSK 1–9 vocabulary and example sentences with pinyin, translations, and pronunciation. It uses spaced-repetition scheduling to decide when words return for review; individual learning outcomes depend on how the app is used.
Key Features
- Flexible vocabulary model: Entries combine a
term,translation, and optionalphoneticandmetadatafields, allowing other language content to be represented. - Tunable scheduling algorithms: Choose between FSRS (modern memory-model scheduler), SM-2 (adaptive SuperMemo 2), or Leitner (5 fixed boxes).
- Gesture-first study mode: A distraction-free, dark focus mode with a swipeable card stack.
- Multiple practice modes: Go beyond flashcards with meaning quizzes, reading quizzes (symbol → sound), matching rounds, and sentence practice to recognize vocabulary in context.
- HSK-level onboarding: Select your target HSK level at signup and the matching deck is automatically enrolled.
- Self-hosting option: The app can run on your own server. Browser-based pronunciation can reduce reliance on an external speech service; account and study data still depend on the hosting setup.
Gesture-first flashcard study mode with on-device pronunciation and integrated example sentences.
Technical Foundation
Built on a robust, modern stack designed for speed and simplicity in deployment:
- Next.js (App Router) & TypeScript
- Tailwind CSS with shadcn/ui primitives and framer-motion for fluid interactions.
- Prisma ORM (SQLite for dev, Postgres for prod)
- NextAuth.js for secure, credentials-based authentication.
The review queue brings due words together across lists, helping avoid duplicate review entries for the same word.