PKC 해례 Haerye - A Korean Learning PWA Supporting 11 Languages (Open Source)

 

Hello, I'm PKC! 👋

Today, I'm excited to introduce "Haerye", a Korean learning web app I've been developing for about a month. It's now open-sourced on GitHub and free for anyone to use.

 

Experience the best free way to learn Korean for beginners on our dedicated web platform without the need for installing any apps. As a high-performance web app site, Haerye provides a seamless, browser-based experience to study everything from Hangul to grammar anytime, anywhere. This zero-install web site is the ultimate platform for global learners seeking comprehensive and accessible Korean education.

 

🎯 Project Overview

Haerye is an all-in-one Korean learning platform designed for foreign learners. It provides a structured learning path from absolute beginner to low-intermediate level, leveraging PWA (Progressive Web App) technology for an app-like experience.

• Website: https://www.haerye.com/
• GitHub: https://github.com/PKC0412/Haerye
• License: GPLv3 (free for non-commercial use)

✨ Key Features

1. Comprehensive Learning Modules

• Hangul Learning: 19 consonants, 21 vowels, and final consonants
• Vocabulary: 300+ words across 15 categories
  • Greetings, food, people, places, school, time, transportation, numbers, colors, body parts, nature, adjectives, verbs, etc.
• Grammar: Systematically organized into 11 categories
  • Particles, tenses, negation, comparison, conditionals, connectives, endings, quotations, voice, sentence structure
• Flashcards: Spaced repetition learning system
• Learning Statistics: Daily/weekly trends, mastery analysis, personalized recommendations

2. 11-Language Support 🌍

The entire UI and learning content are available in 11 languages:

🇬🇧 English | 🇩🇪 Deutsch | 🇪🇸 Español | 🇫🇷 Français | 🇮🇹 Italiano
🇯🇵 日本語 | 🇳🇱 Nederlands | 🇵🇹 Português | 🇷🇺 Русский | 🇹🇭 ไทย | 🇨🇳 中文

3. PWA Capabilities

✅ Partial offline support (Service Worker)
✅ Installable to home screen
✅ Fast loading speeds
✅ Automatic light/dark mode
✅ TTS pronunciation support (Web Speech API)
✅ Responsive design (optimized for PC/mobile)

🛠 Tech Stack

Built entirely with pure Vanilla JavaScript without any frameworks:

 

- Frontend: Vanilla JavaScript (ES6+)
- Styling: CSS3 (CSS Variables, Grid, Flexbox)
- PWA: Service Worker, Web App Manifest
- API: Web Speech API (TTS)
- Storage: LocalStorage
- Hosting: GitHub Pages

Why Vanilla JS?

1. Lightweight: Fast loading without framework overhead
2. Long lifespan: Not dependent on framework updates
3. Learning purpose: Deep understanding of native browser APIs
4. Complete control: Full understanding and control of every line of code

📁 Project Structure

Built with a modular architecture for clear separation of concerns:

 

 

js/
│
├─ core/              (Core System)
│  ├─ app.js          (App initialization)
│  ├─ ui-manager.js   (UI controller)
│  ├─ settings.js     (Settings management)
│  ├─ theme.js        (Theme switching)
│  └─ ...
│
├─ renderers/         (UI Rendering)
│  ├─ header-renderer.view.js
│  ├─ nav-renderer.js
│  ├─ stats-renderer.js
│  └─ ...
│
└─ features/          (Learning Features)
   ├─ hangul-learning.js
   ├─ vocabulary-learning.js
   ├─ grammar-view.js
   ├─ flashcard.js
   └─ ...

 

Total File Statistics:

• JavaScript: 27 modules
• CSS: 15 files
• Translation files: 187 (11 languages × 17 files)

🎨 Key Development Considerations

1. Modularity and Maintainability

Each feature is separated into independent modules for easy maintenance and expansion. For example:

• learning-progress.model.js: Data model
• learning-progress.storage.js: Storage logic
• learning-progress.runtime.js: Runtime logic

2. Internationalization (i18n) System

I built a custom i18n system to support 11 languages. All text is managed in JSON files and updates instantly when switching languages.

 

 

// locales/en/en.json
{
  "home.title": "Learn Korean Easily",
  "vocabulary.greeting": "Greetings",
  ...
}

3. Learning Statistics System

Using LocalStorage to track user learning data, providing:

📊 Daily/weekly learning trend graphs
📈 Category-wise word mastery
🔥 Grammar learning heatmap
💡 Personalized learning recommendations

4. TTS Pronunciation Support

Utilizes the Web Speech API for browser-native Korean TTS. However, there are limitations on iOS Safari, so I've provided detailed user guidance.

🚀 Running Locally

 

 

# Clone the repository
git clone https://github.com/PKC0412/Haerye.git
cd Haerye

# Run Python server
python -m http.server 8000

# Or Node.js
npx http-server -p 8000

# Open in browser
# http://localhost:8000

📱 PWA Installation Guide

Android (Chrome)

1. Visit the website, tap menu (⋮) → "Add to Home screen"
2. Launch like an app from your home screen

iOS (Safari)

1. Visit in Safari
2. Tap share button (⬆️) → "Add to Home Screen"

Desktop (Chrome/Edge)

1. Click "Install" button in the address bar
2. App icon added to Dock/taskbar

🔮 Future Roadmap

Features currently in planning:

• Dictation learning
• Pronunciation evaluation system (using Web Speech API)
• Situational conversation scenarios
• Vocabulary expansion (300 → 1,200+ words)
• Enhanced quiz system
• Audio example sentences

💡 What I Learned During Development

1. The Power of PWA

It was impressive how PWA can provide an app-like experience without native app development. Features like offline support through Service Workers and home screen installation really showcase PWA's potential.

2. Vanilla JS is Sufficient

You can definitely build large-scale web apps without frameworks. In fact, gaining a deeper understanding of native browser APIs led to more efficient code.

3. The Importance of Internationalization

Designing with i18n in mind from the start made supporting 11 languages much easier than expected. Multi-language support is essential for reaching a global audience.

🐛 Known Issues

• Language switching bug: Occasionally language switching may not work → Refresh (F5) to resolve
• iOS TTS limitation: Safari's autoplay policy may prevent the first pronunciation from playing → Tap twice to activate

📜 License

Following a Dual License Policy:

• Non-commercial/Open Source use: GPLv3 (free to use, fork, and redistribute)
• Commercial use: Separate license required

Contact: pkc0412@gmail.com

🙏 Closing Thoughts

After about a month of development, I'm excited to release the first version. While it's not perfect, I hope it serves as a solid starting point for foreign learners to systematically study Korean.

If you're interested in the project, please give it a ⭐ star on GitHub or contribute through issues and PRs!

Project Links:

• Website: https://www.haerye.com/
• GitHub: https://github.com/PKC0412/Haerye

Feel free to reach out with any questions or suggestions! 😊