How I built a multilingual news SPA in vanilla JS — architecture notes

NewsScope is a real-time news search engine: search a topic, filter by language, category and country, get live results from the NewsData.io API. No React, no bundler, no npm dependencies — just HTML, CSS and vanilla ES2020+. This post is about a few specific decisions in the architecture that I think are worth sharing. The module structure The JS is 9 files, each with a single responsibility, loaded in dependency order directly in index.html : config.js → i18n.js → data.js ↓ ↓ ↓ helpers.js → geo.js → ui.js ↓ ↓ ↓ render.js → api.js → main.js Every module only uses things defined in modules loaded before it. main.js registers all event listeners and calls init() — it's the only file that touches everything. config.js is the smallest file in the project, since it only defines the state object and two constants. All app state lives in a single flat object in config.js , accessed as a global: const S = { apiKey : '' , query : '' , activeQuery : '' , language : ' es ' , category : '' , country : '' , results : [], nextPage : null , loading : false , hasSearched : false , error : null , }; No state management library. When something changes, the relevant render function gets called explicitly. Simple, and easy to trace. Translating search intent, not just the UI Most i18n stops at labels and button text. NewsScope has 10 predefined topic shortcuts (AI, Climate, Economy, Cybersecurity…) that trigger a search. If a user picks "Cybersecurity" while the app is set to Japanese, the keyword sent to the API should be in Japanese — not a transliteration of the English word. The solution is a TOPIC_KEYWORDS map in data.js : const TOPIC_KEYWORDS = { ai : { es : ' inteligencia artificial ' , en : ' artificial intelligence ' , ja : ' 人工知能 ' , ar : ' الذكاء الاصطناعي ' , /* 7 more */ }, cyber : { es : ' ciberseguridad ' , en : ' cybersecurity ' , ja : ' サイバーセキュリティ ' , /* 8 more */ }, // 8 more topics }; One string per language, per topic. Switching the UI language and then selecting a