This project is a Translator App that receives input text from a user and translate it from/to the selected languages using public Google Translate API.

---

Overview of the App

Image of the Main Screen

---

Features

State Management with Redux

Fake API for supported languages

The response from the GET request for supported languages was always the same, then I saved the JSON a deployed a FAKE API so the rendering could be faster.

Fake API For Supported Languages

Google Cloud Platform

1. Activate API

2. Install Google CLI to set up Application Default Credentials

3. Create credential file on terminal: gcloud auth application-default login

4. Import 'Translate' and 'TranslationServiceClient' from the '@google-cloud/translate' library

5. Create a translate object

   const CREDENTIALS = JSON.parse(process.env.CREDENTIALS)
   const translate = new Translate({
       credentials: CREDENTIALS,
       projectId: CREDENTIALS.project_id
   });

6. Translate a text

   const translateText = async (text, code) => {
     try {
         let [response] = await translate.translate(text, code);
         return response;
     } catch (error) {
         console.log(`Error at translateText --> ${error}`);
         return 0;
     }
   };

7. Get supported languages

   const supportedLanguages = async() => {
     const client = new TranslationServiceClient();
     const parent = `projects/${CREDENTIALS.project_id}/locations/global`
     const [response] = await client.getSupportedLanguages({ parent });
     const languages = response.languages.map(({languageCode})=> (
       { code: languageCode, language: iso.getName(languageCode)}))
     return languages;
   }

Simple and maintainable code

    import { useSelector } from "react-redux";
    import { Arrows, TextBox, Modal } from "./components";


    const App = () => {
      const modal = useSelector(state => state.user.modal)
      return (
        <div className="app">
          {!modal && (
            <>
            <TextBox style='input'/>
              <Arrows />
            <TextBox style='output'/>
            </>
            )}
          {modal &&<Modal/>}
        </div>
      );
    }

    export default App;

---

Install dependencies and run project

cd client
npm install
npm start

 cd server
 npm install
 npm run dev