https://flashcard-generator-1211.netlify.app/
This project assignment from Almabetter serves as a front-end capstone task.
It involves developing a flashcard generator application that facilitates the creation of multiple flashcards within a group.
This application offers features such as card creation, the addition of both text and images, sharing, downloading, deletion, and even the option to print the generated flashcards.
The user interface of this app is designed to be fully responsive, ensuring a seamless experience across various devices.
This Project Consists of 3 main pages:
-
Here, a new card group is generated by completing all the necessary information and selecting the "create" option.
.png?raw=true&raw=true)
.png?raw=true&raw=true)
-
In this section, you can view all the card groups that have been created. Each group is presented with a group heading, an associated group icon image, a description of the card group, the total count of cards within the group, and a button for accessing the cards on the subsequent page.
.png?raw=true&raw=true)
Modal for deleting single flashcard.
.png?raw=true&raw=true)
If you have not created any flashcards then it will show No Flashcards available.
.png?raw=true&raw=true)
-
In this section, you have the ability to review the created flashcards. Navigation between different flashcards is facilitated by clicking on the sidebar terms assigned to the cards during group creation. Additionally, options for sharing, printing, and downloading the flashcards are available.
.png?raw=true&raw=true)
This is the share page component which gives the multiple option for sharing this page.
.png?raw=true&raw=true)
.png?raw=true)
.png?raw=true)
.png?raw=true)
.png?raw=true)
.png?raw=true)
.png?raw=true)
.png?raw=true)
This project was constructed utilizing a variety of frontend technologies, including the React JavaScript library for the core structure, Tailwind CSS to craft a responsive user interface, Redux for efficient state management, React-icons, Formik, React-Router-Dom,jspdf,yup and react-testing-library/jest for testing purposes.
If you have any feedback, please reach out to me at - purvil.nakrani@gmail.com