Multilingual Support in MadeIn

This guide explains how the translation system works in the MadeIn application and how to use it effectively.

Overview

The translation system is built on Svelte stores and provides a simple way to manage multiple languages in the application. It supports:

Static translations defined in code
Dynamic translations loaded from the database
String interpolation for dynamic content
Language switching with persistence
Fallback to English for missing translations

Core Components

1. Language Store (`src/lib/stores/language.ts`)

Manages the current language state and provides translation functionality.

2. Translation Files

Translations are stored in a structured format with keys organized by feature:

{
  'feature.key': {
    en: 'English text',
    de: 'Deutscher Text',
    // ... other languages
  }
}

How to Use

Basic Translation

import { t } from '$lib/stores/language';

// In your Svelte component
$: welcomeMessage = t('welcome.message');

With Variables

$: welcomeMessage = t('welcome.user', { name: 'John' });
// Where the translation is: "Welcome, {name}!"

Using the useTranslation Hook

For better performance in components that re-render often:

import { useTranslation } from '$lib/stores/language';

const t = useTranslation();
// Now use t() in your component

Changing Languages

import { language } from '$lib/stores/language';

function changeLanguage(lang: string) {
  language.set(lang);
  // The language preference is automatically saved to localStorage
}

Adding New Languages

Add the language code to the supported languages in language.ts
Add translations for the new language in the translations object
Update the language selector UI if needed

Best Practices

Use Descriptive Keys: Group related keys with dots (e.g., 'auth.login.button')
Reuse Common Phrases: Use common keys for repeated phrases
Keep UI in Mind: Some languages may need more or less space
Test Thoroughly: Check all languages after making changes

Testing Translations

Visit /translation-test in the application to test all translations and see examples of usage.

Database Integration

Translations can be loaded from the database at runtime. The system will merge these with the static translations, with database translations taking precedence.

Troubleshooting

Missing Translations: Check the browser console for warnings about missing keys
Incorrect Rendering: Ensure all variables in translated strings are properly escaped
Language Not Changing: Verify the language code is supported and the store is being updated

TRANSLATION_GUIDE