Demo · Tech · Spec · Installation · Features
Click on the image below for a quick demo (please excuse the bad quality from YouTube)
A language-based flashcard web application, designed to help you remember words in foreign languages. Each user can create their own account and have flashcards associated with their account. Once you have created a flashcard, you can enter into practice mode during which you can attempt as many flashcards as you like. The application will prioritise flashcards that you have the fewest attempts on when determining which cards to show you first. Your scores for each card are stored, and you can access stats during practice mode. Your flashcards are colour coded according to your success rate, and you can delete them by clicking on the cross button.
In terminal (Mac), run:
cd api
npm install
npm start
Open another terminal in the same codebase:
cd frontend
npm install
npm start
Open http://localhost:3000 to view the app in your browser.
Auth · Create · Practice-mode
Each user can create their own account, and the flashcards that they subsequently create will be associated with their account. Records of attempts are stored in the database.
Users can create words/phrases in their desired target language by selecting from the country icons in the top left of the screen. Once a card is created, it appears dynamically in the relevant tab below. The logged in user can navigate between the tabs to see all of the flashcards that they have in each language. The cards are colour coded according to the success rate that the user has with each flashcard (the cards are grey if the user has attempted the word/phrase fewer than 5 times).
Once the logged in user enters into practice mode, they will attempt each word/phrase, starting with the words that they have the fewest attempts on. Once the arrow next to word is clicked, a green/red block gets added to the row of recent attempts. The "Recent attempts" shows the last 10 attempts for the flashcard. Additionally, there is a collapsable "Word info" section, which shows the overall success rate and when the card was added. You can also hear what the word/phrase sounds like by clicking on the speaker icon.
