MandarinFlow is a polished HSK Chinese learning web app built from an older lesson demo and redesigned as a client-ready education product. It combines lesson planning, flashcards, quizzes, sentence building, audio playback, progress metrics, and responsive mobile layouts in one React/Vite application.
- Two-week HSK study plan with lesson progress and completion states
- Flashcard workspace with Chinese characters, pinyin, English meaning, and audio playback
- Sentence builder practice flow for active recall and speaking preparation
- Quiz review mode with scoring and completion feedback
- Responsive dashboard for desktop, tablet, and mobile learners
- Runtime text normalizer that repairs mojibake in the original lesson files
- Accessible focus states, high-contrast UI, reduced-motion support, and keyboard-friendly controls
- React 19
- Vite 7
- Lucide React icons
- CSS modules-style application stylesheet
npm install
npm run devnpm run lint
npm run build- Add user accounts and saved learning progress
- Connect lessons to a CMS or tutor admin dashboard
- Add spaced-repetition scheduling for vocabulary review
- Store quiz attempts and learner analytics in a backend
- Add Stripe subscriptions for course access
- Package the interface as a mobile app with React Native or Capacitor
This project is designed to demonstrate UI/UX redesign, education product thinking, React implementation, responsive design, and client-ready presentation assets for a language learning platform.