Cardflash ⚡

Cardflash is an open-source project that allows users to create flashcards directly from PDF learning material such as lecture slides or scripts and to learn from created flashcards.

The key concept of Cardflash is on the link between the source material and the flashcard content, which is automatically created when constructing flashcards. This allows users to go directly to the exact location of the source in the document (the single source of truth) and thus to the answer in the event of questions, ambiguities or the search for further information.

Note: This repository contains the newest revamped version of Cardflash, written in React. For the previous Angular version, see github.com/cardflash/cardflash-angular.

A free hosted version of Cardflash is available at app.cardflash.net. Just head there to give Carflash a try live!

Apart from that, Cardflash can, of course, also easily be self-hosted (currently as a static frontend SPA).

Screenshots

Features

• Create, save and organize study material (PDFs) in collections
• Construct flashcards from PDF content, automatically linking the information on the cards back to the exact source in the study material
• Study flashcards using spaced repetition
• Beautiful and intuitive user interface (on Desktop and Mobile)

Tutorial

Creating a Collection

1. Navigate to the collections page using the menu button on the right (or on the bottom on mobile)
2. Click on the Add... button and enter the name of the new collection (e.g., the name of your lecture)

Adding Documents (Source Material) to a Collection

1. Navigate to the collections page and click on the collection you want to add your material to
2. Select the PDF file you want to add from your device

Creating Flashcards

1. Navigate to the document you wish to create cards for
2. Select content from the PDF Viewer to add them to a flashcard
   • For text, simply select the text in the PDF viewer. After a small delay, options to add this text will appear to the right of the selection.
     • 
   • For an image area, first toggle area selection mode using the button on the bottom. The PDF viewer will become darker, and you can click and drag anywhere on the PDF viewer to select an area.
     • 
3. When a selection is active, you can toggle between adding it to the front or back of the flashcard using the button in the middle. The top button with a + will add the selection to the current flashcard.
4. You can edit the flashcard manually in the Cards or Combined view (selectable on the top).

Contribution & Tech Stack

Cardflash is built on top of the great shoulders of web standards and web technology. As apparent by the tech stack choices (see below), we embrace full type safety, whenever possible.

This monorepo currently only contains the web frontend code (a React SPA), located in the cardflash-react directory.

Frontend

The main user interface is implemented in React with Typescript and TailwindCSS.

Internationalization (i.e. a translation system) is done using typesafe-i18n.

Data is stored locally in the IndexedDB of the browser, using idb as a wrapper.

Routing is implemented using TanStack Router, where search parameter validation is done using zod.

Note: The prebuilt PDF.js files are currently not included in this repository. Please download the files manually from https://mozilla.github.io/pdf.js/getting_started/#download (Modern Browsers) and place the folders build and web from the downloaded zip in the cardflash-react/public/pdfjs folder, renaming web to viewer.

To start developing the project, clone this repository and run the following commands in the cardflash-react folder:

• npm install
• npm run dev

If you also plan on changing translations, you will also need to run npm run typesafe-i18n in a second terminal.