App · React Native · 2024

Langimon

What if forgetting Japanese vocabulary made your virtual monster hungry? A gamified study app built on Tamagotchi mechanics and spaced-repetition science.

如果忘記日文單字會讓你的虛擬怪獸「餓肚子」,你還會偷懶嗎?基於電子雞機制與間隔重複科學打造的遊戲化學習 App。

Langimon app screenshot — monster raising and vocabulary quiz interface
#ReactNative #Firebase #Lottie #SRS #Gamification
01 · The Problem

The forgetting curve kills motivation before it kills vocabulary.

遺忘曲線消磨動力,比消磨詞彙更快。

Within 24 hours of a study session, the average learner forgets up to 70% of new vocabulary without review. That stat alone isn't the killer — the feeling is. You study 30 words on Monday. By Wednesday they're gone. Repeat this enough times and the lesson isn't "I need to review more" — it's "I'm not built for languages."

在一次學習後的 24 小時內,普通學習者在沒有複習的情況下會忘記高達 70% 的新詞彙。單純的數字本身不是殺手——那種感受才是。週一背了 30 個單字,週三全忘了。重複幾次後,你得到的結論不是「我需要多複習」,而是「我天生不適合學外語」。

Core Insight
核心洞察

The problem isn't a memory problem — it's a motivation and feedback loop problem. Traditional flashcard apps give no reward for consistency, no visible consequence for neglect. Progress is invisible until the JLPT exam.

問題不是記憶力問題——而是動力與反饋循環問題。傳統單字卡 App 對堅持不給予任何獎勵,對疏忽也沒有任何可見後果。進步是不可見的,直到 JLPT 考試才見真章。

Existing solutions like Anki are powerful but clinical. Duolingo gamifies with streaks, but streaks are easily broken and easily ignored. The gap: a system where your progress lives inside something that visibly needs you.

現有解決方案如 Anki 功能強大但過於冷靜。多鄰國用連續打卡遊戲化,但連續打卡很容易斷,也很容易被忽視。缺口在這裡:一個讓你的進步活在某個明顯需要你的存在之中的系統。

02 · The Solution

Make your monster hungry for your vocabulary reviews.

讓你的怪獸飢渴你的單字複習。

Langimon pairs a Tamagotchi-style virtual monster with a spaced-repetition vocabulary engine. The monster's state — healthy, hungry, or evolving — is a direct mirror of your study consistency. This transforms an abstract habit into a visceral, daily obligation.

Langimon 將電子雞風格的虛擬怪獸與間隔重複詞彙引擎配對。怪獸的狀態——健康、飢餓或進化中——直接反映你的學習一致性。這將一個抽象習慣轉化為一種真實的、每日的責任感。

// Feeding Mechanic
// 餵食機制

Complete 10 vocabulary quizzes → earn "Exp Candy" → feed your monster to restore stamina. Fail to review → monster shows a "Hungry" animation.

完成 10 個單字測驗 → 獲得「經驗糖果」→ 餵食怪獸恢復體力。疏於複習 → 怪獸顯示「飢餓」動畫。

// Evolution System
// 進化系統

Master all N5 vocabulary (800 words) → evolution animation triggers. Each JLPT milestone is a visual transformation, making long-term progress tangible.

掌握全部 N5 詞彙(800 個單字)→ 觸發進化動畫。每個 JLPT 里程碑都是一次視覺蛻變,讓長期進步變得有形可見。

// SRS Algorithm
// SRS 演算法

Words are scheduled for review at scientifically optimal intervals. Words you know well surface less. Words you struggle with surface more — adjusting to your personal retention curve.

單字按科學最優間隔安排複習。你掌握的單字出現頻率低,困難單字出現頻率高——適應你個人的記憶保留曲線。

// Stamina Cap
// 每日體力上限

Users can only feed their monster a limited amount per day. This prevents binge-studying, which the research shows is less effective than distributed practice.

用戶每天只能餵食怪獸有限次數。這防止了一次性刷題,研究表明這比分散練習效果差。

The core design bet: people who would skip a flashcard deck will not let their monster starve. The emotional attachment created by the monster's visual state (healthy → hungry → sick) acts as a commitment device that Anki-style apps can't replicate.

核心設計賭注:會跳過單字卡的人,不會讓他們的怪獸捱餓。怪獸視覺狀態(健康 → 飢餓 → 生病)創造的情感依附,是 Anki 風格 App 無法複製的承諾機制。

03 · Tech Deep Dive

Why these tools, and what broke along the way.

為何選這套技術,以及過程中什麼出了問題。

React Native was the obvious choice: one codebase, two platforms, and a mature ecosystem for the UI patterns this app needed. The monster animations are handled by Lottie, which renders After Effects animations as performant JSON — avoiding the heavy weight of embedded video while keeping rich, frame-by-frame expressiveness.

React Native 是顯而易見的選擇:一套程式碼,兩個平台,以及適合此 App 所需 UI 模式的成熟生態系。怪獸動畫由 Lottie 處理,它將 After Effects 動畫渲染為高效能的 JSON——避免了嵌入式視頻的沉重負擔,同時保留豐富的逐幀表現力。

Why Firebase over a custom backend
為什麼選 Firebase 而非自建後端

The monster's stamina and XP values needed to be instantly consistent across devices — if a user studies on their iPad in the morning and checks their iPhone in the afternoon, the monster state should match. Firebase Realtime Database's live-sync model handles this without any custom websocket infrastructure. Firebase Auth also gave me email + anonymous auth in an afternoon rather than a week of custom session management.

怪獸的體力和 XP 值需要跨設備即時一致——如果用戶早上在 iPad 上學習,下午查看 iPhone,怪獸狀態應該一致。Firebase Realtime Database 的實時同步模型無需任何自定義 WebSocket 基礎設施即可處理這個問題。Firebase Auth 也讓我在一個下午而非一週的自定義 Session 管理內完成了電郵 + 匿名認證。

React Native Firebase Realtime DB Firebase Auth Lottie SRS (SM-2 variant)

Animation performance on mid-range Android

中階 Android 設備的動畫效能

The evolution animation is complex — a 4-second transformation sequence with particle effects. On mid-range Android devices (Snapdragon 665 class), running this on the JS thread caused frame drops during the quiz-to-evolution transition. The fix: used the Lottie cacheComposition flag to pre-parse the JSON at app launch, and triggered the animation inside a InteractionManager.runAfterInteractions() block so the JS thread cleared the navigation stack before starting the render-heavy sequence.

進化動畫很複雜——一個帶有粒子效果的 4 秒轉換序列。在中階 Android 設備(Snapdragon 665 級別)上,在 JS 線程上運行這個動畫在測驗到進化的過渡期間導致了掉幀。解決方案:使用 Lottie 的 cacheComposition 標誌在 App 啟動時預解析 JSON,並在 InteractionManager.runAfterInteractions() 塊內觸發動畫,讓 JS 線程在開始渲染密集序列前清空導航棧。


Hardest Bug — Firebase race condition on multi-device writes
最難解決的 Bug — 多設備寫入的 Firebase 競態條件

When a user had two devices logged in simultaneously, both sessions could trigger a stamina-deduction write at the same time. Firebase's last-write-wins model meant one deduction silently disappeared — the monster ended up with more stamina than it should have. The system was rewarding cheating that no one was doing on purpose. Fixed by switching all stamina and XP mutations to Firebase Transactions, which enforce atomic read-modify-write cycles: the transaction reads the current value, modifies it, and retries automatically if another write happened in the meantime.

當用戶同時有兩台設備登入時,兩個 Session 可能同時觸發體力扣除寫入。Firebase 的最後寫入優先模型意味著一次扣除靜默消失——怪獸最終體力比應有的更多。系統在無意中獎勵了作弊。解決方案是將所有體力和 XP 變更切換為 Firebase Transactions,它強制執行原子性讀取-修改-寫入週期:Transaction 讀取當前值,修改它,如果同時發生了另一次寫入則自動重試。