Implement Multi-Language Support

[zleypner]

Implement Multi-Language Support

The application needs to support multiple languages to cater to a global user base.

Problem

Currently, the application only supports a single language, which limits its accessibility and reach. Providing support for multiple languages will improve the user experience for non-English speakers.

Solution

Implement multi-language support using the i18next framework, with the following languages:

• Spanish

• English

Technical Requirements

1. Set up i18next for internationalization and localization.
2. Define language configurations for the supported languages.
3. Translate all static content (text, labels, messages, etc.) into the target languages.
4. Provide a language selection button for users to switch between languages.
5. Use country flags in the interface for selecting languages.
6. Persist the user's preferred language in the browser's localStorage.
7. Ensure seamless transition between languages.

---

Folder Structure

src/
  i18n/
    config.ts
    resources.ts
  components/
    language/
      LanguageSwitcher.tsx
  utils/
    i18n.ts

---

Acceptance Criteria

1. Users can switch between the 2 supported languages (Spanish, English).
2. Country flags are used in the interface for language selection.
3. All static content is correctly translated for each language.
4. The user's preferred language is persisted in the browser's localStorage.
5. Switching between languages is smooth and seamless.
6. The application gracefully handles missing translations.

---

Testing

1. Verify that the language selection functionality works as expected.
2. Ensure that the selected language is properly persisted in localStorage.
3. Test the application in each of the 2 supported languages to validate the translations.
4. Ensure that the transition between languages is smooth.
5. Simulate missing translations and verify the application's handling of the scenario.

---

This issue is blocked by:

• 75

• 78

• 76

• 69

[0xdevcollins]

May I be assigned to this?

[Benjtalkshow]

I'd like to handle this task. I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js/React, TypeScript, and Rust. I’ve made over 45 contributions to over 15 projects in the OnlyDust ecosystem, solving complex issues and delivering efficient, scalable solutions.

MY ETA is 48hrs. Thanks

[caxtonacollins]

Could I take over this issue?

[Ayoazeez26]

Would love to tackle this! I have worked on a similar issue here https://github.com/horuslabsio/seamlessui/pull/19 and I feel my previous experience would make this go smoother

ETA - 2 days

[ShantelPeters]

Can I jump on this task?

[QuiqueCode]

👤 Personal information

My name is Dylan Castillo, a developer passionate about technology and computing. I have a focus on frontend development, where I am constantly learning and evolving. I have experience in creating dynamic and functional applications using React. I always seek to develop efficient, scalable solutions focused on user experience.

🛠 General Project Requirements

• Framework: i18next
• Supported Languages: Spanish and English
• Persistence: Preferred language storage in localStorage
• UI/UX: Use of country flags as a selection interface

✅ Acceptance Criteria

• Users can switch between Spanish and English using the LanguageSwitcher component.
• Country flags are used in the interface for language selection.
• All static content is displayed correctly translated in each language.
• The selected language is correctly persisted and restored on page reload.
• Missing translations are handled without visible errors.
• The transition between languages ​​is fluid and without interruptions.

💡 Proposal

I will implement a scalable solution that will allow future developers to easily integrate new languages. I will use a hierarchical structure within the resources to organize the texts according to their context, making it easier to identify and modify each one.

For static components, such as the navigation bar or profile information, specific subdivisions will be created within the resource file, which will improve clarity and facilitate future expansions of the multilingual system.

As an added value, you could have the app automatically detect the language based on the user's browser settings, giving priority to the preference previously stored in localStorage. This will ensure a smoother and more personalized user experience from the start.

🌟 Benefits

• Scalability: The proposed structure will simplify the integration of new languages.
• Accessibility: If the default language of the user's browser is English and this is among the languages ​​supported by the application, no manual changes will be necessary.

[mimisavage]

Let me handle this issue!

[josephchimebuka]

I'd like to handle this task.

[JosueBrenes]

Hey @QuiqueCode have assigned the issue to you

[QuiqueCode]

@JosueBrenes Thank you so much. 🌟