Internationalizing the Carburant Platform: A Refactoring Journey

The Localization Challenge

When scaling an application, language support becomes a critical bridge between the platform and its users. The Carburant project recently underwent a transition to better serve its French-speaking audience, moving beyond simple hardcoded strings to a more formal structure.

The Approach

To ensure the platform remains maintainable while expanding, we focused on decoupling text content from the application structure and standardizing our naming conventions.

Standardizing Application Labels

Updating the application identity was the first step. By changing the platform title to "Digitalisation de plateforme d'analyse de carburant," we established a clear, localized brand identity that resonates with the target users.

Implementing Structural Translations

In our React-based views, we transitioned from hardcoded text blocks to using localized components. This separation ensures that changing a language doesn't require modifying the core logic.

<div>
  <h1>{t('platform_title')}</h1>
  <p>{t('analysis_description')}</p>
</div>

By adopting this pattern, we can now map keys to specific JSON translation files, making it trivial to add support for additional languages in the future without risking regressions in our HTML structure.

Benefits of the Shift

Key Insight

Localization is not just about translating words; it is about architecture. Moving away from embedded text allows your codebase to remain clean and allows your UI components to act as pure templates, regardless of the language being rendered.

Generated with Gitvlg.com