My Discord username is "LeonZaLion#3019"

Prior Work

I started writing code for Traduit around 2 weeks ago (when I came up with the idea), but it was one of the side projects that didn't receive much focus. I only wrote a jQuery web scraping tool to scrape the translation off of WordReference (but ended up deleting everything and rewriting it in a more neat + efficient manner during the hackathon) and wrote a bit of Google Chrome extension code (that ended up being heavily modified). In other words, the extension wasn't really functional because there was no integration with Anki, only the orange button that didn't do anything when pressed. I wouldn't say that it was the prior code that gave me an advantage (because there wasn't much), but rather learning about it beforehand helped me get started more quickly (which I believe is consistent with the rules). The vast majority of the coding work was done during the hackathon, including the popup view, backend (including accounts & MongoDB), integration with Anki, the idea for a Group feature, and a new jQuery scraper (in other words, basically the whole project :D)

Please let me know if you have any other questions about prior work!

Inspiration

As someone obsessed with efficiency, it frustrates me when I am unable to recall a translation that I'm aware of knowing at one or more times in the past. I'm always looking at the long-term effects: will it really benefit me to translate words for knowledge in the moment only to forget them in the future?

I would argue that it isn't worth it to do so, because vocabulary is a central part of learning a new language that can't rely on one using translation dictionaries/software when they need to. As well, in certain settings, such as in academic contexts, not memorizing vocabulary effectively makes it difficult to succeed, especially since you often aren't allowed to use translation tools.

One (inefficient) solution would be to memorize an entire dictionary. However, this wastes a lot of time and effort, as the majority of the words would rarely be used as they demand the same attention as more common words that they should prioritize.

It's easy to identify which words are of value: simply the words of which you find yourself needing to know the translation! However, you must also be able to memorize these words efficiently and effectively, so that you can recall its translation the next time you need to use it and spend the minimal amount of time memorizing. Sure, you could write down a giant list of words that you've translated and test yourself daily, but it isn't an efficient method because you are devoting your attention to each word equally when it would be more efficient to split the focus so that you study the words that you struggle with more often.

Luckily, a solution to this issue is with flashcards, where you can place each translation on a separate flashcard and categorize the flashcards based on proficiency with the word. You could study the words you struggle with more often, the words that you're ok with less often, and the words that you're fluent with every once in a while.

In fact, there exists a term for this study strategy: spaced repetition. In fact, studies have shows that this method is one of the most effective ways to memorize things. Combined with flashcards, you also make it easier to memorize by associating each translation with a cue. In this case, the cue would be the word you wish to translate (in English or French/other language) and its use case (e.g. to build (building) -> b√Ętir). As such, whenever you encounter this cue in regular usage (e.g. how do I say to build like when you build a building?), you are able to quickly recall the translation because of the similar manner in which you studied the translations.

Luckily for us, there already exists a SRS (spaced repetition software) that uses flashcards and is available on the web, as a desktop app, on iOS and on Android. Anki has been the go-to tool for many when it comes to memorizing facts that fit well with flashcard format. However, adding cards to Anki requires you to type in the translations each time, which generates a lot of friction between you and putting in the effort to add a card for every translation you deem worth keeping. This is why I created Traduit.

What it does

Traduit makes it easy to add translations to Anki because it allows you to easily choose certain translations to add when you've translated a word on a website. Traduit is a Google Chrome extension that adds a small, unobtrusive button to the side of a translation (currently only supports WordReference, but I'm looking to integrate it with other online translation dictionaries in the future). When this button is pressed, Traduit automatically adds this translation with the necessary context (e.g. noun genders, use case, etc.) into your Anki deck. This way, you are able to add words without needing to manually insert them, as well as selecting which contexts you'd like to memorize instead of memorizing every use case for a word.

How I built it

The technologies I've used included the Chrome Extension Developer API, Node.js and MongoDB for the backend, and I also challenged myself to learn Bootstrap (which I have no prior experience with) to create the view for the extension. To integrate my app with Anki, I used AnkiConnect, a RESTful API that allows you to communicate with a local server that starts whenever Anki is opened.

MongoDB Atlas

The core functionality of Traduit doesn't need an online database as it sychronizes with your Anki deck. However, I wanted to evolve Traduit from just being a one-person thing and allow multiple people to study languages efficiently together. We only add vocabulary when we encounter them, but the vocabulary that only we encounter is most likely not enough. When you speak with your friends, your friends are bound to use vocabulary that you may not have heard of. As follows, Traduit allows you to synchronize your word banks with friends for greater learning and higher ease-of-communication with one another in the language you wish to learn. When you add a word to your Anki database, the generate flashcard is uploaded to MongoDB Altas for your group, which becomes accessible to all members in your group. The group members can scroll through a list of vocabulary terms and decide if they wish to add the word to their Anki database. Thanks to MongoDB, this feature in Traduit can greatly increase your exposure to useful and common words that your friends may have encountered before you have.

Domain.com

A polyglot is defined as somebody who knows a lot of languages. Some people also use "polyglottic," which is perfect because "tic" sounds like "tech" which allows me to incorporate it into a memorable domain name. However, Traduit isn't just for aspiring polyglots, but for hyperpolyglots, people who know six or more languages, or for (what I term) ultrapolyglots, those who are able to learn a language extremely quickly (as a combination of ultralearning + polyglot). These people recognize the value of efficient learning techniques to be able to master a rich set of vocabulary in many languages, and Traduit can definitely help them, whether they're an aspiring ultrapolyglot looking to quickly master another language, or a hyperpolyglot working on their seventh language.

As such, I registered two domain names for Traduit:

Both of which seek to convey the idea of technology being a great aid to learning languages in an efficient and effective manner.

Solo

This is the first hackathon where I created a project entirely on my own, from the idea to the final product. It was definitely a new experience, especially since I had the new job of keeping myself accountable (whereas with a team you are kept accountable by not letting them down). When I'm on a team, I'm often supportive of the ideas that others bring to the table and usually end up doing a project that's not my idea (which I don't mind!), but it also feels amazing to be the one who is in control of the whole process, turning your idea into the product you've envisioned.

Challenges I ran into

Bugs, bugs, and more bugs...

I don't think I have ever experienced more bugs in 24 hours than I have with developing a Google Chrome extension. There were a lot of errors where I had to search deeply to fix (sometimes admittedly my own fault), but these were errors where it was unclear why it occurred. I often used monkey-patched solutions that temporily solved the problem, but it felt hacky and I knew that it would be a pain to extend the code. It was also hard to debug errors because I kept forgetting to refresh the app for background script updates, whereas there was no need to refresh the app for updates to the extension pop-up.

Messy Code

I was unaware of the necessity of a state management system for chrome extensions. I ended up implementing a poor form of Flux architecture centered around message passing back and forth from the view to the background script. My code contained a lot of duplicate code that could have been avoided if I decided to integrate a state management system like Redux or VueX, but at the end I managed to get it all working (not without bugs, of course) and it taught me the great importance of having state management software to synchronize the data with only one source of truth.

Time Limit

Worried about wasting too much time creating an appealing layout, I turned to Bootstrap, believing that it was similar to react-native-elements for React Native. However, the code there was much more verbose and longer, and I found myself copying large chunks without really understanding what they did. This led to bugs that were hard to track and debug, as well as duplicate code that made it a nightmare to navigate around. I was afraid of frameworks taking too much time to implement/maintain, but at the end, had I the choice to reprogram the app, I would've likely chose a framework like Vue or React to reduce the code duplication and to split the code into modular components which are smaller and more maintainable.

Recording the Video

I probably recorded about 20 takes because I didn't have a decent video editor and because it was 4AM in the morning and my brain wasn't fully functional. I was originally planning to make a creative video but realized that the time remaining would prevent me from doing so. However, at the end I'm proud of making a video that isn't just me talking to the screen but also showing the different parts of my app with explanations of the motive behind it.

Accomplishments that I'm proud of

I'm proud of building a working project that I'm likely to use in the future for real purposes where I need this app. For example, I'm reading a french book for school, but I find myself constantly searching up the same words over and over again. I hope to use Traduit to improve my french foundation, and I hope that others can find it useful as well.

What I learned

I learned a lot about Chrome extensions and DOM manipulation with jQuery. Although Traduit only used basic extension features, it's a step in the right direction to building more complex Chrome extensions in the future. I also learned a bit of Bootstrap, which I hope to continue using in the future.

What's next for Traduit

I plan to refractor Traduit so that it becomes more maintainable and flexible with implementations in other popular translation websites. I also hope to add some more features to Groups (maybe implementing a leaderboard?), so that Traduit isn't just a tool, but a service.

Share this project:

Updates