← Back to projects

Language · Education

Khmer Flashcard App
Teaching kids Cambodian words, one card at a time

Year 2026
Stack HTML · CSS · Vanilla JS
Deployed via GitHub Pages
Live site View project →
01

The Original Prompt

The exact words I gave Claude to kick this off.

"Create an easy flashcard app for learning Khmer words for kids. Make it interactive with sound so that you can click on the flashcard and learn basic words. Style it fun and bright with images for each word. Users can click through the words and practice saying them."

From there the conversation evolved — adding four more categories (honorifics, places, days of the week, and weather), correcting pronunciations across all 80 words, publishing to GitHub Pages, and finally building out a custom audio system so real recorded pronunciations can replace the text-to-speech fallback word by word.

02

Explain It Like I'm 5

How it works, why it was built this way, and the thinking behind each decision.

❓

What it solves

Khmer is not a commonly supported language amongst the popular language apps. This helps me connect with my child and teach basic Khmer words.

⚙️

What it does

It's a digital flashcard deck for learning Khmer (Cambodian) words. You pick a category — animals, food, colours, numbers, greetings, body parts, honorifics, places, days of the week, or weather — then flip through cards one at a time. The front shows an emoji and the English word. Tap the card and it flips to reveal the Khmer script, a phonetic pronunciation guide, and a button to hear it spoken aloud. Kids can rate each card with stars, earn confetti for high scores, and track progress through a bar at the top. There are 80 words across 10 categories.

🧱

How it's built

A single self-contained HTML file — no frameworks, no build step, no server. All 80 words live in a plain JavaScript object at the top of the file, making them easy to edit. Card flipping uses CSS 3D transforms. Sound works in two layers: the app first checks for a custom recorded .mp3 file in an audio/ folder; if none exists it falls back to the browser's built-in Web Speech API (text-to-speech). Animations — confetti, card slides, emoji pops — are all CSS keyframes and vanilla JS. No external dependencies beyond two Google Fonts.

🤔

Why this approach

Plain HTML was chosen deliberately over React or a framework — a flashcard app doesn't need reactive state or a component tree, and keeping it as a single file means anyone can download it, open it locally, and it just works. The two-layer audio system (recorded file → TTS fallback) means the app is immediately usable before any recordings exist, and improves gradually as real audio is added word by word. GitHub Pages was chosen for hosting because it's free, permanent, and requires zero backend — the whole project lives in one repo with no running costs.

🚀

How it's deployed

The file was uploaded directly to a public GitHub repository as index.html. GitHub Pages was enabled under Settings → Pages, pointing at the main branch root. GitHub automatically detected the index.html and published it — no CLI, no CI pipeline, no configuration file needed. The whole deployment took under five minutes. The live URL is knga10.github.io/khmer-flashcards. Future recorded audio files will be added by uploading .mp3 files into an audio/ folder in the same repo.

03

What's Next

Where this project could go with more time and feedback.

Near-term

Record native-speaker audio for all 80 words and upload them to the audio/ folder. The app is already wired to use them automatically — it just needs the files. A recording guide with every filename and pronunciation hint is already written and sitting in the repo.

Medium-term

Add a quiz mode where kids are shown the Khmer script and have to pick the correct English word from four options. Introduce simple spaced repetition — words rated 1–2 stars come back sooner, words rated 4–5 stars are shown less frequently. Add more categories based on feedback from kids and teachers: classroom objects, family, clothes, transport.

Ambitious

Package as a Progressive Web App (PWA) so it can be installed on a tablet and used offline — important for classrooms with unreliable internet. Add a parent/teacher dashboard that tracks which words a child has mastered over time. Expand beyond Khmer and offer the same framework for other Southeast Asian languages taught in Canberra's multicultural schools.

04

Share Your Thoughts

Feedback, ideas, and questions are welcome — I read everything.

Responses go to a private Google Sheet — no spam, ever.