KatiaVi / SmartFlashCards

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SmartFlashCards

Smart FlashCards is a web application that lets you quickly create and practice virtual flashcards for language learning. It does so by automatically generating translations and pronunciation audio for the words/phrases the user wants to learn. Currently, Smart FlashCards supports over 10 languages (including Hindi, German, Japanese, Korean, Russian, Spanish and others).

Motivation

In addition to bread-making, dalgona coffee-making and other quarantine activities, I added learn Korean to my list. To practice Korean vocab, I used regular flashcards. One thing that I wished I could do was also hear the correct pronunciation of the words when practicing, since Korean uses a different alphabet from English and has sounds that I wasn't yet used to. Cue Smart Flashcards!

Who would use this?

Interested language learners who want to learn the basic vocabulary of a new language. This is especially targetted for learners who:

  1. Want to hear the words/phrases they are learning
  2. Want to get started quickly, without the added time cost of googling a translation/updating the language of their keyboard

Ex: Someone who is going on vacation to Germany and would like to learn some basic words/phrases. Smart FlashCards will help them create a deck with all those phrases/words quickly. When practicing their deck, the vacationer will start to familiarize themselves with both how the word is written and spoken, helping really solidify what they're learning.

Walkthrough (German Vacationer Example, let's name her Anne)

  1. Anne visits the homepage and fills out some info to get her unique learning space link. Main Onboard

  2. After receiving an email with the link, Anne uses the link to get to Anne's learning space. There she gets started by creating a deck for some basic German words/phases.

Video with walkthrough for steps 3-7: https://youtu.be/W6AXKTgKVl8

  1. Clicking to view the cards in her new deck, Anne is redirected to the Deck page where she can add some German cards.

  2. Anne creates her first card for the phrase Good Morning. All she needs to do is enter the phrase she wants to learn in English, click Auto-Translate and Create Card. Now Anne has a card that shows her how Good Morning looks and sounds in German.

  3. Anne enters a few more German words/phrases she wants to learn before her trip.

  4. Anne goes back to her deck page and clicks Practice Deck.

  5. Now Anne can review her words/phrases.

  6. Anne flies to Germany and awes everyone with her knack for the German language!

Tech Stack

Data Storage:

  • Information about the user, the decks and the cards (including translations) are all stored on a local MySQL database.
  • The audio files with pronunciations are stored in an Amazon S3 Bucket.

External APIs:

The backend logic was written in Java, using the Spring Framework. The front-end is written in React.

Potential Improvements/Next Steps

  • Translations aren't always right.
  • Have a way of marking which cards are learned.
  • Have a way to practice pronunciation of the word with flash cards. Perhaps, highlight the phrase as it's being read by the audio.
  • More aesthetic UI.
  • Package and host the code on the cloud.

About


Languages

Language:JavaScript 74.1%Language:Java 24.1%Language:HTML 1.1%Language:Shell 0.4%Language:CSS 0.3%