Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/m-sehrawat/translation-app

This project is about building a web application to translate languages using language translator API.
https://github.com/m-sehrawat/translation-app

css3 html5 javascript react rest-api

Last synced: about 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/m-sehrawat/translation-app
Owner: m-sehrawat
Created: 2022-05-04T11:52:52.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2022-07-04T04:04:13.000Z (over 2 years ago)
Last Synced: 2023-03-04T01:37:12.142Z (almost 2 years ago)
Topics: css3, html5, javascript, react, rest-api
Language: JavaScript
Homepage: https://mohit-translation-app.vercel.app/
Size: 210 KB
Stars: 15
Watchers: 1
Forks: 4
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

Language Translator App

A web application to translate multiple languages

Want to see live preview »

✧
View Demo ✧
Report Bug ✧
Getting Started ✧ Installing ✧

This project is about building a web application to translate languages using language translator API from external services like [Libre Translate](https://libretranslate.de/). 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.

![Language Translator App](https://user-images.githubusercontent.com/91532881/167111293-6b2214bb-2311-4bdf-82a5-aa684226f698.png)

![translator](https://user-images.githubusercontent.com/91532881/167111408-284281e9-ea23-4652-bb03-a47d69c752d9.png)

## 🚀 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

https://user-images.githubusercontent.com/91532881/167123447-6377c777-9d46-43c7-af0a-3dd97c362caf.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](https://github.com/m-sehrawat/Translation-App) 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](https://img.shields.io/badge/Mohit_Sehrawat-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/m-sehrawat/)
[![Twitter](https://img.shields.io/badge/Mohit_Sehrawat-20232A?style=for-the-badge&logo=Github&logoColor=white)](https://github.com/m-sehrawat/)

## Show your support

Give a ⭐️ if you like this project!