FLASHCARD GENERATOR

React.js application to create flashcards

DEMO

Table of Contents

• Introduction
• Features
• Tech Stack
• Installation & Run
• Contribute
• Contributors
• License
• Contact
• Acknowledgment

Introduction

The Flashcard Generator is an web application designed to provide users with a versatile and interactive flashcard creation and management experience. Developed using React.js and incorporating Redux Toolkit for efficient state management, this project includes additional features to enhance the user's ability to create comprehensive and customizable flashcards.

It allows users to create, manage, and study flashcards effortlessly. This application provides a comprehensive solution for organizing and reviewing information in an intuitive and user-friendly manner.

Features

Some features of this application :

• Create Flashcard: Users can easily create new flashcards by filling out a simple form. The main flashcard form includes fields for the flashcard title, and a description. The term form allows users to add multiple terms to the flashcard, with fields for the term title and definition. Additional terms can be dynamically added or removed as needed.

• My Flashcards: This page provides an overview of all the flashcards created by the user. Each flashcard is displayed with its title and description, allowing for quick navigation to the desired flashcard.

• Flashcard Details: Users can view the details of a specific flashcard on this page. The flashcard's title and description are shown at the top, while the list of terms is displayed on the left side. Clicking on a term will display its details prominently in the center. Users can navigate between terms using an intuitive carousel with arrows at the bottom.

• Share Flashcards: Users have the option to share their flashcards by clicking on the share button. This opens a modal containing a unique link to the flashcard, along with a copy button for easy sharing with others.

• Download Option: Include a feature that allows users to download their flashcards as a PDF file. This downloadable PDF could contain all the flashcard details, including titles, descriptions, and terms.

• Offline Study with Hard Copies: Users can print and have physical copies of their flashcards for offline study. This is especially useful for those who prefer tactile learning or want a tangible backup.

Tech Stack

Flashcard Generator is build using the following technologies:

• React.js: React is a JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
• Redux: Redux is a predictable state container for JavaScript apps.
• Formik: A popular open-source library for building and processing form data in React applications.
• Yup: A JavaScript object schema validator.
• React-icons: Library for including popular icon sets as React components.
• React-router-dom: A package contains bindings for using React Router in web applications.

Installation and Run

1. Clone the repository from GitHub:

    git clone https://github.com/Abhi1o/FlashCard_Generator.git
   

2. Redirect to the project folder:

    cd Flashcard_Generator
   

3. Install the required dependencies:

    npm install
   

4. Start server:

    npm start
   

   [!NOTE] Access the application in your web browser at http://localhost:3000 (base URL)

Contribute

Contributions are welcome! If you'd like to contribute, please follow our Contribution Guidelines.

Contributors

• Abhishek Kumar GitHub | LinkedIn | YouTube
• Aman Giri GitHub | LinkedIn | YouTube
• Damini Gadpal GitHub | LinkedIn | YouTube

License

This project is Distributed under the ISC License. See LICENSE for more information.

Contact

If you have any questions or suggestions, feel free to reach out to us at Gmail.

Acknowledgment

We'd like to thank the contributors to this project for their valuable contributions.

Happy Learning