A sleek, dark-themed real-time text translator app powered by the MyMemory Translation API. This app supports translation across multiple languages with keyboard shortcuts and a modern UI, making it intuitive and accessible.
- Real-Time Translation: Translate text seamlessly between 10 languages.
- Neural Machine Translation: High-quality translation results powered by the MyMemory API.
- Intuitive Dark-Themed UI: Designed with Tailwind CSS for a polished user experience.
- Keyboard Shortcuts: Trigger translation instantly with
Ctrl/Cmd + Enter
.
Component | Function |
---|---|
TranslationBox |
Manages input/output text areas. |
LanguageSelector |
Dropdown for selecting languages. |
Hero |
Stylish landing header with a globe animation. |
Features |
Showcases app features in card format. |
This app is built with modern technologies for fast performance and a smooth user experience.
- Frontend: React + TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- API Requests: Axios
- Build Tool: Vite
- Enter Text: Type or paste text in the source language input box.
- Select Languages: Choose both source and target languages from the dropdown.
- Translate: Hit the "Translate" button or press
Ctrl/Cmd + Enter
for quick translation. - View Results: The translated text appears instantly in the output box.
- Node.js and npm installed.
- Clone the Repository:
git clone https://github.com/chriz-ty/Multilingual-Translator.git cd realtime-translator
- Install Dependencies:
npm install
- Run the App:
npm run dev
The app will be running locally at http://localhost:3000.
- Enter your text, choose languages, and translate with ease
- Use the keyboard shortcut (
Ctrl/Cmd + Enter
) to speed up translation
- React + TypeScript: Modern frontend with type safety
- Tailwind CSS: Responsive, clean styling
- Lucide React: Beautiful, customizable icons
- Axios: For making API requests to MyMemory Translation API
- Vite: Fast build and development setup
This project is licensed under the MIT License. See the LICENSE file for details.