← Back to all posts

From Dead PDF to Study Machine in One Session

Published Sun Apr 05 2026

TL;DR

My son has an upcoming architecture test. The study material was a single PDF: one building per page, with an image and a caption block (name, purpose, date built, architect). He wanted to memorise all the buildings and their details.

In one focused build session, I turned that PDF into a static flashcard web app: browse mode, randomized five-option quiz mode, score tracking, wrong-answer review, and Netlify-ready deployment.

Live app: https://building-flash-cards.netlify.app/

The interesting part wasn’t the UI — it was the iterative “describe what’s wrong → fix → test → tighten requirement” loop, using GitHub Copilot in VS Code (also: I had Copilot credits to use up for the month, so this was a perfect excuse).

Some projects begin with an awkward source format.

This one started in the most normal way possible: my son asked for help studying, and all he had was a PDF deck. No dataset. No image folder. No CSV. Just ~50 pages where each page was basically “photo + label”.

What I wanted out of it was simple:

  1. A way to flick through the deck quickly.
  2. A way to test: show an image, give five choices, score it at the end.

And I wanted it easy to deploy. Netlify was the obvious target.

The first real problem wasn’t the UI

It was the PDF.

The trap with projects like this is jumping straight to components and styling. The real risk is the data boundary: can you reliably turn the PDF into structured card data?

Copilot started by focusing on extraction and rendering strategy (with Copilot helping me move faster inside the code).

The architecture that won

The design that kept everything simple was a pragmatic split:

Static site. No backend. No accounts. No database.

The stack stayed intentionally small:

Prompts that shaped the build (verbatim)

These are a the prompts I used during the session:

Prompt 1

I’ve got a PDF that’s got many pages. On each page is an image and a description at the top. I want to build a flash card app. A little website that shows the image and the text at the top, and you can click next/previous to quickly just flick through them all. There will also be a test function that takes the user through a test, shows them an image, and gives them multiple choices. One of those choices is the correct answer, and they have to select the right answer. The test should run through all of the images and give the user a score at the end. The test should randomise the order of the images as well. Keep it simple, make it an easy-to-deploy, easy-to-build app. We can deploy it on Netlify.

Prompt 2

Start implementation

Prompt 3

In the test you need hide the text, so just show the image.

Prompt 4

The images have still got the text, so when you extract the image you need to make sure you only get thet image.

Prompt 5

At the end of the test you did not show the score. You need to show how many you got wrong,a nd how many you got right. Record the test results so the user can go over the test to review which ones they got right/wrong.

To make testing easier let’s add an option to enter the number of questions before starting the test.

Prompt 6

Ok only review wrong answers That was the whole pattern: describe the behaviour I want, test what I got, then update the spec.

Building the first working version

The first milestone was simply: “does the deck exist?”

Once Copilot had extraction working, it could build a working v1:

The preprocessing step extracted one card per page (skipping the intro page), which gave me ~50 usable cards.

The bug that looked solved but wasn’t

When I said “hide the text in the quiz”, the first fix was to hide the UI title.

Then I tested it and immediately saw the real issue: the answer was still visible because the PDF render itself included the caption block.

That forced the correct solution: don’t hide UI; change what we render.

I prompted:

“The images have still got the text, so when you extract the image you need to make sure you only get the image.”

Copilot moved to cropping the rendered PDF page image, using crop metadata generated during preprocessing. That’s the point where it stopped feeling like a “PDF viewer with buttons” and started feeling like flashcards.

Results screens are more than scoreboards

Next I wanted the test to be useful for learning, not just grading:

And for usability I added: choose the number of questions before starting.

Those changes didn’t make the app more complicated — they made it more useful.

What came out at the end

By the end of a single build session I had something genuinely useful for my son:

If you’re sitting on a “dead PDF” like this, my main takeaway is: you can absolutely use agents to build stuff like this. Even when the source material is messy, the loop of prompt → implement → test → refine makes it realistic to ship a useful little tool quickly.

And if you want to see what I built, it’s here: https://building-flash-cards.netlify.app/