Internationalization

The frontend supports English and French via i18next.

Setup

src/i18n.js configures:

• Detection: Browser language via i18next-browser-languagedetector
• Fallback: English (en)
• Namespace: common (single namespace)
• Translation files: src/Locales/{en,fr}/common.json

Usage

import { useTranslation } from "react-i18next";

function MyComponent() {
  const { t } = useTranslation();
  return <h1>{t("welcome.title")}</h1>;
}

Random translations

For variety in UI text (e.g., placeholder messages):

import i18n from "../i18n";

const placeholder = i18n.randomT("chat.placeholders");
// Returns a random item from the translation array

Adding translations

1. Add the key to both src/Locales/en/common.json and src/Locales/fr/common.json
2. Use the key via t("section.key") in your component
3. For arrays (random selection), use i18n.randomT("section.key")

Adding a new language

1. Create src/Locales/{code}/common.json
2. Add the language code to supportedLngs in src/i18n.js
3. Translate all keys from the English file