LearnChina v2.0 🎓

A comprehensive, modern Chinese language learning platform built with React, TypeScript, and Tailwind CSS. Inspired by Duolingo but designed specifically for Mandarin Chinese with advanced features.

✨ Features

🎯 Core Learning

• 15 Structured Units covering Basics to Advanced Grammar
• Interactive Lessons with multiple question types
• Progressive Difficulty from HSK 1 to HSK 6
• Smart Review System based on spaced repetition

🎮 Gamification

• XP System - Earn experience points for completing lessons
• Daily Streaks - Maintain consecutive learning days
• Gems Currency - Earn and spend gems in the shop
• Hearts System - Limited lives that encourage careful learning
• Achievements - Unlock rewards for milestones
• Leaderboards - Compete with friends

📝 Practice Modes

• Character Writing - Canvas-based stroke order practice
• Tone Practice - Master the 4 tones of Mandarin
• Listening Lab - Audio comprehension exercises
• Dialogue Practice - Real-world conversation scenarios
• HSK Mock Exams - Practice tests for all HSK levels

📚 Learning Resources

• Complete Pinyin Chart - All syllable combinations
• Grammar Library - Comprehensive grammar explanations
• Vocabulary Flashcards - HSK 1-6 word lists
• Reading Passages - Leveled reading materials
• Cultural Content - Learn about Chinese culture

🎨 User Experience

• Dark Mode - Easy on the eyes for night learning
• PWA Support - Install as a mobile app
• Offline Support - Learn without internet connection
• Responsive Design - Works on all devices
• Smooth Animations - Framer Motion powered transitions

🚀 Live Demo

Try LearnChina Now →

📦 Quick Start

npm install
npm run dev

See QUICK_START.md for detailed instructions.

📚 Documentation

Document	Purpose
QUICK_START.md	Get started in 5 minutes
DEPLOYMENT.md	Deploy to production
CONTRIBUTING.md	Contribution guidelines
PROJECT_SUMMARY.md	Detailed project info
CHANGELOG.md	Version history
SECURITY.md	Security policy

🛠️ Tech Stack

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/yourusername/learnchina.git
cd learnchina

2. Install dependencies

npm install

3. Start development server

npm run dev

4. Open http://localhost:5173 in your browser

Build for Production

npm run build

📁 Project Structure

learnchina/
├── src/
│   ├── components/       # React components
│   │   ├── layout/       # Layout components (Header, Sidebar)
│   │   ├── common/       # Common components (Loading, etc.)
│   │   └── learning/     # Learning-specific components
│   ├── pages/            # Page components
│   ├── store/            # Zustand state management
│   ├── data/             # Static data (HSK, grammar, etc.)
│   ├── types/            # TypeScript types
│   ├── hooks/            # Custom React hooks
│   ├── utils/            # Utility functions
│   └── services/         # API services
├── public/               # Static assets
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js

🛠️ Tech Stack

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• State Management: Zustand
• Animations: Framer Motion
• Icons: Lucide React
• Data Fetching: React Query
• PWA: Vite PWA Plugin

📱 PWA Installation

iOS (Safari)

1. Open the website in Safari
2. Tap the Share button
3. Select "Add to Home Screen"

Android (Chrome)

1. Open the website in Chrome
2. Tap the menu (3 dots)
3. Select "Add to Home Screen"

Desktop (Chrome/Edge)

1. Look for the install icon in the address bar
2. Click "Install LearnChina"

🌟 Key Features Explained

Spaced Repetition System (SRS)

Words are reviewed at increasing intervals based on your performance, optimizing long-term retention.

Character Writing Practice

Canvas-based practice with stroke order visualization and feedback.

Tone Recognition

Audio-based exercises to train your ear for the 4 tones of Mandarin.

HSK Integration

Complete vocabulary and practice tests for HSK levels 1-6.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Fonts: Google Fonts (Nunito, Noto Sans SC)
• Design inspired by Duolingo
• Chinese character data from various open sources

---

Start your Chinese learning journey today! 加油! 🇨🇳