frontend-translation-management

Frontend Translation Management

Overview

Maintain consistent translation practices across the frontend application to ensure proper internationalization and user experience.

Translation File Structure

apps/frontend/public/locales/
├── en/translation.json          # English (primary)
├── de/translation.json          # German
├── fr/translation.json          # French
└── [lang]/translation.json      # Other languages

Translation Key Naming Conventions

✅ CORRECT Patterns

// Hierarchical structure
"blog.status.published"
"user.profile.edit"
"common.loading"
"error.validation.required"

// Action-based keys
"button.save"
"button.cancel" 
"button.delete"

// State-based keys
"common.loading"
"common.saving"
"common.updating"
"form.submitting"

❌ WRONG Patterns

// Hardcoded text in components
<Button>Save</Button>
<span>Loading...</span>

// Inconsistent key naming
"saveBtn"
"save_button"
"SAVE_BUTTON"

// Missing translations for dynamic states
{isLoading ? "Loading..." : "Save"}

Required Translation Categories

Common States

{
  "common": {
    "loading": "Loading...",
    "saving": "Saving...",
    "updating": "Updating...",
    "deleting": "Deleting...",
    "submitting": "Submitting...",
    "processing": "Processing...",
    "success": "Success",
    "error": "Error",
    "retry": "Retry"
  }
}

Form States

{
  "form": {
    "submitting": "Submitting...",
    "validating": "Validating...",
    "saved": "Saved",
    "unsaved": "Unsaved changes"
  }
}

Button Actions

{
  "button": {
    "save": "Save",
    "cancel": "Cancel",
    "delete": "Delete",
    "edit": "Edit",
    "create": "Create",
    "update": "Update"
  }
}

Component Translation Patterns

✅ CORRECT Implementation

// Using loading states with translations
const { t } = useTranslation()
const isLoading = fetcher.state === 'submitting'

return (
  <Button disabled={isLoading}>
    {isLoading ? t('common.updating') : t('button.save')}
  </Button>
)

// With loading spinner
return (
  <Button disabled={isLoading}>
    {isLoading && <Spinner className="mr-2" />}
    {isLoading ? t('common.saving') : t('button.save')}
  </Button>
)