Learning Cards

---

This project was bootstrapped with Create React App.

---

Technology stack

• TypeScript
• React
• Redux
• React-Redux
• Redux-Thunk
• React-Router-dom
• Axios
• Material UI
• Formik
• HTML
• CSS

About

Learning cards for online training using the question-answer system with the ability to create your own training modules (card decks), as well as their expansion (creating new cards), editing and privacy settings. The project also implemented a learning process with a rating system for assessing the knowledge of the material covered and a counter for passing training cards. The project has the ability to search for educational cards, as well as two-level filtering.

Documentation

1. When logging into the project, the user will be taken to the deck page.
2. If the user is not authorized, he will be redirected to the login page.
3. If the user is not registered, by clicking on the link 'Sign up' the user can register in the form that opens.
4. After registration, the user will be redirected to the login page.
5. If the user is logged in successfully, he will be redirected to the page with the learning cards.
6. In order to stay in the system for a long period of time the user should click in the checkbox "Remember me".
7. To search for the desired deck or card, start typing in the Search line the name of the deck or card you are looking for.
8. To switch to the tab of your decks, click on the 'My' button. To sort the decks by number of cards, move the slider bars to the left and right.
9. To sort the values in the tables by the desired parameter, hover over the table header and click on the arrow that appears.
10. To create a new deck, click on the 'Add New Pack' button. In the modal window that appears, enter the name of the deck and use the checkbox to set its privacy.
11. To edit a deck, click on the 'Pencil' icon in the deck table. Make changes in the window that appears.
12. To delete a deck, click on the 'Trash' icon in the deck table and confirm the deletion in the modal window that appears.
13. To go into training mode, click on the 'square academic cap' icon.
14. In training mode, the name of the training module, a box with a question, number of attempts to answer the question and 'Show answer' button will appear.
15. By clicking on the 'Show answer' button the user can see the answer and be prompted to evaluate their knowledge of the answer.
16. Once selected, the 'Next' button will become active, and when clicked, the user will have access to the next question.
17. Press the 'Back to Packs list' button to end the training mode.

Distribute

In order to gain access to educational resources, please follow this link and register.

Developers

• Denis Shubin
• Yury Zhykharka
• Anatoly Rack