Retranslate text with Google Translation and Amazon Translate.
- Translate text with Google Translation API and Amazon Translate API.
- Translate translated text again.
Select a source language and enter text, and this app will translate them after a while.
- TypeScript, Node.js
- React, Next.js
- gRPC WEB
- macOS 10.15.5
- Node.js v14.15.3, npm 6.14.9
We tested in the above environment.
$ npm installSet environment variables. For details, to see .env.example.
| Command | details |
|---|---|
| dev | Run on development mode |
| build | Build app for production |
| start | Run on production mode |
| type-check | tsc checks .ts types |
| format | Format codes |
| lint | Lint codes |
| test | Run lint, type-check, test-snap, and tests |
| test-snap | Update jest snapshots |
- This app is constructed on Next.js.
- Use Translation gRPC API to translate text.
.
|-- .env.local <-- Environment variables on local
|-- .github <-- Deployment GitHub action
|-- README.next.md <-- Next.js readme
|
|-- api <-- API classes
| `-- translator.ts
|
|-- components <-- React components
| |-- github-corner.tsx <-- Google Analytics Tag
| |-- google-analytics.tsx <-- GitHub corner icon
| |-- lang-select.tsx <-- Language selection dropdown
| |-- service-image.tsx <-- Translation service image
| `-- text-box.tsx <-- Text box
|
|-- grpc <-- Auto generated gRPC classes
|-- next-env.d.ts <-- Ensuring Next.js types for TypeScript
|-- pages <-- Next.js pages
| |-- _app.tsx
| `-- index.tsx <-- Home page
|
|-- public <-- Logo images
| |-- favicon.png
| |-- logo-aws.png
| `-- logo-google.png
|
|-- scripts
| `-- proto <-- Script to generate gRPC classes with .proto
|
|-- static.json <-- heroku-buildpack-static config to deploy to Heroku
|
`-- test <-- jest tests filesThis app uses Translation gRPC API and needs JavaScript codes generated by proto definitions. Generate codes by the below commands:
$ ./scripts/proto /Somewhere/api/protosIssues and reviews are welcome. Don't hesitate to create issues and PR.
© 2021 takakd