https://github.com/rohancyberops/professional-translator
A beautiful, fully-featured web-based translator application built with React, TypeScript, and Tailwind CSS. This application provides instant text translation between multiple languages with advanced features like text-to-speech, translation history, and a modern, responsive design.
https://github.com/rohancyberops/professional-translator
javascript react tailwindcss translator typescript
Last synced: 12 months ago
JSON representation
A beautiful, fully-featured web-based translator application built with React, TypeScript, and Tailwind CSS. This application provides instant text translation between multiple languages with advanced features like text-to-speech, translation history, and a modern, responsive design.
- Host: GitHub
- URL: https://github.com/rohancyberops/professional-translator
- Owner: RohanCyberOps
- Created: 2025-06-25T04:28:11.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-25T04:52:00.000Z (12 months ago)
- Last Synced: 2025-06-25T05:29:43.982Z (12 months ago)
- Topics: javascript, react, tailwindcss, translator, typescript
- Language: TypeScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Professional Translator Web Application
A beautiful, fully-featured web-based translator application built with React, TypeScript, and Tailwind CSS. This application provides instant text translation between multiple languages with advanced features like text-to-speech, translation history, and a modern, responsive design.
## 🌟 Features
### Core Translation Features
- **Multi-language Support**: Translate between 20+ popular languages
- **Auto-detection**: Automatically detect the source language
- **Instant Translation**: Real-time translation using reliable translation APIs
- **Language Swapping**: Quickly swap source and target languages
### Advanced Features
- **Text-to-Speech**: Listen to both original and translated text
- **Copy to Clipboard**: One-click copying of translated text
- **Translation History**: Persistent local storage of translation history
- **Responsive Design**: Optimized for desktop, tablet, and mobile devices
### User Experience
- **Modern UI**: Clean, professional interface with smooth animations
- **Glass-morphism Design**: Beautiful backdrop blur effects and gradients
- **Toast Notifications**: Real-time feedback for user actions
- **Loading States**: Clear indicators during translation processes
- **Error Handling**: Graceful error handling with user-friendly messages
## 🚀 Getting Started
### Prerequisites
- Node.js (version 16 or higher)
- npm or yarn package manager
### Installation
1. Clone the repository:
```bash
git clone
cd professional-translator
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open your browser and navigate to `http://localhost:5173`
### Building for Production
```bash
npm run build
```
The built files will be available in the `dist` directory.
## 🏗️ Architecture
### Project Structure
```
src/
├── components/ # Reusable UI components
│ ├── LanguageSelector.tsx
│ ├── TextArea.tsx
│ ├── TranslationHistory.tsx
│ └── Toast.tsx
├── hooks/ # Custom React hooks
│ └── useTranslation.ts
├── services/ # Business logic and API calls
│ ├── translationService.ts
│ ├── speechService.ts
│ └── storageService.ts
├── types/ # TypeScript type definitions
│ └── translation.ts
├── data/ # Static data
│ └── languages.ts
└── App.tsx # Main application component
```
### Key Technologies
- **React 18**: Modern React with hooks and concurrent features
- **TypeScript**: Type-safe development with full IntelliSense
- **Tailwind CSS**: Utility-first CSS framework for rapid UI development
- **Vite**: Fast build tool and development server
- **Web APIs**: Speech Synthesis, Clipboard, and Local Storage
## 🔧 Services
### Translation Service
- Uses MyMemory Translation API for reliable translations
- Implements language detection heuristics
- Handles error cases and network failures
- Supports 20+ language pairs
### Speech Service
- Browser-native Speech Synthesis API
- Automatic voice selection based on language
- Customizable speech parameters (rate, pitch, volume)
- Cross-browser compatibility
### Storage Service
- Local storage-based persistence
- Translation history management
- Data serialization and error handling
- Automatic cleanup (50 translation limit)
## 🎨 Design System
### Color Palette
- **Primary**: Blue (#3B82F6) - Main actions and highlights
- **Secondary**: Purple (#8B5CF6) - Accent colors and gradients
- **Success**: Green (#10B981) - Success states and confirmations
- **Warning**: Yellow (#F59E0B) - Warning states and notifications
- **Error**: Red (#EF4444) - Error states and destructive actions
- **Neutral**: Gray scale for text and backgrounds
### Typography
- **Font Family**: System font stack for optimal readability
- **Hierarchy**: Clear distinction between headings and body text
- **Line Height**: 150% for body text, 120% for headings
- **Font Weights**: Regular (400), Medium (500), Semibold (600), Bold (700)
### Spacing System
- **Base Unit**: 8px spacing system for consistent layouts
- **Component Spacing**: Logical grouping with appropriate white space
- **Responsive Spacing**: Adaptive spacing for different screen sizes
## 📱 Responsive Design
### Breakpoints
- **Mobile**: < 768px - Single column layout, optimized touch targets
- **Tablet**: 768px - 1024px - Adaptive grid, touch-friendly interactions
- **Desktop**: > 1024px - Full feature layout with optimal spacing
### Mobile Optimizations
- Touch-friendly button sizes (minimum 44px)
- Optimized text input experiences
- Swipe-friendly history navigation
- Reduced animation complexity on mobile devices
## 🔒 Privacy & Security
### Data Handling
- **Local Storage Only**: All translation history stored locally
- **No User Tracking**: No analytics or tracking implementations
- **API Security**: Secure HTTPS requests to translation services
- **Input Sanitization**: Proper handling of user input
### Translation API
- Uses MyMemory's free translation service
- No API key required for basic usage
- Rate limiting handled gracefully
- Fallback error handling
## 🌐 Browser Support
### Supported Browsers
- **Chrome**: 88+ (full feature support)
- **Firefox**: 85+ (full feature support)
- **Safari**: 14+ (limited speech synthesis)
- **Edge**: 88+ (full feature support)
### Progressive Enhancement
- Core translation functionality works in all modern browsers
- Text-to-speech degrades gracefully in unsupported browsers
- Clipboard API with fallback selection methods
## 🚧 Future Enhancements
### Planned Features
- **Offline Mode**: Service worker for basic offline functionality
- **File Translation**: Support for document and image translation
- **Custom Dictionaries**: User-defined translation pairs
- **Export History**: Download translation history as JSON/CSV
- **Keyboard Shortcuts**: Power user keyboard navigation
### Technical Improvements
- **Performance**: Virtual scrolling for large translation histories
- **Accessibility**: Enhanced screen reader support and keyboard navigation
- **PWA**: Progressive Web App capabilities with app-like experience
- **Internationalization**: Multi-language interface support
## 📄 License
This project is open source and available under the MIT License.
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
### Development Guidelines
- Follow TypeScript best practices
- Maintain consistent code formatting
- Write meaningful commit messages
- Test new features thoroughly
- Update documentation as needed
## 📞 Support
For support, questions, or feature requests, please open an issue in the repository.
---
Built with ❤️ using React, TypeScript, and modern web technologies.