WD401-level8-Sai Mallik Rameshwaram

                                                                                                       WD-401 level-8

1)Setting up Traduora as a collaborative translation tool:

step 1-Clone the Ever Traduora Repository: First, I'll need to go to the Ever Traduora website            and download the code by clicking on the "Clone or Download" button. Then, I'll open my                    computer's terminal and follow below instructions:

                    git clone https://github.com/ever-co/ever-traduora

                    cd ever-traduora

step 2-Start Ever Traduora using Docker Compose: To make sure I have Docker installed on my        computer, I'll type in the following command in my terminal:

                            docker-compose -f docker-compose.demo.yaml up

This command will start Ever Traduora on my computer, so I can use it for translations.

step 3-Access Traduora Web Interface: I'll open a web browser like Chrome or Firefox and type         in http://localhost:8080 in the address bar.

 I should now see the Traduora login/signup page on my screen.

 step 4-To sign up for an account on Traduora: I followed the below steps for sign up in Traduora
                     ->Click "Sign Up."

                    ->Enter username, email, and password.

                    ->Click "Sign Up."

                    ->Check email for verification.

step 5- Login to Ever Traduora: I'll go back to the Ever Traduora login page. I'll enter my                     username and password, then click on the "Login" button.

step 6- Create a New Project: Once I'm logged in, I'll see my dashboard. I'll click on the "New             Project" button. And I'll give my project a name and choose the languages I want to translate my             content into

 step 7-Upload Files or Content: I'll upload the files with the content I want to translate. I can                 upload files like JSON or CSV that contain the text I want to translate.

 step 8-Translate Content: Finally, I can access the content and start translating it into different             or selected languages.

2)Adding translation for each language:

step-1 Navigate to Project Settings: Once I logged in, I went to my project dashboard.

step-2 Access Language Settings: Now I Looked for the translations section within my project.

step-3 Add New Locale: Clicked on the right top corner "New Locale" button. A dialog box will            appear, prompting to select the language you want to add.

I Searched for and selected the desired language i.e english and spanish from the list. And clicked        on "Add Selected."

step-4 Translate Content: After adding the language, I observed a list among the supported                locales. Now click on the newly added language to access its translation interface. Here, I given        input translations for the content in that language.

step-5 Save Changes: Once translations are entered, I make sure and  save my changes.

step-6 Repeat for Each Language: Now, repeated the same process for the languages I  want to            support in my project i.e sportnews.

                              

3)Setting up your React project to make use of i18n:

step 1-Install i18n Library: Firstly, I installed all the necessary i18n libraries, such as react-               i18next or react-intl.

step 2-Set Up Configuration: I Created an i18n configuration file (i18n.js) inside the routes folder to define settings for English and Spanish translations.

Imported translation files for both languages followed by initReactI18next, LanguageDetector from react-i18next, i18next-browser-language detector.

Example configuration for react-i18next which i used in my sportsnews application:

             

import i18n from "i18next";

import { initReactI18next } from "react-i18next";

import LanguageDetector from "i18next-browser-languagedetector";

import enJSON from "../locale/en.json";

import esJSON from "../locale/es.json";

i18n

  .use(LanguageDetector)

  .use(initReactI18next)

  .init({

    debug: true,

    resources: {

      en: { ...enJSON },

      es: { ...esJSON },

    },

    fallbackLng: "en", //seeting default langugae

  });

step 3-Provide i18n Context: I imported the previously created i18.ts file in App.tsx .

/* eslint-disable @typescript-eslint/no-unused-vars */

import { RouterProvider } from "react-router-dom";

import { useContext } from "react";

import { ThemeContext } from "./context/theme";

import { ArticlesProvider } from "./context/articles/context";

import { MatchesProvider } from "./context/livescores/context";

import { TeamsProvider } from "./context/teamdetails/context";

import { SportsProvider } from "./context/favourites/context";

import "./App.css";

import router from "./routes";

import "./routes/i18n";

const App = () => {

  const { theme } = useContext(ThemeContext);

  return (

    <div

      className={`h-screen w-full mx-auto py-2 ${

        theme === "dark" ? "dark" : ""

      }`}

    >

      <ArticlesProvider>

        <MatchesProvider>

          <SportsProvider>

            <TeamsProvider>

              <RouterProvider router={router} />

            </TeamsProvider>

          </SportsProvider>

        </MatchesProvider>

      </ArticlesProvider>

    </div>

  );

};

export default App;

 step 4-Translate Content:   I created translation files (en.json) for English and (es.json)                         Spanish languages. And stored the translation files in the appropriate directories                                     (locales/en/ for English and locales/es/ for Spanish).

                                

step 5-Using Translations:  Now, I accessed translations in your components using the useTranslation hook provided by react-i18next.

 

step 6-Switching Languages: Finally, I implemented or added a button to select the                               language between English and Spanish translations. And updated the state based on the                            selection . Besides created a function that calls by clicking or selecting the language

4)Setting up an automatic language detector and switch the locale according to it:

step 1-Import Language Detector: I imported the i18next-browser-languagedetector package in            your i18n.ts file.

step 2-Initialize Language Detector: Now, configured the language detector during i18n                        initialization.

step 3- Use useTranslation Hook: I  utilized the useTranslation hook to access translation functions and i18n instance.

step 4-Detect Current Language: I am using the i18n.language property to determine the current language, and you're storing it in the currentLanguage state.

step 5-Change Language: Now, I implemented a changeLanguage function that updates the                language using i18n.changeLanguage. This function is called when the user selects a different                language from dropdown menu items after clicking the button.

step 6-Language Selector: Next, I have created a language selector menu using the Menu component from Headless UI. Each language option triggers the changeLanguage function when clicked.

step 7-Translate Content:  Using the t function from useTranslation to translate content throughout your component, such as menu items and button labels.

step 8-Persisting Language Preference: Finally, persisting the selected language in the current language state, ensuring that the selected language remains active even after a page refresh.