🚀 Migrated from Android app to web app for better cross-platform accessibility
A modern, responsive web application built with Next.js that provides real-time language translation with voice input/output capabilities using multiple translation APIs. Originally developed as an Android application, SpeakSwap has been migrated to the web to provide universal access across all devices and platforms.
- 🌐 Real-time Translation: Instant text translation between multiple languages
- 🎤 Voice Input: Speech-to-text functionality with microphone support
- 🔊 Voice Output: Text-to-speech for hearing translations in target language
- 🎨 Modern UI: Beautiful interface built with Tailwind CSS and shadcn/ui components
- ✨ Smooth Animations: Powered by Framer Motion for delightful user interactions
- 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile devices
- 🔄 Language Swap: Quick swap between source and target languages
- ⚡ Fast Performance: Optimized with Next.js 15+ App Router
- 🛡️ Error Handling: Robust error handling with user-friendly feedback
- 🔧 TypeScript: Full type safety throughout the application
- 🌍 Multiple APIs: Uses MyMemory, LibreTranslate, and Lingva for reliable translation
- 🔄 Cross-Platform: Migrated from Android to web for universal accessibility
Major Bug Fixes & Enhancements:
- 🎤 Enhanced Speech Detection: Improved accuracy with interim results, better error handling, and microphone permission checks
- 🌐 Better Translation Accuracy: Added caching, Google Translate fallback, and enhanced API error handling
- 🔍 Auto Language Detection: Intelligent language detection with pattern-based fallbacks
- 🔊 Improved Voice Synthesis: Language-specific voice selection and optimized speech parameters
- ⚡ Backend Optimization: In-memory caching, comprehensive language support (70+ languages), and performance improvements
- 🛠️ Enhanced Error Handling: User-friendly error messages and robust fallback mechanisms
This mini project was developed as part of our college coursework by:
- Abdulla Sajad - @abdullasajad
- Adwaith PC
- Jishnu MR
- Harikrishnan K
- Framework: Next.js 15.5.3 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui + Radix UI
- Animations: Framer Motion
- Icons: Lucide React
- Translation APIs: MyMemory, LibreTranslate, Lingva Translate
- Voice Features: Web Speech API
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone https://github.com/abdullasajad/speakswap.git
cd speakswap- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
- Select Languages: Choose source and target languages from the dropdowns
- Input Text:
- Type directly in the text area, OR
- Click 🎤 microphone button to speak (requires microphone permission)
- Get Translation: See real-time translation appear automatically
- Listen: Click 🔊 speaker button to hear the translation pronounced
- Copy: Click 📋 to copy text to clipboard
- Swap: Click
↔️ to instantly swap source and target languages
- Supports 60+ languages
- Requires microphone permissions
- Works on HTTPS or localhost
- Real-time speech-to-text conversion
- Natural voice synthesis
- Language-specific pronunciation
- Adjustable speech rate and pitch
- Cross-browser compatibility
- Best Experience: Chrome, Edge (full voice features)
- Good Support: Safari (voice features work)
- Limited Support: Firefox (translation works, limited voice features)
The app uses multiple translation services for reliability:
- MyMemory API (Primary) - Free, reliable translation service
- LibreTranslate (Backup) - Open-source translation
- Lingva Translate (Tertiary) - Google Translate alternative
No API keys required - all services are free to use.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
speakswap/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ ├── languages/ # Language list endpoint
│ │ └── translate/ # Translation endpoint
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main page component
├── components/ # Reusable components
│ └── ui/ # shadcn/ui components
├── lib/ # Utility functions
└── public/ # Static assets
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy with zero configuration
The app can be deployed to any platform that supports Next.js:
- Netlify
- Railway
- Heroku
- AWS
- DigitalOcean
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Commit your changes:
git commit -am 'Add feature' - Push to the branch:
git push origin feature-name - Submit a pull request
This project is licensed under the ISC License.
Speech Recognition Issues:
- Network Error: Check your internet connection and try again
- Not Allowed: Allow microphone permissions in your browser
- No Speech: Speak clearly and try again
- Audio Capture: Check if your microphone is connected and working
- Service Not Allowed: Try refreshing the page or use a different browser
Text-to-Speech Issues:
- Ensure your browser supports Web Speech API (Chrome, Edge, Safari)
- Check if your system volume is turned up
- Try a different language if the current one doesn't work
If you see "Translation services are currently unavailable":
- Check your internet connection
- Try refreshing the page
- The app tries multiple translation services automatically
- Some services may be temporarily down
Recommended Browsers:
- Chrome 25+ (best support)
- Edge 79+
- Safari 14.1+
- Firefox 62+ (limited voice support)
Requirements for Voice Features:
- HTTPS connection (or localhost for development)
- Microphone permissions granted
- Modern browser with Web Speech API support
- App not loading: Clear browser cache and refresh
- Styles not applying: Ensure Tailwind CSS is properly loaded
- Voice buttons not appearing: Check browser compatibility and permissions
- Translation delays: Normal for first translation, subsequent ones are faster
SpeakSwap was originally developed as an Android application but has been successfully migrated to a web application to provide:
- Universal Access: Works on any device with a web browser
- No Installation Required: Instant access without app store downloads
- Cross-Platform Compatibility: Supports Windows, macOS, Linux, iOS, and Android
- Real-time Updates: Instant feature updates without app store approval
- Better Accessibility: Enhanced accessibility features for all users
- Improved Performance: Leverages modern web technologies for optimal performance
The migration maintains all core functionality while adding new web-specific features like clipboard integration and enhanced keyboard shortcuts.
SpeakSwap is a college mini project that demonstrates modern web development practices and real-world application of voice translation technology. This project showcases the collaborative effort of our team in creating a practical solution for language barriers.
Academic Context: Developed as part of our computer science curriculum to explore web technologies, API integration, and user interface design.
- MyMemory API for reliable translation service
- LibreTranslate for providing free translation API
- Lingva Translate for additional translation support
- shadcn/ui for beautiful UI components
- Tailwind CSS for utility-first styling
- Framer Motion for smooth animations
- Web Speech API for voice features
- Our college faculty for guidance and support throughout the development process