miniflash

Deck editor. Built without React.
A flash card.
The flash cards are stored in the same HTML file.
Responsive mobile layout.

Inspiration

Well, I wanted to overengineer a flashcards program, because that's more fun than actually studying your flashcards. If it has a simple interface and works offline, there's less excuses to avoid studying.

What it does

This is a single HTML file containing a flashcard studying interface and a flashcard editing interface. When you're done editing the flashcards, press "save" - the program prints out its own source code with the modified flashcards baked in to it, like a quine, and offers it for download.

How we built it

A cute .outerHTML trick powers most of the quine. There's some extra bookkeeping and DOM manipulation required to close the loop and incorporate the new card database.

Challenges we ran into

Since the whole thing has to be a single self-contained file, I can't use any external dependencies.

Accomplishments that we're proud of

That it works at all 👀

What we learned

You can actually do a lot without heavy frameworks like React, although I'm kinda pushing it.

What's next for miniflash

Of course it would be nice to clean the code, make the flashcards a little more featureful, and make the CSS a little nicer.

I'd like to include some functionality for sorting cards into "correct"/"incorrect" piles and some spaced-repetition functionality. It will require saving the html file more often, to save the spaced-repetition state. I tried to build the database with this extensibility in mind.

If I fight esbuild and win, I can include JS libraries into the single self-contained file.