Multiple translations with better audio.
What is 3Peat
3Peat.io is a progressive web app built for a better translation experience. Switching between inputting text from multiple languages is tedious on other products. 3Peat also provides a more visual experience, with regional content from Adobe Stock and higher quality text-to-speech audio for French, Italian, and Spanish using the IBM Watson Text-to-Speech API.
This is more of an exploratory project rooted in the goal of building a solution to a very specific problem and learning technical skills. It was not intended to be a mainstream use case, but rather a step towards acquiring knowledge for creating additional products.
In the spring of 2017, my girlfriend Alina and I were preparing for a trip to Europe, specifically France, Italy, and Spain.
Recently, I had started learning Italian, but also remembered a decent amount of Spanish from college. Alina knew some French and we often found ourselves wondering what certain words meant in all three of these languages.
I’d look something up in Italian, then we’d switch to French, and I’d often then check Spanish to see any similarities. The Google Translate interaction felt tedious for switching back-and-forth between inputting from other languages. I just wanted see all the languages displayed and be able to immediately start typing in any of those languages without having to click any kind of switch or revert button.
Also, some of the voices, particularly in Spanish had poor audio quality, like a tiny human-robot-hybrid was actually trapped inside the computer. It didn’t sound like a person.
- Switching between language inputs on Google Translate is tedious.
- There are no other high quality options for multiple translation experiences.
- Many of the Google Translate voice pronunciations have low quality and unnatural sound.
- Saving translations on Google Translate only supports two languages.
- Demonstrate a unique implementation of the Adobe Stock API.
- Learn about microservices with Firebase Functions.
- Learn to build something with user accounts (Authentication with Google, Twitter, etc.).
- Learn the Google Translate, IBM Watson, and Stripe APIs.
- Learn how to build a progressive web app.
My initial research lead me to discovering a website called Translatr, which has similar functionality and actually provides the ability to select from many more languages.
NiceTranslator was also a product with similar features, but it fell considerably short of what I considered to be a powerful and beautiful experience.
Both of these interfaces felt uninspired. They also lacked voice functionality. One of the biggest motivations for this project was to provide an experience with great audio for the beautiful French, Italian, and Spanish languages.
Unfortunately, the IBM Watson Text-to-Speech functionality on 3Peat only works in Chrome and Firefox. Safari is not supported.
Travel and Imagery
Learning a new language, or at least, learning some words from a new language is often rooted in the desire to visit a country where that language is spoken. For Alina and myself, travel was ultimately the reason for wanting to expand our knowledge of French, Italian, and Spanish.
Travel is exciting. It's something that we visualize in our brains. It's also something that we visualize on the web. Pictures of our upcoming destination give us this excitement but also provide us with ideas about where we'd like to go. The use of Adobe Stock imagery was an opportunity to provide these visuals based on the language being translated.
It should be noted that the use of images from 3Peat on mobile is not ideal. Mobile users need to preserve their data usage and in reality, often need offline functionality, which is where Google Translate excels. This project was focused on providing a strong desktop experience.
3Peat was a top 10 product of the day on Product Hunt. It was launched in July of 2017. The numbers are nothing spectacular, but it has been used by thousands of people in many countries throughout the world, which is pretty cool.
According to Google Analytics, the bounce rate has been 0.24% and the average time spent on the site (session duration) is nearly three minutes.