Vocabulary memorization website

Nowadays, everyone is learning languages to advance careers or broaden horizons. Although there are many online resources to learn from, lack of vocabulary is often a pain point for many learners. We'll create an application for foreign language learners to manage their vocabulary. You can start with a simple form for inserting words - one for your native language and another for the foreign language.

Languages and vocabulary list

• User can add multiple languages (minimum two languages required)
• Input for users to add and delete vocabulary pairs (minimum five pairs)

Testing mode

• A button to start testing mode
• Show users one word at a time in their native language
• Users should submit the translation of the word
• Submitting the translation will then shows the next word
• Show a progress bar to indicate the words completed
• When all vocabulary is complete, bring the user to view their results.

Test results

• Calculate the results (hit ratio), shows the percentage of hits and a table showing all tested words together with the translation and the user's input.
• Every row should have a visual indication if the word was a hit or a miss.
• Users can return to their vocabulary list.

• If you are making the project with ReactJS, use Redux for state management.
• You can use TypeScript with React for declaring data type of variables. If that’s too difficult, suggest using the prop-types NPM package. (Most advanced projects use TypeScript/prop-types ).
• If you are making the project with Angular, no library required for state management. You can also use RXJs if you are familiar with it.
• For designing in Angular, you can use ng-bootstrap NPM package, which helps you speed up the design of your project.

• Project live demo
• React prop types: If you are not familiar with TypeScript, you can also use prop-types in React.