DEV Community

shipi18n
shipi18n

Posted on • Originally published at shipi18n.com

How I Built a Multilingual Developer News Hub in a Weekend

#react #webdev #javascript #i18n

TL;DR: I built a news aggregator that automatically translates article summaries to 5 languages the moment they're published. Here's how I did it with RSS feeds, Claude AI, and my own translation API.

The Problem

I wanted a developer news feed on shipi18n.com - curated content about React, Next.js, AI, and i18n. But our users speak different languages. Building separate feeds for each language? That's a maintenance nightmare.

What if every article was automatically available in Spanish, French, German, Japanese, and Chinese?

The Architecture 

RSS Feeds → Superfeedr Webhook → Lambda → AI Summary → Translation API → DynamoDB
                                                           ↓
                                              React Frontend (i18next)
Enter fullscreen mode Exit fullscreen mode

Three key components:

  1. Feed aggregation - Superfeedr pushes new articles via webhook
  2. AI summarization - Claude generates concise summaries
  3. Auto-translation - Every summary gets translated instantly

Step 1: Setting Up RSS Aggregation

Instead of polling dozens of feeds, I use Superfeedr - they monitor RSS feeds and POST new items to my webhook.

// Lambda webhook handler
export async function handleSuperfeedrWebhook(req, res) {
  const payload = JSON.parse(req.body);

  for (const item of payload.items) {
    // Store article
    const result = await storeArticle(item, feedUrl);

    // Translate immediately
    if (result.created) {
      await queueTranslation(result.articleId, result.article);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Feeds I'm aggregating:

  • Frontend: Smashing Magazine, CSS-Tricks, Vercel Blog
  • AI: OpenAI, Anthropic, Hugging Face
  • i18n: W3C Internationalization
  • SaaS: Indie Hackers, Stripe

Step 2: AI-Generated Summaries

Most RSS feeds have terrible summaries - often just the first paragraph with HTML junk. Claude Haiku fixes that:

async function generateAISummary(article) {
  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.ANTHROPIC_API_KEY,
      'anthropic-version': '2023-06-01',
    },
    body: JSON.stringify({
      model: 'claude-3-haiku-20240307',
      max_tokens: 150,
      messages: [{
        role: 'user',
        content: `Write a 1-2 sentence summary of this article for developers.
                  Be concise and informative.
                  Title: "${article.title}"
                  URL: ${article.url}`
      }]
    })
  });

  const data = await response.json();
  return data.content[0].text;
}
Enter fullscreen mode Exit fullscreen mode

Haiku is perfect for this - fast, cheap ($0.25/M input tokens), and the summaries are actually good.

Step 3: The Translation Magic

Here's where it gets seamless. I built Shipi18n specifically for this use case - translating strings programmatically without managing translation files.

async function queueTranslation(articleId, article) {
  const targetLangs = ['es', 'fr', 'de', 'ja', 'zh'];
  const translations = {};

  for (const lang of targetLangs) {
    // Translate title
    const titleResult = await translateText(article.title, 'en', lang);

    // Translate summary
    const summaryResult = await translateText(article.summary, 'en', lang);

    translations[lang] = {
      title: titleResult.translatedText,
      summary: summaryResult.translatedText,
    };
  }

  await updateArticleTranslations(articleId, translations);
}
Enter fullscreen mode Exit fullscreen mode

The translateText function calls my own API:

const response = await fetch('https://api.shipi18n.com/translate', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': process.env.SHIPI18N_API_KEY
  },
  body: JSON.stringify({
    text: text,
    sourceLanguage: 'en',
    targetLanguages: [targetLang]
  })
});
Enter fullscreen mode Exit fullscreen mode

One API call, instant translation. No translation files to manage.

Step 4: Frontend with i18next

The React frontend uses i18next for UI translations, and the article translations come from the API:

const { i18n } = useTranslation();
const currentLang = i18n.language?.split('-')[0] || 'en';

// Get translated content based on user's language
const getTranslatedContent = (article) => {
  if (currentLang === 'en' || !article.translations?.[currentLang]) {
    return { title: article.title, summary: article.summary };
  }
  return {
    title: article.translations[currentLang]?.title || article.title,
    summary: article.translations[currentLang]?.summary || article.summary,
  };
};
Enter fullscreen mode Exit fullscreen mode

When a Japanese user visits, they see:

📰 React 19の新しいコンパイラがパフォーマンスを劇的に向上
Reactチームが新しいコンパイラを発表。手動のメモ化なしで...
Enter fullscreen mode Exit fullscreen mode

When a Spanish user visits:

📰 El nuevo compilador de React 19 mejora drásticamente el rendimiento
El equipo de React anunció un nuevo compilador que...
Enter fullscreen mode Exit fullscreen mode

Same article, automatic localization.

The Result

What I got:

  • News hub with 5 categories (i18n, Frontend, AI, SaaS, Creative)
  • Every article translated to 5 languages instantly
  • Language switcher that respects user's browser locale
  • Globe icon to preview all translations

Cost breakdown:

  • Superfeedr: ~$5/month for 30 feeds
  • Claude Haiku: ~$2/month for summaries
  • Shipi18n: Free tier covers it (90-day cache means repeat translations cost nothing)

Time to build: One weekend

Key Takeaways

  1. Don't poll RSS feeds - Use a service like Superfeedr that pushes updates
  2. AI summaries > raw excerpts - Claude Haiku is cheap enough to run on every article
  3. Translate at ingest, not render - Doing it server-side means instant page loads
  4. Cache translations - Shipi18n's 90-day cache means I only pay once per string

Try It

Check out the live news hub at shipi18n.com/news. Use the language switcher in the top navigation to switch between English, Spanish, French, German, Japanese, and more - watch all the article titles and summaries update instantly.

Want to add automatic translations to your own project? Get started with Shipi18n - the API that makes i18n feel effortless.

Building something multilingual? I'd love to hear about it. Find me on Twitter or join our Discord.

Top comments (0)