Skip to content

Frontend: Add internationalization (i18n) framework and initial language support #319

@CelestinaBeing

Description

@CelestinaBeing

Summary

Trivela targets the global Stellar ecosystem but all UI text is hardcoded in English. Adding an i18n framework now (before the string count grows) will enable the community to contribute translations and reach non-English-speaking Stellar users — a significant untapped audience.

Problem

  • All UI strings are hardcoded in JSX components
  • No i18n framework configured
  • No translation files or contributor workflow for adding languages
  • Retro-fitting i18n after the fact is significantly more costly

Acceptance Criteria

  • Add i18next + react-i18next to frontend/
  • Extract all user-facing strings from: Landing.jsx, Header.jsx, CampaignDetail.jsx, CreateCampaign.jsx, About.jsx, ErrorBoundary.jsx into frontend/src/locales/en.json
  • Add language detection: i18next-browser-languagedetector (auto-detect from browser)
  • Add a language switcher dropdown in the Header (show when > 1 language available)
  • Add a second language as a baseline (e.g. es.json — Spanish — with machine-translated strings marked for community review)
  • Document how to contribute a new language translation in CONTRIBUTING.md
  • Add CI check: en.json must have all keys present (fail if new string added to code without translation key)

References

  • frontend/src/ — all JSX components with UI strings
  • CONTRIBUTING.md
  • react-i18next

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave program

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions