Language Translator using React

Translator is a web application software tool that facilitate the translation of text from one language to another language using ReactJS. This application allows users to give input Text and select input and output language Format from the list of languages and uses Microsoft Translator API. Users can also reverse the source and target languages and clear the input text. The component provides a user-friendly interface for language translation, with dynamic updates and error handling. This application is implemented using ReactJS and has a simple and responsive UI.

Lets have a quick look at what the final application will look like:

Approach/Functionalities:

This project basically implements functional components and manages states. This application uses the Microsoft Translator API for language translation, making POST requests with the input text and language preferences. Upon receiving the response, the translated text is updated in the component's state, and loading spinners are displayed during the API call. The component's interface allows users to select languages, input text, translate, and reverse language selection. If API call is rejected then it shows an error message during translation.

Steps to create the application:

Step 1: Set up React project using the command

npm create vite@latest react-app

Step 2: Navigate to the project folder using

cd react-app

Step 3: Create a folder “components” and add three new files in it and name them as Translator.js, language.json and Translator.css.

Folder Structure:

The updated dependencies in package.json will look like this:

 "dependencies": {
 "react": "^19.1.0",
 "react-dom": "^19.1.0"
 },
 "devDependencies": {
 "@vitejs/plugin-react": "^4.6.0",
 "vite": "^7.0.4"
}

Example: Write the below code in App.js file in the src directory.

Steps to run the application:

• Type the following command in terminal.

npm run dev

• Type the following URL in the browser:

 http://localhost:5173/

Output: