/printable-flashcards-generator

React application to generate flashcards optimized for printing on both sides.

Primary LanguageCSSMIT LicenseMIT

Printable Flashcards Generator screenshot

Printable Flashcards Generator

This is a React application designed to generate flashcards optimized for printing on both sides. Each flashcard contains a question on the front and its corresponding answer on the back.

How Does It Work

File Format

The data must be contained in a .json file with the following structure:

[
    {
      "id": "string (optional, max length: 6)",
      "question": "string (required, max length: 120)",
      "answer": "string (required, max length: 250)",
      "category_name": "string (optional, max length: 25)",
      "qr_url": "string (optional, URL pointing to .jpg or .png image)"
    },
    ...
]

The file must contain at least 1 flashcard and can have a maximum of 120 flashcards.

Field definitions

  • id: Optional. Unique identifier for the flashcard. Accepts string values with a maximum length of 6 characters.
  • question: Required. The question for the flashcard. Accepts string values with a maximum length of 120 characters.
  • answer: Required. The answer to the question. Accepts string values with a maximum length of 250 characters.
  • category_name: Optional. Name of the category to which the flashcard belongs. Accepts string values with a maximum length of 25 characters.
  • qr_url: Optional. URL pointing to a .jpg or .png image for a QR code.

Print Settings

  • First you generate a pdf file and then print it.
  • Make sure the Layout is set to Landscape, that paper size is A4, and that Margins are set to None.
  • In this image you can see the configuration required to generate the pdf file correctly.

Example Files

Development

Setup

  1. Clone this repository to your local machine.

  2. Install dependencies by running:

    npm install
  3. Start the development server by running:

    npm run dev

License

This project is licensed under the MIT License - see the LICENSE file for details.