Multilingual Support

[Christiantyemele]

User Story:
As a user, I want to use the tool in my preferred language so that I can understand the process better.

Tickets:

• Language Selector: Add option during signup and in profile settings

• Auto-Detect Device Language: Suggest local language if available

• Translation System: Store UI text in localization files (support EN, PT, Zulu/SiSwati, Swahili)

Ticket ID: FE-I18N-001
Priority: High
Estimated Effort: 8 Story Points
Category: Frontend Feature

Description:

This ticket covers the implementation of internationalization (i18n) in the frontend application to support multiple languages. The goal is to create a scalable and maintainable i18n framework using i18next and react-i18next. This will enable the application to display content in the user's preferred language, starting with English, German, French, Portuguese, siSwati, and Zulu.

The implementation should handle language detection, persistence of the selected language, and provide a clear structure for adding new languages and translation strings in the future.

---

Tasks:

• 1. Install Dependencies:

  • Add i18next and react-i18next to the project's dependencies.

• 2. Set Up i18n File Structure:

  • Create a dedicated directory frontend/src/i18n.
  • Inside i18n, create a locales subdirectory to store the translation JSON files.

• 3. Create Translation Files:

  • Create JSON files for each supported language (en.json, de.json, fr.json, pt.json, ss.json, zu.json) inside frontend/src/i18n/locales/.
  • Populate the files with initial key-value pairs for common UI elements (e.g., navigation, buttons, titles).

• 4. Configure i18next:

  • Create the main configuration file frontend/src/i18n/index.ts.
  • Initialize i18next with the required settings:
    • Load translation resources.
    • Set a default language (en).
    • Set a fallback language (en).
    • Enable language persistence using localStorage.

• 5. Integrate with React:

  • Import the configured i18n instance into the main application entry point (frontend/src/main.tsx).
  • Wrap the root App component with the I18nextProvider or ensure i18next is initialized correctly.

• 6. Refactor Components:

  • Update a few key components (e.g., Navbar, HomePage) to use the useTranslation hook to display translated text.
  • Replace hardcoded strings with the t('key') function.

• 7. Implement Language Switcher:

  • Create a simple UI component (e.g., a dropdown) that allows users to switch between the supported languages.
  • This component should call i18n.changeLanguage() to update the application's language.

---

Acceptance Criteria:

• The application successfully loads with English as the default language.
• A language switcher is available in the UI, allowing users to select any of the supported languages.
• When a user selects a language, the UI text updates immediately to reflect the chosen language.
• The user's selected language is stored in localStorage and persists across page reloads and new sessions.
• If a translation key is missing for a selected language, the application correctly falls back to the English translation for that key.
• The i18n implementation is well-structured and documented, making it easy to add new languages or translations.

---

Dependencies:

• A working React frontend environment.
• Access to the initial set of translation strings for the supported languages.

---

Helpful Material Links:

• react-i18next Documentation: https://react.i18next.com/
• i18next Documentation: https://www.i18next.com/
• Tutorial on i18next with React: https://locize.com/blog/react-i18next/