Almabetter-Flashcard-Generator

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.

Interface-with-Dark-mode-enabled

Interface-with-Light-mode-enabled

Run Locally

Install dependencies

  npm install

Start the server

  npm start

Tech Stack

• Reactjs( React Router ),
• Redux & Redux Toolkit,
• TailwindCSS,
• React-icons,
• React Formik & Yup,
• domtoimage

About The Project (Flashcard Generator)

This project is created with mainly Reactjs, In this project we have three pages,

1. Create Flashcard page
2. My Flashcard page
3. Flashcard Details page with share page

• Create Flashcard page: In Create Flashcard page we used a Formik for creating input boxes and for the validation we used Yup

• My Flashcard page: 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.

• FlashcardDetails page: On the page, we wrote a code for displaying the number of cards and details of cards, and on the page, we also created a share popup slide with all social media Links

How To Use

1. Open the flashcard generator and click Deployment Link.

2. Click on the "Create New" link fill up all the input boxes without any Errors and click on the "Create" button.

3. For the viewing of Currently created flashcards click on the "My flashcard" link this will show all flashcards you created recently.

4. For the Viewing Details of the flashcard click on the "view card" button on the flashcard this will show the details of a flashcard and the number of cards with its description also we have a "share" button to copy the link with all social media icons(Links) working.

Features

• Add More Input Box (Button)
• Delete button (Button)
• Edit Input box (Button)
• Dark mode
• View cards (Button)
• Upload Image (Button)
• Download flashcard as image
• Share (Copy Clipboard button)
• Print as PDF
• Social Media Butoon's ( Working )
• See all (Button)
• Back Button
• Close button for closing the share page

Skills

Javascript, HTML, CSS, ReactJS, Redux

Deployed App

https://flash-card-generator-phi.vercel.app