ALMABETTER FLASHCARD GENERATOR

Almabetter Capstone Project Frontend Module

◦ Developed with the software and tools below.

---

📖 Table of Contents

• 📖 Table of Contents
• 📍 Overview
• 📦 Features
• 📂 repository Structure
• 🚀 Getting Started
  • 🔧 Installation
  • 🤖 Running flashcard-generator
  • 🌐 Deployment Link
  • 🧪 Tests
• 🤝 Contributing

---

📍 Overview

The Almabetter Flashcard Capstone Project is a frontend-focused endeavor designed to deliver an engaging and intuitive flashcard application. The primary goal of this project is to create a seamless user experience for studying and reinforcing knowledge through interactive digital flashcards.

---

📦 Features

1. Create Custom Flashcards:

   • Users have the ability to craft personalized flashcards by entering group information along with multiple terms and their corresponding details. This feature empowers users to tailor their learning experience to specific subjects or topics.

2. Character Limit Validation:

   • The system intelligently validates user inputs and provides immediate feedback. If the user exceeds the maximum character limit, the application displays a visually distinct error by highlighting the input fields with a red border and presenting a clear error message in red text.

3. Dynamic Term Section:

   • Users can dynamically manage terms within the flashcards. This includes adding new terms, deleting existing ones, and activating a read-only mode for specific terms. This flexibility ensures a customizable and adaptive learning experience.

4. Persistent User Data:

   • The application employs local storage to store user data persistently. This means that users can seamlessly pick up where they left off, and their created flashcards will be retained even after closing the browser or navigating away from the application.

5. Flashcard Block Deletion:

   • Users have the capability to delete entire flashcard blocks from the show page. This feature provides a streamlined way for users to manage their flashcards, allowing for efficient organization and removal of unnecessary content.

6. Download, Print, and Share:

   • The show page offers convenient options for users to download flashcards, print them for offline use, and share them with others. This enhances the usability of the flashcards beyond the application, facilitating collaborative learning and knowledge sharing.

---

📂 Repository Structure

└── flashcard-generator/
    ├── package-lock.json
    ├── package.json
    |
    ├── public/
    │   └── index.html
    |
    ├── src/
    │   ├── App.js
    │   ├── __test__/
    │   │   ├── Error.test.js
    │   │   ├── Header.test.js
    │   │   ├── Model.test.js
    │   │   ├── SharePrintDownloadComponent.test.js
    |   |
    │   ├── asset/
    |   |
    │   ├── components/
    │   │   ├── Error.js
    │   │   ├── GroupFieldSection.js
    │   │   ├── Header.js
    │   │   ├── Model.js
    │   │   ├── RenderCard.js
    │   │   ├── SharePrintDownloadComponent.js
    │   │   ├── ShowActiveTermInfo.js
    │   │   ├── ShowAllCards.js
    │   │   ├── ShowCompleteSingleCard.js
    │   │   ├── SingleTermFieldItem.js
    │   │   ├── TermFieldArraySection.js
    │   │   └── UploadImageButton.js
    |   |
    │   ├── hooks/
    │   │   ├── useGeneratePdf.js
    │   │   └── useSubmitFlashcardData.js
    |   |
    │   ├── index.css
    │   ├── index.js
    |   |
    │   ├── pages/
    │   │   ├── CreateFlashCard.js
    │   │   └── ShowFlashCard.js
    |   |
    │   ├── redux/
    │   │   ├── flashcardReducers.js
    │   │   └── store.js
    |   |
    │   ├── reportWebVitals.js
    │   └── setupTests.js
    └── tailwind.config.js

---

🚀 Getting Started

• 🌐 Deployment Link

  You can visit the app live from click here

---

• 🔧 Installation

1. Clone the flashcard-generator repository:

git clone https://github.com/gagandeepsingh101/flashcard-generator

2. Change to the project directory:

cd flashcard-generator

3. Install the dependencies:

npm install

🤖 Running flashcard-generator

node app.js

🧪 Tests

npm test

---

🤝 Contributing

Contributions are welcome! Here are several ways you can contribute:

• Submit Pull Requests: Review open PRs, and submit your own PRs.
• Join the Discussions: Share your insights, provide feedback, or ask questions.
• Report Issues: Submit bugs found or log feature requests for GAGANDEEPSINGH101.

Contributing Guidelines

Click to expand

1. Fork the Repository: Start by forking the project repository to your GitHub account.
2. Clone Locally: Clone the forked repository to your local machine using a Git client.

   git clone <your-forked-repo-url>

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear and concise message describing your updates.

   git commit -m 'Implemented new feature x.'

6. Push to GitHub: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.

Once your PR is reviewed and approved, it will be merged into the main branch.

---