LearnThat

Learning a language is a long and grueling process that takes years of consistent practice and dedication. LearnThat is the perfect Google Chrome Extension to help you make that journey just a little bit easier. When reading your language of choice on your laptop but coming across a word you don’t know, simply double-tap to highlight it and pull up the definition. However, instead of being just a more accessible dictionary, LearnThat will also store the words you don’t know in memory and allow you to access all these words later for you to review!

MVP

• Double-click on a word (highlight it) to pull up its definition and save it to a vocabulary list
• Click to hear word pronunciation
• Keep track of how many times each word is double-tapped, and display a short quiz of the most double-tapped words often
• Sort different vocabulary words into folders
• Display the “Word You Struggled the Most With” based on data from the past x days

Stretch Goals

• Keep track of the context that you last saw the word in
• Feature to write your own definition of a word (for slang)
• Display stats of the most saved words, total words searched up
• Allow user to manually type in a word to save (for audio)
• Generate a random daily word in target language for them to practice
• Quiz game feature to practice words (like Quizlet Matching)

Tech Stack

• React
• Firebase
• Translation API (tbd)
• Google Chrome Extension

Things to Install

• IDE: Visual Studio
• Version Control: Git
• React: React

Tutorials

• Build a Chrome Extension (for beginners!)
• Create a Chrome Extension for beginners
• React in 100 Seconds
• React Tutorial for beginners
• Playlist with a bunch of great Firebase tutorials

Timeline

Week 1:

• Decide on roles
• Confirm app MVP and discuss any other features to be added
• Download software, set up environment and Git, watch tutorials

Week 2:

• Learn how to create UI for Google Chrome extensions, research existing extensions for inspo
• Create wireframes and get feedback
• User authentication with Firebase

Week 3:

• Get a definition popup when text is highlighlighted
• Decide on a translation API and start getting definitions
• Finalize front-end design after getting input
• Start coding the front-end

Week 4:

• Code the front-end of pop-up code display
• Code Home Page
• Keep working on getting a definition pop-up when text is highlighted
• Add API functionality to the definition pop-up

Week 5:

• Code the Login page
• Code Settings page
• Store the number of times a word is looked up
• Make the saved words show up in the webpage

Week 6:

• Integrate the front-end and back-end
• Ensure that everything connects properly

Week 7:

• Code the Vocabulary Page to display history of words
• Display the most frequently searched word of the past 7 days
• Calculate the most frequently searched word of the past 7 days

Week 8:

• Add animations to the front-end for extra style points
• begin working on presentation

Week 9:

• Finish presentation and being practicing
• Brainstorm fun ideas for presentation

Week 10:

• Prepare for presentation and live demo!

Competition/Inspiration

• Toucan
• Readlang

Github CheatSheet!

Master cheatsheet: https://www.atlassian.com/dam/jcr:8132028b-024f-4b6b-953e-e68fcce0c5fa/atlassian-git-cheatsheet.pdf

Some basic ones:

Command	Description
cd "LearnThat"	Change directories to our repository
git branch	Lists branches for you
git branch "branch name"	Makes a new branch
git checkout "branch name"	Switch to branch
git checkout -b "branch name"	Same as the 2 previous commands together
git add .	Finds all changed files
git commit -m "Testing123"	Commit with message
git push origin "branch"	Push to branch
git pull origin "branch"	Pull updates from a specific branch

Developers

• Oudom Pach
• Ranvir Patel
• Jakob Kuhnen
• Chuanjie Duanmu

Project Manager

• Kacie Yee

Industry Mentor

• Joanna Borba