TypeSwitch

Inspiration

Being born in the US to a Spanish family, I used a lot of English and Spanish growing up. However, as I became more comfortable living in America, I began to use Spanish less and less and lost my fluency. It's a common story, and I've gotten much better at speaking and comprehension.

However, as it is not as common to write in Spanish as it is to speak, my writing proficiency is not up to where it could be. Other language learning apps focus primarily on translating individual words, which are okay in a vacuum. Still, you are most realistic to come across a word when it is used in a full sentence, so it would make sense to try any learn a language with full sentences in mind.

That is why I decided to focus on Translation API. Since I did not have much time to work on this project by the deadline, using one API also helped me focus on one goal to make sure was executed well.

What it does

How TypeSwitch works, is by first asking the user for two languages, the one they are comfortable with, and the one they want to learn.

Then, you need to enter some text, can be from a book, blog, article, forum, or even generated from an AI chatbot. The goal is have a large piece of text that is in your base language.

Once that text is submitted, TypeSwitch gets to work. Under the hood, it splits the text sentence by sentence. It is here that the user attempts to translate the sentence themselves. For each sentence translated by the user, TypeSwitch calls Translation API to translate the sentence as well.

First, TypeSwitch checks if the translation pairing is possible (ex: English -> Spanish)

    const canTranslate = await translation.canTranslate(languagePair); 
    let translator; 

    if (canTranslate !== 'no') {
        if (canTranslate === 'readily') {
            translator = await translation.createTranslator(languagePair);
        }
    }
    else {
        console.log("Translator cannot be used");
        return;
    }

If the pairing is possible, the translator is called on each sentence

let currentTranslation = await translator.translate(sentences[index]); // Grab the translation from Translation API

Finally, the results page displays both the score and all the translations made. The score is meant to give a general idea of how well the user did compared to Translation API. The key data, is in how well the user did word-for-word against the API. It is here that the user can see exactly how well they did.

How I built it

I used HTML, CSS, and JS to create the whole website. JS is where I connected the website to Translation API.

Before, I primarily used JS to handle animations, so it was great to experience working with APIs. It gave me motivation to learn more about JS and backend programming with my websites.

I also deployed the website with Cloudflare Pages since it is a static website that only requires the user to have Translation API on their Chrome browser. This makes it easy to get other people to check out TypeSwitch for themselves.

Challenges I ran into

A challenge I ran into was working with translating large body of texts. In the beginning stages of the project, I initially had Translation API translate the whole body of text. This led to TypeSwitch taking a noticeably long time to translate the text.

So, I thought of translating the sentences individually. This still worked and was perhaps even better for the user. Now, they were translating more digestible pieces of text in a more "game-like" format. And, when it came to the results page, they could easily compare their translations, as opposed to being lost trying to compare large pieces of text with each other.

Accomplishments that I'm proud of

I am really proud of myself for entering my first hackathon. I was not afraid of having only a few days to work on it, but embraced it and chose one API. This led to me having one concrete idea to focus on and solely working to execute it well.

I am really happy with the final result, so much that I will be working on it beyond the deadline of this hackathon.

What I learned

I learned about how to use and query APIs like this in JS. It opened my eyes to think about of what is possible with my websites. I am definitely breaking out of primarily focusing on frontend.

What's next for TypeSwitch

There are so many ideas that I have for TypeSwitch that I want to and will be implementing in the future:

1. Create a backend to house user data and authentication. I want people to come back to TypeSwitch and use it like a language learning application. I want them to have a history of their translations, and a record of how well they've progressed. I've used Firebase in the past for an Android project, so I may revisit it again.
2. Create a complementary extension. In addition to adding text manually on the website, another great way for people to have a vault of text, is to naturally add to it as they are using their internet. If they come across an interesting post online, they can simply click on the extension, and with one click, vault that post to translate when they visit TypeSwitch in the future.
3. Have a daily sentence! I think a great way to bring in daily users, is to have a daily sentence that is unique each day for the user to try and translate themselves. Kind of like how Wordle has a daily word people try to guess.
4. Improve the UI/UX. What got me into web dev was seeing amazing experiences people have been able to create in the form of websites. I want to revisit the UI/UX of TypeSwitch to make it a more eye-catching site and to make it stand out.

Built With

• cloudflare
• css
• html
• javascript
• translationapi