https://github.com/muzabol2/translator
Some-like google translator :)
https://github.com/muzabol2/translator
cypress cypress-tests react styled-components typescript vite youtube-tutorial
Last synced: 2 months ago
JSON representation
Some-like google translator :)
- Host: GitHub
- URL: https://github.com/muzabol2/translator
- Owner: muzabol2
- Created: 2023-04-24T15:48:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-06T15:13:49.000Z (over 2 years ago)
- Last Synced: 2025-01-08T21:16:44.271Z (about 1 year ago)
- Topics: cypress, cypress-tests, react, styled-components, typescript, vite, youtube-tutorial
- Language: TypeScript
- Homepage:
- Size: 505 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# translator
Translator is a small frontend application for the [LibreTranslate API](https://libretranslate.com/docs/) made from youtube tutorial for educational purposes only.
## Technologies
* Set up the app with [Vite](https://vitejs.dev/) (before mostly use [Create React App](https://create-react-app.dev/))
* [TypeScript](https://www.typescriptlang.org/)
* libraries:
* [React](https://legacy.reactjs.org/)
* [use-debounce](https://www.npmjs.com/package/use-debounce)
* [styled-components](https://styled-components.com/)
* test libraries:
* [react-testing-library](https://testing-library.com/docs/react-testing-library/intro/)
* [jest](https://jestjs.io/docs/tutorial-react)
* [vitest](https://vitest.dev/guide/)
* [cypress](https://www.cypress.io/)
## Setup
To use LibreTranslate API you need to pay but you can run it locally and then it is free. [Here](https://github.com/muzabol2/translator/blob/main/src/lib/config/config.ts#L6) is a config line that you can change.
To run the api locally you need to download an image [libretranslate/libretranslate](https://hub.docker.com/r/libretranslate/libretranslate) and run it in a docker container. Do that:
1. Make sure you have [Docker](https://www.docker.com/products/docker-desktop/) installed on your machine.
2. In a `docker-compose.yml` file of the project choose languages you want to have:
```yaml
version: "3"
services:
translator:
image: libretranslate/libretranslate
restart: always
ports:
- 3001:5000
environment:
LT_LOAD_ONLY: "zh,de,pl,en,es" // here change
```
3. In a terminal navigate to the root directory of your project where the `docker-compose.yml` file is located and run the command:
```bash
docker-compose up
```
4. Once the container is up and running, your frontend translate app can communicate with it. You can check if api works by opening your web browser and navigating to `http://localhost:3001`.
## Inspiration
[Jacek Pudysz](https://github.com/jpudysz) - this repo is just a result of watching his tutorial on [YouTube](https://www.youtube.com/playlist?list=PLe9Nvh2XoKC0TPd5I5WMHtFsOTW1IGPy-). I just added a few little changes myself. The course helped me a lot to organize my knowledge. I also caught some good practices. Thank you. You are the best!