Categories: Projects

Web Based Universal Language Translator, Voice/Text Messaging App

Notice: This PoC Project is Outdated and haven’t been updated for a long time.

Today, I am happy to introduce you, my beloved readers, to one of my new projects, a universal Language Translator voice/text-messaging chat system. It’s still in barely a prototype implementation. But I hope you can experience the idea I am trying to achieve here. Though I have several more works to do in the coming days, I will request you to check this and let me know what you think if something can be done better. Which will be super helpful for me.

Background:

I live in Montreal, Quebec, where French is the official/major spoken language. Very often, I encounter people who only speak French (no English). I also tried to learn French (I know a few words/sentences 😀 ), but it seems difficult to achieve in a short time with my tight schedule (besides study and work). I just wish there were a convenient way to talk to people speaking different languages, at least on mobile/remote communication.

A few days ago, I participated in a virtual hackathon arranged by koding.com. There were a couple of themes, and I selected the one I felt I was most interested in—guess what? ‘Challenges associated with real-time communication and translation. And there, the journey of this app starts!

I had a final exam just 2/3 days after the hackathon, so it was a tough decision to make whether to participate in the competition or not. But I decided to participate finally.(The exam wasn’t bad too 🙂 )

A Very Brief Overview Of this Universal Language Translator:

ULTraChat is a web-based real-time communication system, which allows you to communicate with people, who don’t speak/understand your language.

You can text chat with anyone in the group chat room, all theirs message will be shown in your own preferred language and yours to them as their preferred language. If multiple persons message you in different languages, you will see all of them in your native(which you can select from top left select box) language! The translation service are served by Yandex API, which supports a wide area of languages.

You can also communicate to other people(speaking different language) via voice as well. This is available in private chat system only. You can speak your own language, that will be recognized and played to your chat partner as robotic voice in his preferred language.

So, as you can see, it’s acting as a real-time language translator right in your chat app.

(Works Only On Google Chrome!)

Result/Feedback I Received:

There were, in total, more than five hundred projects submitted in the competition. Projects were judged in three different rounds. I am happy to say that it made its way to the final 100 projects! It was a great achievement for me, given that I didn’t expect it to score at all as we weren’t able to invest much time, and we didn’t have a decent user experience designer to make it look elegant. It was in a very childish/amateur structure.

Also, on the koding.com site’s hackathon discussion channel, I received many positive comments, which were very inspirational. Thus, I decided to make some more improvements before I shared it on my blog.

Improvements Made Since Then:

The major need was that the free chat API I was using at that time allowed at most five concurrent connections. I didn’t like this and wanted to overcome this barrier. Thus, I created a very basic chat server with socket.io and integrated with it instead of that third-party one.

I also converted the jQuery codes to AngularJS to improve the structure and made some tweaks to the UI.

Limitations:

There are currently several limitations to this app. Some of them are as follows:

  • Works On Google Chrome Only: The web speech technology is currently working on Google Chrome browser and partially on Apple Safari. So, I haven’t spent time on cross-browser compatibility yet, and you should only expect to work this on the Google Chrome browser.
  • Browser Permission: You might need to allow microphone permission every time you want to send a voice message.

Current Technology Stack:

Your Contribution:

I would really appreciate it if you could check out this app and give me suggestions/feedback about this application. If you are having any trouble/issues with the application, please report it on ultrachat Github issues.

Also, if you have already checked the app, you can help by simply answering the questions on this form: http://goo.gl/Ce0N8k

You can also contribute by code, especially if you have very good front-end skills. I am not a highly expert front-end developer, so it’s kind of basic and has a lot of scope for improvements. Just create a ticket on GitHub, and I will help you with any questions or concerns.

The HTML5 web-speech API is also directly used in this application, and thus, contributing to that library would directly help this app, too!

Final Words:

Just a heads up, I will also occasionally be online using this app. If you have any questions about anything on this site, you can get in touch with me through this app! Keep in touch!

Rana Ahsan

Rana Ahsan is a seasoned software engineer and technology leader specialized in distributed systems and software architecture. With a Master’s in Software Engineering from Concordia University, his experience spans leading scalable architecture at Coursera and TopHat, contributing to open-source projects. This blog, CodeSamplez.com, showcases his passion for sharing practical insights on programming and distributed systems concepts and help educate others. Github | X | LinkedIn

Recent Posts

Advanced Service Worker Features: Push Beyond the Basics

Unlock the full potential of service workers with advanced features like push notifications, background sync, and performance optimization techniques that transform your web app into…

2 days ago

Service Workers in React: Framework Integration Guide

Learn how to integrate service workers in React, Next.js, Vue, and Angular with practical code examples and production-ready implementations for modern web applications.

2 weeks ago

Service Worker Caching Strategies: Performance & Offline Apps

Master the essential service worker caching strategies that transform web performance. Learn Cache-First, Network-First, and Stale-While-Revalidate patterns with practical examples that'll make your apps blazingly…

3 weeks ago

This website uses cookies.