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!
- 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
- 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)
- React
- Firebase
- Translation API (tbd)
- Google Chrome Extension
- IDE: Visual Studio
- Version Control: Git
- React: React
- 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
- Decide on roles
- Confirm app MVP and discuss any other features to be added
- Download software, set up environment and Git, watch tutorials
- Learn how to create UI for Google Chrome extensions, research existing extensions for inspo
- Create wireframes and get feedback
- User authentication with Firebase
- 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
- 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
- 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
- Integrate the front-end and back-end
- Ensure that everything connects properly
- 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
- Add animations to the front-end for extra style points
- begin working on presentation
- Finish presentation and being practicing
- Brainstorm fun ideas for presentation
- Prepare for presentation and live demo!
- Toucan
- Readlang
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 |
- Oudom Pach
- Ranvir Patel
- Jakob Kuhnen
- Chuanjie Duanmu
- Kacie Yee
- Joanna Borba