More than half of all global web traffic originates from non-English speaking demographics. Planetary science, satellite tracking, and geophysics represent universally shared domains of human curiosity, transcending national and linguistic borders. Yet, the vast majority of indie web applications limit their internationalization to English and Japanese.
Within SatViewer3D, our vision was global from day one. We built native internationalization (i18n) supporting 14 world languages—Japanese, English, Simplified Chinese, Traditional Chinese, Spanish, French, German, Russian, Portuguese, Italian, Korean, Arabic, Hindi, and Thai. Below, we present the full architecture behind our zero-dependency client-side translation engine, RTL layout adaptation, and our worldwide SEO infrastructure.
1. Ultra-Lightweight Client-Side i18n Engine & On-Demand Dictionaries
While heavy enterprise libraries like react-i18next or next-intl are commonplace in modern frontend frameworks, embedding multi-megabyte i18n dependencies into a Three.js-centric single-page application severely compromises First Contentful Paint (FCP) and Time to Interactive (TTI).
To eliminate this overhead, SatViewer3D uses a handcrafted, zero-dependency translation engine built in under 60 lines of vanilla JavaScript:
// Zero-dependency i18n loader with dynamic DOM substitution
class I18nEngine {
constructor(defaultLang = 'en') {
this.currentLang = defaultLang;
this.translations = {};
}
async loadLanguage(lang) {
if (this.translations[lang]) return;
try {
const res = await fetch(`/locales/${lang}.json`);
this.translations[lang] = await res.json();
this.currentLang = lang;
this.applyToDOM();
} catch (err) {
console.error(`Failed to load dictionary for ${lang}`, err);
}
}
t(path, params = {}) {
const keys = path.split('.');
let val = keys.reduce((obj, key) => obj?.[key], this.translations[this.currentLang]);
if (!val) return path;
// Fast regex substitution for {{variable}} interpolation
return val.replace(/\{\{(\w+)\}\}/g, (_, k) => params[k] ?? '');
}
applyToDOM() {
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n');
el.textContent = this.t(key);
});
document.documentElement.lang = this.currentLang;
document.documentElement.dir = this.currentLang === 'ar' ? 'rtl' : 'ltr';
}
}Rather than compiling all 14 language dictionaries into one bloated bundle, each language payload (approximately 15 KB compressed) is fetched asynchronously on-demand when selected, keeping the initial network footprint minimal.
2. Right-To-Left (RTL) Layout Adaptation & CSS Logical Properties
Supporting Arabic introduced our greatest layout challenge: full Right-To-Left (RTL) UI rendering. Traditional CSS codebases heavily reliant on directional properties like margin-left: 16px; or float: left; visually fracture when text flows right-to-left.
To solve this elegantly across all modal cards and 3D overlays, we refactored our design system to CSS Logical Properties:
margin-left→margin-inline-startmargin-right→margin-inline-endpadding-left→padding-inline-startborder-left→border-inline-start
Setting dir="rtl" on the root <html> element triggers automatic horizontal flipping of margins, padding, and alignments without requiring cumbersome language-specific CSS overrides.
3. Static Localized Portals with Comprehensive `hreflang` Architecture
Client-side language switching alone is insufficient for organic discoverability: search engine crawlers rarely execute client-side storage toggles. Without dedicated static URLs, search bots only index the default fallback language.
To achieve comprehensive search visibility, SatViewer3D deploys dedicated static landing directories (/en/, /es/, /zh/, /fr/, /de/, /ru/, /ar/, etc.), binding them with strictly validated rel="alternate" hreflang="..." header links:
Configuring the international English page as x-default guarantees that visitors from regions without a native localized page are automatically guided to the global English interface.
4. Scaled XML Sitemaps and Structured Schema.org Metadata
To ensure rapid crawling, our build system generates an exhaustive sitemap.xml incorporating multi-language <xhtml:link rel="alternate"> definitions across 55+ URLs, sending clear canonical signals not only to Google, but also to international search engines like Yandex (Russia) and Baidu (China).
Furthermore, embedding JSON-LD structured data conforming to Schema.org (WebApplication and TechArticle) unlocks rich Google search snippets with application categories, software star ratings, and feature previews.
5. Conclusion: Key Takeaways for Global Indie Hackers
Implementing internationalization and global SEO from day one is vastly more efficient than attempting to retrofit localization into an existing monolithic codebase.
By pairing a lightweight vanilla i18n loader with CSS logical properties, static localized URLs, and strict hreflang tagging, SatViewer3D unlocked organic search impressions from over 100 countries worldwide. We hope these strategies assist other engineers building ambitious global web applications.