This project is about building a web application to translate languages using language translator API.

Overview

Language Translator App

A web application to translate multiple languages


reactjs javascript html5 restAPI css3

Want to see live preview »


View DemoReport BugGetting StartedInstalling


This project is about building a web application to translate languages using language translator API from external services like Libre Translate. Here you will be able to translate between multiple languages and whenever you type something it will be automatically translated in the side panel. To use the app, choose the source language and target language from select options and then type anything in the text area and it will automatically translate it to the targeted language.

🚀 Features

  • Automatic translation of the text with debounce to save unnecessary network request
  • Work count on both sides of the text boxes
  • Copy to clipboard feature
  • Clear text from the textbox with one click
  • Responsive for all screen sizes

Language Translator App

translator


🚀 Features

  • Translate automatically without clicking on any button
  • Debounce is used to avoid sending unnecessary network requests
  • Copy to clipboard feature available
  • Word count feature available
  • Clear all text at one click feature available
  • Bubble animations
  • Cool and funky UI/UX design
  • Responsive for all screen sizes

Demo

translator-app.mp4

Getting Started

This project was built using React, Rest API, JavaScript and CSS. It is a web application and for running on your local environment you should follow these guidelines.

Prerequisites

  • NPM

Setup

The project repository can be found in GitHub link or just clone the project using this command.

Using HTTPS

# git clone  https://github.com/m-sehrawat/Translation-App.git
  • Open terminal on your workspace with
cd /home/workspace/Translation-App

Install

Install NPM

Check that you have node and npm installed

To check if you have Node.js installed, run this command in your terminal:

node -v

To confirm that you have npm installed you can run this command in your terminal:

npm -v

To install all the dependences of the project, run the following command:

npm install

To run the application, run the following command:

npm run dev

Tools used on this project

  • Visual Studio Code
  • Vite Js React Template

📬 Contact

If you want to contact me, you can reach me through below handles.

linkedin Twitter

© 2022 Mohit Sehrawat

Show your support

Give a ⭐️ if you like this project!

You might also like...

Firefox plugin to automatically translate ° Fahrenheit and size measurements into european units

Firefox plugin to automatically translate ° Fahrenheit and size measurements into european units

Eurofox 🇪🇺 🔥 🦊 Firefox plugin to automatically translate ° Fahrenheit, weights, speed and size measurements into european units. To see the origin

Oct 16, 2022

i18n-language.js is Simple i18n language with Vanilla Javascript

i18n-language.js i18n-language.js is Simple i18n language with Vanilla Javascript Write by Hyun SHIN Demo Page: http://i18n-language.s3-website.ap-nor

Jul 12, 2022

When a person that doesn't know how to create a programming language tries to create a programming language

When a person that doesn't know how to create a programming language tries to create a programming language

Kochanowski Online Spróbuj Kochanowskiego bez konfiguracji projektu! https://mmusielik.xyz/projects/kochanowski Instalacja Stwórz nowy projekt przez n

Dec 4, 2022

Write "hello world" in your native language, code "hello world" in your favorite programming language!

Hello World, All languages! 🌎 📌 Write "hello world" in your native language, code "hello world" in your favorite language! #hacktoberfest2022 How to

Dec 13, 2022

A web component that allows you to run high level programming languages on your websites (static websites included!)

Code-Runner-Web-Component A web component that allows you to run high level programming languages on your website via the public Piston API Show your

Dec 16, 2022

This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

Capstone M2: Music App This project is a Web application based on the music API Napster built with ES6, HTML and CSS and it is a SPA. This API provide

Aug 29, 2022

JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

Jan 5, 2023

Create your frontend website in multiple languages by using this class.

Javascript Langauge Selector Create your frontend website in multiple languages by using this class. Features Simple but yet powerful. Enable RTL auto

Dec 14, 2022

The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API, showing data about Italian foods and we used Used involvement API to record the different user interactions (likes, comments).

taste-food The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API TheMealDB, showing

Aug 10, 2022
Owner
Mohit Sehrawat
Instructional Associate at Masai School | MERN Developer | React JS | JavaScript | NodeJS | Express | MongoDB
Mohit Sehrawat
A Web page translator based on Bing API.

BingWebPageTranslator A Web page translator based on Bing API. Screenshot: before: after: JS The js code is copied from Firefox translate extension. T

xxycode 10 Oct 18, 2022
Zotero translator 优化

1. Zotero translators 中文维护小组-开智分组 2. 背景 响应阳老师剥削机器而非剥削人,为国内优质信息源新增translator,利用好工具提高效率 3. 安装 3.1. zotero安装 参考:Zotero(1):文献管理软件Zotero基础及进阶示范 - 阳志平的网志 3.

氦客船长 56 Dec 24, 2022
Translate text in images using Vision API, Translation API and Jimp

translate-image-text Translate text in images using Vision API, Translation API Rendered using React and canvas Installation Create a Google Cloud pro

Huy Le 4 Oct 26, 2022
Translate text in images using Vision API, Translation API and React with Canvas

manga-translator Manga translator app using Vision API, Translation API Rendered using React and canvas Installation Create a Google Cloud project, en

Huy Le 4 Oct 26, 2022
This is a boilerplate for creating your own languages for various use cases. You can even create your own programming language from scratch!

Bootstrap compiler This is a bootstrap compiler that can be used to compile to compiler written in the target language. You can write a compiler in th

Kaan 3 Nov 14, 2022
This project is about building a web application to show a weather forecast using weather API.

Weather App Web application to show the current and upcoming week weather forecast. Want to see live preview » ✧ View Demo ✧ Report Bug ✧ Getting Star

Mohit Sehrawat 10 Dec 25, 2022
Leader Board is a simple project based on JavaScript programing language. The purpose of this project is to work with APIs and ASYNC & AWAIT methods. I have used vanilla JavaScript with web pack to implement this project

Leader Board - JavaScript Project Table of contents Overview The challenge Screenshot Links Project Setup commands My process Built with What I learne

Mahdi Rezaei 7 Oct 21, 2022
DatoCMS plugin: Translate fields

DatoCMS plugin: Translate fields This DatoCMS plugin gives you the ability to translate structured-text, string and text fields. This plugin is an add

De Voorhoede 4 Nov 8, 2022
Google translate dropdown customize with country flag

Flag google trasnalte demo without google bar and logo Screenshot How to use this 1. Create a country checklist containing languages from which you’ll

Devdreamsolution 28 Oct 11, 2022