Production Site: Try it out here!
A travel/language learning app that allows you to search for translations by photo or text from/to any of the 100+ languages supported by Google Translate. Additionally, definitions are available in Spanish provided by the Oxford English Dictionary. Translation or definition in hand, save the words you want to practice in flashcard decks tailored to you!
This project is currently in development. Next steps include:
- building a server to store user profiles
- optimizing for mobile and mobile cameras
- adding additional UI for better flashcard practice.
git clone, npm install, npm start
To run locally, you'll need to obtain your own developer keys:
-
An Oxford Dictionaries key
-
Set up your Google Cloud Platform and then enable the Translation and Vision APIs.
-
cp example.env .envand then copy the appropriate values to.env.
This was a 2 week long personal project for Turing School of Software and Design.
The inspiration for this app was a desire to have a better, lazier way of finding and storing words. As a life-long language learner I love the ease integrated dictionaries lend to reading in a second language with an ebook, and found myself awkwardly trying to photograph my IRL book to achieve the same thing with Google translate. Even when I was successful, the newly acquired word was soon lost in my mind. I wanted a way to not only find, but store the words for future practice. It was important to include the Spanish dictionary in order to make flashcards that ultimately would be better for language learning.
The initial hurdle was figuring out how to consume the four API calls I was making. My biggest challenge was solving for hiding and displaying cards and answers, and randomly shuffling through the cards in a deck. I learned how to approach applications in a more functional way, and got a lot of practice with Redux.
I built this project on an Express boilerplate (hoping to build the backend to serve user profiles soon) using React, React-Router and Redux. API calls done using the Fetch API and Thunk middleware. I used three different APIs: - Oxford English Dictionary API: an incredibly robust API that I would love to delve deeper into - Google Translate API - Google Vision API
Unit and feature testing using fetchmock, Enzyme, and Jest with the Mocha assertion library. HTML5, CSS3 and ES6 used throughout.
Next steps are improving UI and micro-interactions, optimizing for mobile and integrating the camera, and getting more out of the OED API -integrating other languages' definition. Check out my issues in Waffle.io!
Built with Express Boilerplate
This World Cities Icons Set was designed by Agente Studio
All other icons free from Sketch Resources
background image by Andrew Neel
