Skip to main content

Documentation Index

Fetch the complete documentation index at: https://grantmaster.dev/llms.txt

Use this file to discover all available pages before exploring further.

​
Internationalization (i18n) Workflow

GrantMaster targets a global audience of NGOs. This document details how to manage translations and add support for new languages.

​
🏗️ The i18next Setup

We use react-i18next for translation management.
  • Logic: src/shared/i18n/index.ts
  • Translations: public/locales/{lang}/common.json
  • Hook: useTranslation() from the library.

​
🚶 Adding a New String

  1. Identify the Key: Use a descriptive, hierarchical key (e.g., grants.details.deadline).
  2. Add to English: Open public/locales/en/common.json and add the new key/value.
  3. Add to Other Languages: (Optional but recommended) Add the key to es, fr, etc. If skipped, the system will fallback to English.
  4. Use in Code:
const { t } = useTranslation();
return <h1>{t('grants.details.deadline')}</h1>;

​
🌍 Supported Locales

  • en: English (Source of Truth)
  • es: Spanish
  • fr: French
  • de: German

​
🛠️ Specialized i18n Features

​
1. Variables and Pluralization

Do not concatenate strings. Use variables.
  • JSON: "userCount": "{{count}} users connected"
  • Code: t('userCount', { count: 5 })

​
2. Date and Currency Localization

Use the global FormatUtility class:
  • FormatUtility.currency(100, 'EUR'): Returns 100,00 € or $100.00 based on locale.
  • FormatUtility.date(date): Uses the browser’s locale to format the date string.

​
3. RTL (Right-to-Left) Support

For languages like Arabic or Hebrew:
  • The LanguageService toggles a dir="rtl" attribute on the <html> tag.
  • Use CSS Logical Properties (e.g., margin-inline-start instead of margin-left) to ensure layouts flip automatically.

​
🚀 Translation Workflow for Non-Developers

SuperAdmins can review and edit translations via the Localization Hub in the SuperAdmin dashboard. These changes are saved to a translations_overrides collection in Firestore, which the app merges into the static JSON files at runtime.