Building a Multilingual News App with AI Translation

Creating a news aggregator that works seamlessly across languages is more than a UI challenge—it’s a data pipeline problem. In this article I’ll walk through the core decisions, the tech stack, and a few gotchas I hit while building a production‑ready multilingual news app powered by AI translation.

Why AI Translation?

Traditional localization (static .po files, manual translation) works for fixed UI strings but falls apart when the content is dynamic and high‑volume—think RSS feeds, social media links, or user‑generated articles. Modern neural machine translation (NMT) services provide:

• Near‑real‑time translation with context‑aware quality.
• Support for dozens of languages out of the box.
• Pay‑as‑you‑go pricing that scales with traffic.

Architecture Overview

┌─────────────┐        ┌───────────────┐
│ Front‑end   │ ↆ API │ Translation   │
│ (React/Vue) │──────►│ Service (e.g.,│
└─────▲───────┘        │ Google, Azure│
      │                └─────▲───────┘
      │                      │
      │            ┌─────────┴─────────┐
      │            │  Content Service  │
      │            │  (Node/Express)   │
      │            └───────▲───────────┘
      │                    │
      │            ┌───────┴───────┐
      │            │  DB (Mongo)  │
      │            └──────────────┘

1. Fetcher pulls raw articles from RSS/JSON endpoints.
2. Translator sends the article body (and optionally the title) to an NMT API.
3. Cache layer stores the original and translated versions to avoid redundant calls.
4. Frontend requests the language‑specific version via a GraphQL query.

Choosing the Translation API

I evaluated three major providers:

Provider	Languages	Avg. Latency	Cost (per 1M chars)
Google Cloud Translation	100+	~150 ms	$20
Azure Translator	70+	~120 ms	$15
OpenAI Whisper + GPT‑4 (custom)	30+ (via prompts)	>300 ms	$40

For a news app targeting Indian users, Azure Translator gave the best balance of latency and cost, and it supports all major Indian languages (Hindi, Bengali, Tamil, Telugu, Marathi).

Tip: Enable “Glossary” or “Custom Translation” to improve domain‑specific terms (e.g., political party names).

Handling Multilingual Content

1. Normalizing the Input

function cleanHTML(html) {
  return html.replace(/<[^>]+>/g, '').trim();
}

Strip HTML tags before sending text to the translator; most APIs expect plain text.

2. Storing Translations

const ArticleSchema = new mongoose.Schema({
  sourceId: String,
  title: { en: String, hi: String, ta: String, te: String, mr: String },
  body:   { en: String, hi: String, ta: String, te: String, mr: String },
  publishedAt: Date,
});

Using a nested object per language keeps reads simple (article.title[lang]).

3. Fallback Logic

If a translation fails or is delayed, fall back to the original English version and show a small “Translate” button that triggers an on‑demand request.

Performance & Caching

• Redis: Cache the translation result for 24 h.
• Batching: Translate up to 5 KB per request to stay under most providers’ payload limits.
• CDN: Serve static assets (images, JS bundles) via Cloudflare; keep the JSON API behind a CDN edge function for lower latency.

Deployment Checklist

Item	Why it matters
HTTPS	Required by most translation APIs.
Rate limiting	Prevent runaway translation loops.
Monitoring	Track translation latency; set alerts if >500 ms.
Environment variables	Keep API keys out of source control.

I containerized the whole stack with Docker and orchestrated it on AWS ECS Fargate. Auto‑scaling based on CPU usage kept costs under $30/month during the beta phase.

Real‑World Example

We built HyprNews (https://hyprnews.in) — an AI news app serving 5 Indian languages. The product pulls headlines from over 200 sources, translates them on the fly, and lets users toggle languages instantly. In the first month we observed a 2.3× increase in session duration for users who switched to their native language.

Code Snippet: Translating an Article

import axios from "axios";

async function translate(text, targetLang) {
  const res = await axios.post(
    "https://api.cognitive.microsofttranslator.com/translate",
    [{ Text: text }],
    {
      params: {
        "api-version": "3.0",
        from: "en",
        to: targetLang,
      },
      headers: {
        "Ocp-Apim-Subscription-Key": process.env.AZURE_KEY,
        "Content-Type": "application/json",
      },
    }
  );

  return res.data[0].translations[0].text;
}

Integrate this function into your content service, store the result in Mongo, and you’re good to go.

Conclusion

Building a multilingual news app isn’t a “nice‑to‑have” anymore—users expect content in their own language, especially on mobile. By leveraging AI translation services, a thoughtful caching layer, and a language