https://github.com/tnm/hsk
Minimalist web application with modern features for studying HSK (Chinese Proficiency Test) vocabulary using flashcards.
https://github.com/tnm/hsk
chinese flashcards hsk mandarin
Last synced: about 2 months ago
JSON representation
Minimalist web application with modern features for studying HSK (Chinese Proficiency Test) vocabulary using flashcards.
- Host: GitHub
- URL: https://github.com/tnm/hsk
- Owner: tnm
- License: mit
- Created: 2024-12-25T04:20:55.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-02T18:14:37.000Z (10 months ago)
- Last Synced: 2025-04-19T10:32:02.762Z (6 months ago)
- Topics: chinese, flashcards, hsk, mandarin
- Language: TypeScript
- Homepage: https://hskcards.app
- Size: 682 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HSK Cards
A minimalist, responsive web application with modern features for studying HSK (Chinese Proficiency Test) vocabulary using flashcards.
## Features
- π 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
## Usage
### Website
Live at [https://hskcards.app](https://hskcards.app)
### Desktop Controls
- 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
### Mobile Controls
- Tap to flip card
- Swipe left/right to navigate
- Tap buttons to mark learned/unlearned
### Modes
- 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.
## Development
This project uses:
- Vite for fast development and optimized builds
- React
- Tailwind CSS for styling
- Local storage for persisting preferences
### Building for Production
```bash
npm run build
```
This will create a `dist` directory with optimized production files.
### Preview Production Build
```bash
npm run preview
```
## Ideas
- 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
## Note on CSV format
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!
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is open source and available under the [MIT License](LICENSE).