Conversation Translator

Conversation Translator
User Input
Translated Text
Languages Supported

Inspiration

I have a roommate that only speaks Hindu and we face a language barrier when trying to communicate with each other. I wanted to set a challenge for myself by coming up with my own solution to the problem.

What it does

Voice translator that translates between 15 of the world's most popular languages! This can be very convenient when trying to communicate with someone who does not speak your language.

How it was built

This was a React component that uses the Microsoft Translator Text API in Microsoft Azure to translate spoken input in real time. The speech recognition feature was built using the Web Speech API. This was then deployed to Firebase for hosting and scalability.

Challenges encountered

I set myself the challenge of creating a solution to a real-world problem using React for the very first time during this hackathon. I faced many challenges in creating this project: There was an issue with the correct native speaker speaking a said language due to how the Web Speech API only supported specific languages depending on the user's web browser. Another challenge was originally attempting to get the translated text to display in the text box of the UI and then clear whenever the Input button was clicked again. Another challenge was trying to make this a responsive web page to improve the user experience.

Accomplishments

I barely knew much of frontend development apart from basic html/css prior to this hackathon. I challenged myself to create a solution for a problem that I was encountered and made a solution from scratch! Now I have created an app that could potentially help a lot of people beat language barriers and be able to make more connections with people!