Skip to study
EW Studio

2021 → 2026 / Translate+

Say it like you mean it.

Translate on the device first. Keep the words you care about, and the Hindi you actually speak.

Role
Product, design direction and engineering lead, built with Claude Code
Timeline
2021 original · rebuilt 19–25 October 2026
Stack
React 19 · TypeScript · TanStack Router · IndexedDB
Open Translate+ ↗View the repository ↗The shared platform →

Live product recording, October 2026. AI actions requiring sign-in are not demonstrated. The capture manifest records each interaction and its limits.

Capture actions, source links and limits

See the phone layoutTranslate+ live phone interface at 390 pixels wide
2,000 glyphs

One instanced draw call for the globe, not for the whole app. README-reported implementation.

The rebuild

Keep the spark.
Rebuild the product.

2021 → 2026

Translate+ began in 2021 as a React Context exercise: two flag buttons, 🇺🇸 and 🇮🇳, that swapped the word "Submit" for "Bhejo". The name field didn't even keep its state. What was worth keeping was the pairing of English and Hindi, so that became the signature: Hinglish both ways, respect levels (aap, tum, tu), and an interface that itself comes in English and हिन्दी.

Reconstructed from the archived original source with React 18, esbuild and Dart Sass; the original CRA 4/node-sass toolchain was not rebuilt. Revision and substitutions

2021 source reconstruction → live 2026 product. Same 1440 × 900 viewport, uncropped. Historical layout rendered with compatibility tooling; it does not demonstrate the old services working.

Translate+, live 2026 interface
2026 / live product
Translate+, 2021 source reconstruction
2021 / reconstruction

The idea

Everything hangs from the line.

The Devanagari shirorekha becomes the rule above each panel. Fraunces and marigold sit beside Hindi; tone and respect level are explicit choices.

Translate+

Fraunces · Noto Serif Devanagari / original SVG mark

Marigold / #FFB43AIndigo / #7C8CFF

Brand colours above; text and focus accents adapt for contrast in each portfolio theme. Design source ↗

Three engineering decisions

The constraint shapes
the implementation.

Do not spend AI calls on typing

Constraint. Browser support and model downloads vary

Decision. prefer Chrome's built-in Translator/Language Detector on desktop Chrome 138+, cap availability/detection at 1–2 seconds, and fall back to an explicit Translate action

Result. as-you-type stays on-device; tones and unsupported pairs use a chosen provider when requested.

Source and evidence limits

translateapp/README.md → “On the device first”, “Typing never spends AI calls”. Offline requires a downloaded language pack; do not imply support in every browser.

Read the pinned README ↗

Preserve terms and handle Hinglish locally

Constraint. The on-device translator cannot accept glossary instructions

Decision. substitute numbered tokens such as ⟦0⟧, restore terms afterwards, and use rule-based Devanagari/Latin conversion with Hindi schwa deletion

Result. glossary terms survive the local path; कमल → kamal, समझना → samajhna are the documented examples.

Source and evidence limits

translateapp/README.md → “A glossary that works on the device too”, “Hinglish is rule-based”. 0 is the documented placeholder index, not a success rate. Tests are documented, but no accuracy percentage or test total is available.

Read the pinned README ↗

Make the globe share its work

Constraint. A glyph-rich hero can multiply geometry/material work

Decision. 2,000 glyphs share a plane and a canvas atlas, moved by a shader

Result. one instanced draw call for the globe. Defer until after first paint, wide screens and real GPU only; omit for reduced motion.

Source and evidence limits

translateapp/README.md → “One instanced draw call for the globe”. Do not generalize that count to the whole page or claim measured FPS.

Read the pinned README ↗

Architecture

Follow one request.

Input01Capability check02Local / chosen AI03Restore glossary04Local history05InputCapability checkLocal / chosen AIRestore glossaryLocal history
A capability check selects on-device translation or an explicitly requested provider action. Numbered tokens preserve glossary terms; rule-based Hinglish runs locally. Phrasebook and history stay in IndexedDB. Document and photo text needs separate consent before AI use.

Quality proof / evidence, with scope

Show what was checked.

App evidence

README reports Lighthouse ≥95 and zero axe violations.

Repository report, read 26 October 2026. These app scores were not rerun for this portfolio.

Commands and evidence in the README ↗

This portfolio page

Static HTML, deferred decorative Stage, explicit media intent and complete reduced-motion content.

performance
95/100
accessibility
100/100
best practices
100/100
seo
100/100

Lighthouse mobile, light theme, cold cache, simulated throttling. Measured 2026-10-26. Gzip static export on localhost.

Eight page cases across Chromium/WebKit, phone/desktop and both themes; two axe audits with zero violations. WebKit playback and real Safari hardware remain unverified.

Read the dated portfolio check results ↗

The honest next step

What remains.

Offline translation needs a downloaded language pack and supported desktop Chrome. Unsupported browsers or pairs require an explicit provider action.

Next / WillifyA vibe is only the beginning. ← Back to studio index