React Flashcards


Why?

I created a flashcard apps to help with JavaScript trivia questions I get asked at interviews. I opened sourced a demo version you can find on github and it’s also hosted at flashcards.rdanielmurphy.com.

It’s made to be very responsive so it should be easy to use on a phone as well as a laptop.

Flashcards are built with markdown and uses a Webpack loader to compile the markdown into a question/answer object.


How to use?

Install and run

After you get the code, do:

npm install
npm start

Add flashcards

To create a flashcard you must create a markdown file with extension .fc under the data folder. But you must have a format like so:

===QUESTION===
<mardown here>

===ANSWER===
<mardown here>

The you have to import (in js file same directory as child):

import q from "./question1.fc";

const cards = {
    questions : [
        q
    ]
};

export default cards;

If it’s a new group of cards, the two files above must be in a folder under data. Then import that group in flashcard.data.js:

import myCards from "./myCards/myCards";

const FlashCardData = {
    "js" :  {
        "name" : "JavaScript",
        "cards" : jsCards,
        "fa" : "code"
    },
    ...
    "myCards" : {
        "name" : "My Cards",
        "cards" : myCards,
        "fa" : "puzzle-piece"
    }
};

export default FlashCardData;



Check it out!

screenshot



Source code is hosted on a public repo on GitHub