Quetzal Translate Prototype

An offline-optimized translation app (PWA) to help care providers communicate with clients in their local language.

Designer, Full-stack developer

Vue, Vuex, Vue Router, Vuetify, Sass
Firebase
-Firestore, Storage, & more
Progressive Web App
- Web Workers, Workbox, IndexedDB, Cache Storage
HTML5 Audio (Howler.js)
Adobe XD

My dad is a dentist and my parents were invited to join a group of dentists and assistants that has been going to the Rio Dulce region of Guatemala for the last 25 years to provide dental care to children. There are many Spanish-speakers in the team, but some kids in the area don't speak Spanish, they speak Q'eqchi'.

I put together a prototype of an app to help the team communicate with the kids in their own language, by recording common dental phrases in Spanish and Q'eqchi'. Luckily we found a local teacher who was able to record the phrases in Q'eqchi' on our first day, in time for us to test it in the real world.

After trying it out, the app wasn't super practical to use during treatment because there aren't enough hands to go around. But it ended up being a really useful tool for the team to learn some basic phrases since the recordings helped us get the pronunciations. Plus the kids got a big kick out of hearing their language come out of an app and our mouths.

Offline audio per language

• Download audio recordings to use offline.
• Only download the languages needed & efficiently keep recordings up-to-date.
• Let users delete a language's cache at any time.
  

• Aded a Web Worker that saves audio to Cache Storage, to reduce work on the main thread.
• Tracked recordings that changed in IndexDB to notify users when updates are available and efficiently update only the items that change, instead of the entire language.
• Added settings to manage downloads and a Web Worker function to clear the app's cache for a language

Offline-optimized PWA for iOS & Android

• Fully offline-optimized to handle spotty or no-Internet situations
• Installable on iOS and Android phones

• Set up the app as a Progressive Web App (PWA) using Workbox to efficiently cache assets so they work offline. At the time, I didn't know how to build hybrid native apps, but in any case the PWA was a great way to prototype since it felt like a regular app once installed.

Implement Material Design's Backdrop

I noticed that most of Google's Material Design examples used the Backdrop component for menus, and yet it was one of the only components not to have any implementation details and no live examples (only images). At the time, I also couldn't find any component libraries or live examples that used it.

• Implement Material Design's Backdrop spec
• Fit any length content in the Backdrop menu

• Built a layout component in Vue that uses slots to determine the background and foreground content. When the menu opens, the component gets the height of the menu content and transitions to smoothly expand to that height.