A minimalist, responsive web application with modern features for studying HSK (Chinese Proficiency Test) vocabulary using flashcards.
- 📚 All HSK levels (1-6) vocabulary included
- 🎯 Focus mode for distraction-free study
- ✓ Track learned/unlearned cards
- ⌨️ Fast keyboard navigation
- 📱 Responsive design with touch support
- 🌗 Dark mode support
- 🔄 Shuffle mode for randomized practice
Live at https://hskcards.app
- Space: Flip card
- ← → or j k: Navigate cards
- 1-6: Switch HSK level
- f: Toggle learned/unlearned state
- u: Show unlearned only
- z: Toggle focus mode
- esc: Exit focus mode
- Tap to flip card
- Swipe left/right to navigate
- Tap buttons to mark learned/unlearned
- Focus mode: Hide most buttons and settings for distraction-free study
- Shuffle mode: Randomize the order of cards
- Dark mode: Toggle with the button in the top right. Preference is saved.
- Learning progress: Track which cards you've learned across sessions
Mix and match to find the best way to study for you.
This project uses:
- Vite for fast development and optimized builds
- React
- Tailwind CSS for styling
- Local storage for persisting preferences
npm run buildThis will create a dist directory with optimized production files.
npm run preview- Add traditional characters
- Allow users to mark cards as known/unknown for personalized practice
- Add colors to represent each tone in Pinyin for better visual distinction
- Implement a progress tracker to show study stats
The vocabulary data is stored in header-less CSV files with character, pinyin, and English:
跳舞,tiào wǔ,to dance
外,wài,outside
You could fork and adapt for other languages. Please do!
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.