DEV Community

Cover image for Building a Simple and Efficient Language Translator for Your Projects
Muhammad Aqib Bin Azam
Muhammad Aqib Bin Azam

Posted on

Building a Simple and Efficient Language Translator for Your Projects

Are you looking for a simple yet powerful tool to integrate seamless translations into your applications? Meet the Language Translator, a free and open-source solution that makes translating content across multiple languages effortless.

In this article, I’ll walk you through what this repository offers and how you can use it to enhance your projects.

Why I Built Language Translator

As a developer, I often encountered the need for a lightweight and straightforward translation solution that could be easily implemented into applications without bloating the codebase. Many translation libraries either lack flexibility or are too complex for simple use cases. That’s why I created this Language Translator—to bridge the gap and provide a tool that’s:

  • Free to use
  • Easy to integrate
  • Open for contributions

Features

Here’s what makes the Language Translator stand out:

  • Multiple Language Support: Easily translate content across multiple languages.
  • Lightweight and Efficient: Designed to integrate smoothly without adding unnecessary complexity.
  • Developer-Friendly: Clear documentation and an intuitive API for quick implementation.
  • Open Source: Contribute to its growth and help improve it for others.

How to Use Language Translator

To get started, follow these steps to install the necessary prerequisites and required Node.js modules.

Prerequisites

Ensure you have the following installed:

  • Node.js: @latest

Clone the Repository

First, clone the repository to your local machine.

git clone https://github.com/muhammada86/Language-Translator.git
Enter fullscreen mode Exit fullscreen mode

Install Dependencies

Once the cloning is complete, navigate to the repository directory and install the dependencies.

cd Language-Translator
npm install
Enter fullscreen mode Exit fullscreen mode

Configuration

After installing the dependencies, you need to set up the environment variables. Create a .env file by copying the provided .env.example file.

cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

Running the Application

Now you are ready to start the application.

npm start
Enter fullscreen mode Exit fullscreen mode

Instructions

Base Language

  • The base language for translation is English by default. The application translates the keyphrases from this base language to the provided target languages.
  • To change the base language, navigate to the src/index.js file.
  • Modify the const baseLanguage = 'en'; line to your desired language's short form code (e.g., 'es' for Spanish, 'fr' for French).
  • Save the changes, stop the server, and restart it for the changes to take effect.

Target Languages

  • The target languages for translation are specified in src/data/countries.json. This file contains an array of objects, each with a name and code representing a language.
  • You can edit this file to add or remove target languages as needed.

Translation Process

  • Place your base language JSON file containing the keyphrases you want to translate in the appropriate directory.
  • Start the application using npm start.
  • The tool will read your base language JSON file and use the Google Translate API to translate the keyphrases into all the specified target languages.
  • The translated JSON files will be generated in the output directory, each named according to the target language code.

Example

Suppose your base language JSON file (en.json) contains the following keyphrases:

{
  "greeting": {
    "default": "Hello",
    "formal": {
      "morning": {
        "office": "Good morning",
        "meeting": "Greetings"
      },
      "evening": {
        "dinner": "Good evening",
        "event": "Welcome"
      }
    },
    "informal": {
      "friends": {
        "close": "Hey",
        "casual": "Hi"
      },
      "family": {
        "parents": "Hello",
        "siblings": "Yo"
      }
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

With src/data/countries.json specifying Spanish (es) and French (fr) as target languages, the tool will generate two JSON files:

es.json:

{
  "greeting": {
    "default": "Hola",
    "formal": {
      "morning": {
        "office": "Buenos días",
        "meeting": "Saludos"
      },
      "evening": {
        "dinner": "Buenas noches",
        "event": "Bienvenido"
      }
    },
    "informal": {
      "friends": {
        "close": "Oye",
        "casual": "Hola"
      },
      "family": {
        "parents": "Hola",
        "siblings": "Qué tal"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

fr.json:

{
  "greeting": {
    "default": "Bonjour",
    "formal": {
      "morning": {
        "office": "Bonjour",
        "meeting": "Salutations"
      },
      "evening": {
        "dinner": "Bonsoir",
        "event": "Bienvenue"
      }
    },
    "informal": {
      "friends": {
        "close": "Hé",
        "casual": "Salut"
      },
      "family": {
        "parents": "Bonjour",
        "siblings": "Ça va"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Customization

You can customize the translation process further by modifying the source code in the src directory to suit your specific needs.

Summary

The Language-Translator tool simplifies the process of translating JSON files into multiple languages using Google Translate. By following the steps outlined above, you can quickly and easily generate translated JSON files for your project. If you encounter any issues or have questions, feel free to consult the documentation or open an issue on the repository.

Contribute to the Project

Language Translator is an open-source project, and I’d love for you to contribute! Whether it’s fixing bugs, adding new features, or improving documentation, your contributions are welcome.

Steps to Contribute

  • Fork the repository.
  • Create a new branch for your feature or bug fix.
  • Commit your changes and push them to your fork.
  • Submit a pull request.
  • Let’s make this tool better together!

Support the Project

If you find this repository useful, please consider starring it on GitHub. Your support helps the project grow and reach more developers.

⭐ Star the Repository

Final Thoughts

Language Translator is built with the goal of simplifying translations for developers and language enthusiasts alike. Whether you’re working on a personal project or a large-scale application, this tool can help you deliver content in multiple languages effortlessly.

Check out the repo, give it a try, and let me know your feedback. I’m excited to see what you build with it!

Happy coding! 😃

Visit the Language Translator GitHub Repo

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️