- Client
- Lua
- Role
- Lead Designer & Developer
- Timeline
- Ongoing product · v2 rebuild, October 2026
- Year
- 2025–2026
- Category
- EdTech
Overview
Lua is contextual language learning while you browse. The v2 rebuild is a Manifest V3 Chrome extension that swaps words on the pages you read into your target language, easiest first, then phrases, as you prove you know them. Around it: an onboarding flow that places you in about two minutes, a Firebase backend (Auth, Cloud Functions, Firestore rules) and the learnwithlua.com marketing site. Select-to-look-up (translation, meaning, example) covers fifteen languages and is rolling out with the next extension release.
Why
Flashcard apps isolate vocabulary from the articles and emails where people actually meet new words. Lua turns the pages you already read into the lesson: words swap into the language you are learning, easiest first, and the next level only opens once you know most of the last one.
The bet is that immersion only teaches when it is paced. Too much foreign text is noise, so Lua starts with a handful of everyday words and grows from there.
The challenge
Language apps isolate vocabulary from the articles and emails where people actually meet new words, which is why retention fades.
What made it hard
- Flashcard apps are disconnected from where vocabulary actually appears.
- Replacing words in place must never produce wrong grammar, so every entry is an invariant form.
- Progress has to be earned, not assumed: a level unlocks when you know most of the one before.
Approach
Replace words inside the page, easiest first. A learner unlocks the next level by knowing most of the current one (60% of a level, capped at 40 words), either by saying so or by seeing a word many times without ever peeking at the original. Onboarding places people with the same rule the extension uses, so the first page they read already matches their level.
Process
- Engine: Pure replacement engine with a vetted word list, plural handling, name/abbreviation guards and chunked DOM passes.
- Onboarding: Step-by-step investment ladder: language, goals, interests, time, sites to skip, placement and plan, then an account and the extension handoff.
- Backend: Auth-required Cloud Functions, per-user daily quotas and strict Firestore rules, covered by emulator tests.
- Site: Astro landing page with WebGL blobs, scroll-driven level story and a privacy page that matches what the code sends.
What we built
- Chrome extension: In-page replacement across four levels, hover to peek at the original, “I know this”, per-site pause and a popup that shows your level and what unlocks next.
- Placement and onboarding: Tap the words you know, see your starting level, save the plan to an account and hand it to the extension.
- Word lookup: Select a word or short phrase, press Look up, get translation, pronunciation, meaning and an example. Only the selected text is ever sent.
- Marketing site: learnwithlua.com, with a language-cycling headline, a level preview you can try and a roadmap that says what is live and what is not.
How it was built
The v2 extension is Manifest V3 with a pure replacement engine (no DOM, fully unit-tested), a content script that processes pages in chunks and never touches code, inputs or editable areas, and a service worker that handles word lookups. Every word-list entry is an invariant form so replacement can never produce wrong grammar, and names, brands and abbreviations are left alone.
Onboarding places learners with the same unlock rule the extension uses and saves their plan to a Firebase account through Cloud Functions. Backend endpoints require a verified account, apply per-user daily quotas and sit behind strict Firestore rules. The marketing site is Astro with GSAP, Lenis and three.js. Everything is covered by 113 automated tests.
Stack
- Chrome MV3: Extension and service worker
- Firebase: Auth, Functions, Firestore rules
- Astro + GSAP + three.js: Marketing site and onboarding
- Node test runner + jsdom: 113 automated tests
Outcomes
- 4: Levels working today
- 371: Vetted word and phrase entries
- 15: Languages in the lookup engine
- 113: Automated tests
Wins
- A four-level progressive replacement engine with a vetted 371-entry Spanish word and phrase list.
- Placement that uses the same rule as the extension, so level one is already the right level.
- Select-to-look-up built for fifteen languages (rolling out), sending only the selected text.
- A privacy page that matches exactly what the code sends.
Hard parts
- Never wrong grammar: Replacing words one at a time breaks agreement, plurals and word order. The word list only contains invariant forms, and plural rules, names and abbreviations are tested explicitly.
- Progress you can trust: Levels unlock when you know most of the previous one, either by saying so or by seeing a word many times without peeking. The rule is capped so bigger levels stay reachable.
- Security at the edges: Paid lookups needed verified accounts, quotas the learner cannot grant themselves and strict database rules. An independent review caught and fixed a plan-forgery risk before launch.
Services
- Chrome Extension (Manifest V3)
- Progressive Word & Phrase Replacement Engine
- Onboarding & Placement Flow
- Firebase Auth, Cloud Functions & Firestore Rules
- Marketing Site (Astro, WebGL, GSAP)