Skip to main content

Language Translation Guide

This guide explains how the dynamic language translation system works in the eSchool SaaS Web Project and provides a step-by-step process for adding new languages.

System Overview​

The application utilizes a dynamic translation architecture powered by Redux and JSON. This ensures that only the required translation data is loaded, optimizing performance and scalability.

ComponentDescription
Language Registrysrc/lib/student/languages.json — The source of truth for all supported languages.
Translation Assetssrc/lib/student/translations/ — JSON files containing localized strings.
State ManagementlanguageSlice.ts — Handles language state and user preferences via Redux.
HookuseLanguage.ts — The interface for components to access translation data.

➕ Adding a New Language​

Adding a new language is a simple configuration process that does not require any logic changes.

1. Register the Language​

Open src/lib/student/languages.json and append a new entry to the array.

{
  "name": "French",
  "code": "fr",
  "flag": "🇫🇷",
  "isRtl": false
}
  • name: The display name in the application UI.
  • code: ISO 639-1 code (must match the JSON filename in step 2).
  • flag: The emoji or icon representing the language.
  • isRtl: Set to true for Right-to-Left languages (e.g., Arabic).

2. Create the Translation File​

Navigate to src/lib/student/translations/ and create a new JSON file named after your language code (e.g., fr.json).

3. Populate Localized Strings​

Copy the content from en.json into your new file and translate the values.

[!IMPORTANT] Maintain Key Parity: Always keep the JSON keys identical to the original en.json file. The application uses these keys to map translations dynamically across all components.