~mxmg revision-websites--education

Custom Educational
Revision Websites and Packs -
Create your own.


~

Personalised Learning for Every Student

[*]

ADHD-Friendly

✓Distraction-free layouts
✓Clear visual hierarchies
✓Chunked content for better focus
✓Progress tracking with achievable milestones
[*]

Dyslexia-Friendly

✓OpenDyslexic & Comic Sans font options
✓Adjustable text sizes
✓High-contrast colour schemes
✓Text-to-speech functionality
[*]

Visual & Kinaesthetic

✓Infographics & timelines
✓Colour-coded themes
✓Interactive drag-and-drop activities
✓Personalised team colour themes
[*]

Auditory Learners

✓Embedded audio summaries
✓Podcast-style revision content
✓Video walkthroughs
✓Commute-friendly formats
~

Comprehensive Interactive Learning Tools

Examples of features you can add to your revision site.

[*]

Smart Flashcards

Spaced repetition algorithms, flip-to-reveal answers, tagging by topic/difficulty, progress tracking, and mobile-friendly design.

[*]

Interactive Quizzes

Multiple choice, short answer, essay planning, instant feedback with explanations, timed mock exams, and adaptive difficulty.

[*]

Key Quotation Banks

Searchable databases organised by theme/character/technique, with context annotations and critical interpretations.

[*]

Essay Planning Tools

Step-by-step frameworks, assessment objective checklists, model paragraph builders, and mark scheme comparison.

[*]

Annotated Model Answers

Band 5 exemplars with highlighted AO coverage, examiner commentary, and "improve this answer" exercises.

[*]

Progress Dashboards

Track completed modules, quiz scores over time, strengths/weaknesses heat maps, and personalised study recommendations.

[*]

Visual Learning Aids

Interactive timelines, character relationship maps, mind maps for themes/concepts, and infographics for complex theories.

[*]

Glossaries & Terminology

Searchable definitions with examples, pronunciation guides, and "in context" usage from set texts.

[*]

Practice Question Banks

Hundreds of exam-style questions with mark schemes, examiner tips, and model planning notes for thorough preparation.

~

A guide for parents

Build a Revision Site

What to type into Claude Code, in order, to build a revision website from your child's exam specification, pitched at the level they are working at.

Part 1 of 2

Nine prompts

Nine prompts, in order. The site runs on the computer where Claude Code is running; nothing is online at this stage. They are also the starting point if you'd rather have a printed pack than a website — the branch for that comes after them.

Part 1 is nine prompts that build the site from the exam specification: every topic in the board's own numbering, practice questions marked automatically where an answer can be checked, model answers and mark-scheme working where it cannot, and a front page that opens on the last topic practised.

Part 2 puts the site online, adds a domain of your own, and adds sign-in so progress follows your child between devices.

Two things to find out first

Neither can be guessed reliably, both come from the school or from a past paper, and everything else in the guide follows from them.

1

The specification code

It's on the front of any past paper, in the school's options booklet, or one message to the teacher away. It looks like 9MA0, 1MA1, 8300 or J560.

2

The target grade

This sets how deep the site goes. It is not a prediction: there is no point drilling grade 9 vocabulary with a student for whom a 5 would be a good result.

→For GCSE maths, sciences and languages, also find out which tier your child is entered for.

The prompts

Nine of them, in order. Fill in the [HIGHLIGHTED] parts — the worked example under the first prompt shows what a finished one looks like. Type each prompt into Claude exactly as it is printed: the wording is deliberate.

[!]

One at a time. Paste a prompt, read what comes back, and only then move on. Several of them finish by asking you to agree to something before Claude carries on, and pasting the next one over the top skips that.

[!]

Some prompts contain instructions meant for you rather than for Claude — a bracketed "keep the ones that fit", or a sentence to delete if your child is not taking a GCSE. Do that editing before you paste, or Claude is handed the stage direction along with the prompt.

1

Tell Claude who it's for, and have it fetch the real documents

The second paragraph is the important one: it makes Claude work from the board's own documents rather than from memory.

prompt
I want to build a revision website for my child, [CHILD'S NAME], studying [SUBJECT] at [GCSE or A Level] with [EXAM BOARD], specification code [SPEC CODE]. The exam is on [EXAM DATE]. Target grade: [TARGET GRADE]. [ANYTHING ABOUT HOW THEY LEARN — for example "has ADHD and gives up on long pages". Delete this if there's nothing.]

Before anything else, find [EXAM BOARD]'s official documents for [SPEC CODE] on the board's own website and download them: the specification, any formula booklet or data sheet issued in the exam, and the most recent past papers, mark schemes and examiners' reports. Tell me the exact title, issue number and date of the specification you found, and wait for me to confirm before going further. Everything on the site must come from those documents, not from memory. If you cannot download something, say so — I will attach it.

One rule for the whole project: never install anything globally on this computer. If you need a tool, use npx, or tell me exactly what to install and where, and wait for me.

Worked example — A Level Maths

worked example
I want to build a revision website for my child, Sam, studying Mathematics at A Level with Pearson Edexcel, specification code 9MA0. The exam is on 9 June 2027. Target grade: B. He has ADHD and gives up on long pages.

Before anything else, find Pearson Edexcel's official documents for 9MA0 on the board's own website and download them: the specification, any formula booklet or data sheet issued in the exam, and the most recent past papers, mark schemes and examiners' reports. Tell me the exact title, issue number and date of the specification you found, and wait for me to confirm before going further. Everything on the site must come from those documents, not from memory. If you cannot download something, say so — I will attach it.

One rule for the whole project: never install anything globally on this computer. If you need a tool, use npx, or tell me exactly what to install and where, and wait for me.

Claude should come back with something like "Pearson Edexcel Level 3 Advanced GCE in Mathematics, Specification Issue 4, February 2020" and the formula booklet's name.

[✓]

What to check

Search the web for "[EXAM BOARD] [SPEC CODE] specification" and open the PDF. The issue number on the cover matches what Claude said. If Claude couldn't download it, download it yourself and attach it to the chat.

Setup · not one of the nine

Write the rules down so they stick

The rule you just set holds for as long as that conversation lasts, and no longer. Chats end, and you will start new ones over the months this runs. A file called CLAUDE.md at the top of the folder is different: Claude Code reads it at the start of every conversation, so whatever is in it applies to all of them. Paste this once, now, and add to it whenever a new rule comes up.

prompt
Create a CLAUDE.md file in this folder holding the rules for this project, so they apply in every future conversation and not only this one. Start with these three:

- Never install anything globally on this computer. Use npx, or tell me exactly what to install and where, and wait for me.
- Never tell me a step is done while a test is failing.
- Everything on the site comes from the exam board's own documents, not from memory.

Then tell me what else you think belongs in it, and wait for me before adding anything.
[✓]

What to check

Ask Claude to show you the file, or open CLAUDE.md in the folder yourself — it is ordinary text and should say what you expect. Anything added to it later applies from the next conversation on.

2

Plan, don't build

prompt
Don't build anything yet. Propose how the site should work and wait for me to agree. I want:

- Every topic and numbered point from the specification, in the board's own numbering, with a plain-English summary of what the exam expects.
- Practice questions. Where an answer can be checked automatically (numbers, short answers, multiple choice), check it instantly and then show the working. Where it cannot (longer writing), show a model answer and a self-marking checklist — never pretend to mark it.
- Mark-scheme guidance in the convention this board uses for this subject: find out from the mark schemes you downloaded whether it marks step by step (then label each step with its mark) or by levels (then show the level descriptors and what moves an answer up a level).
- Pitched at [TARGET GRADE] — depth, not prediction. I'll say exactly how in a later step.
- Progress saved in the browser, so it opens where [CHILD'S NAME] left off with no sign-in.
- Works on whatever they actually use — phone, tablet or laptop — and quick on a small screen, in short sessions, with one obvious thing to do on the front page.
- Tests you run yourself. Never tell me a step is done if a test is failing.

It only needs to run where I am for now; nothing goes online yet. Make every technical decision yourself and just tell me what you chose. Only ask me questions a parent could answer. Keep the plan to a page.
[✓]

What to check

The list of topics matches the contents page of the specification PDF. Answer any questions it asks, then say "agreed".

You can make this structural, rather than asking

The prompt asks Claude to hold off. Plan mode enforces it. Choose Plan from the mode selector in the Claude app, or the mode indicator in VS Code; in a terminal, press Shift+Tab until the bar at the bottom of the screen says plan mode. Claude will then read, research and write you a plan, but it cannot change any file until you approve it — approving it is what releases it to start. Leave plan mode the same way you entered it. Worth using again at step 4, which also asks for one topic first and then waits.

3

Build the topic map and open the site

prompt
Build the site and the full topic map: every topic and numbered point from the specification, each with its summary and a short "in the exam" note on where the marks usually are. Keep the board's numbering exactly — I'll check it against the PDF. Set up the tests and run them. Then start the site and tell me the address to open on this computer.
[*]

What to expect

Claude will say the site is at http://localhost:3000 or give you a link to open. If Claude Code shows a preview, it appears there; otherwise paste the address into your browser. The first time you open each page it takes a few seconds — that's normal before it's online, and it goes away in Part 2. If Claude asks to download a browser so it can take screenshots, say yes. Progress is kept in this browser, at this address, and will not follow your child to another device until sign-in in step 2.4.

[✓]

What to check

Ask "How many topics and numbered points did you make?" and compare with the PDF's contents. Pick one numbered point at random from the PDF — it should be on the site with the same number.

4

Pitch the content at their level — one topic first, then the rest

Asking Claude to "hide the A* material" would make it invent which content belongs to which grade. This works from question demand in the past papers instead, and does one topic for you to agree before the rest.

prompt
Pitch the whole site at [TARGET GRADE]. This is about depth, not prediction: I want [CHILD'S NAME] working on what is within reach, not being shown material meant for someone two grades above. Do not hide or drop any topic — the specification does not say which content belongs to which grade.

If this qualification has tiers, tell me what each tier covers, and I will tell you which one the school has entered [CHILD'S NAME] for; do not guess.

Work it out from question demand instead, using the past papers and mark schemes you downloaded: the questions and question parts a [TARGET GRADE] candidate must get every time are the standard; the final parts of the longest questions are stretch. [GCSE only: Content the specification marks as Higher-only is stretch for a Foundation target and required for a Higher target. Delete this sentence for A Level.]

For every topic write two lines: "For a [TARGET GRADE] you must be able to…" and "Stretch: …". Do ONE topic first, tell me which past-paper questions you based it on, and wait for me to agree before doing the rest.
[✓]

What to check

The two lines make sense to you, and the past-paper questions it names exist in the papers you can open. Then say "agreed, do the rest", and look at a topic in your browser when it's finished.

5

Ask for what your subject needs

Before the questions get written, not after. Claude will not add audio, diagrams or source extracts unless you ask.

prompt
Before you write any questions: what does [SUBJECT] need that a generic revision site wouldn't have? Look at the past papers you downloaded and tell me what those questions actually put in front of a candidate.

Then add whatever applies: [KEEP THE ONES THAT FIT — spoken audio, and a way to record my child speaking and play it back; diagrams to label or complete; a quotation bank; source extracts, graphs or case studies to work from; a reference sheet of formulae or key terms; anything else you found in the papers.]

Use what's already built into the browser rather than anything I have to pay for or sign up to. If something can't be done well that way, say so plainly and tell me what the honest version looks like instead. Don't approximate it, and don't offer to mark anything you can't really mark.
[✓]

What to check

What it proposes matches what you see when you open a past paper yourself. If it offers to mark speaking or extended writing automatically, say no and ask for a model answer and a checklist instead.

6

Practice questions, marked automatically where they can be

The longest step, so it runs one topic at a time. How much it stops to ask you depends on the permission mode the session is in — shown by the mode selector in the Claude app, or named at the bottom of the screen in a terminal. Recent versions start in auto mode and work through without stopping; in manual mode Claude asks before each command and waits. If it is asking and you are sitting with it, take any offer to stop asking about the testing command.

prompt
Add practice questions for every numbered point, one topic at a time. After each topic, tell me it's done and continue with the next without waiting for me. Every question that can be checked automatically must be. Add a test that proves every question marks its own correct answer as correct — a site that tells a child they're wrong when they're right is worse than no site. Each five-question session should be three or four questions at [TARGET GRADE] level and at most one stretch question, labelled as stretch. Run the tests before you tell me you've finished.
[✓]

What to check

Answer three questions yourself. Type the answer from the worked solution — it must be marked right. Type rubbish — it must be marked wrong. If Claude stopped part-way, paste: "Carry on adding questions where you left off. Tell me which topics are done and which remain."

7

Mark-scheme working in the board's own convention

Mark schemes award marks for method as well as for the answer, so a right answer with no working can still drop marks. A textbook rarely says which step earns which mark; the board's mark schemes do. The bracket in the prompt asks you to name the convention you found back in step 2; if you cannot remember which it was, replace the bracket with "whichever convention the mark schemes you downloaded actually use — check, and tell me which one it is". Claude still has them.

prompt
For every question, show the working the way this board's mark schemes do — [step by step with the mark each step earns / against level descriptors — whichever you found in step 2 of Part 1] — with one line on why each mark is given. Say which marks an answer at [TARGET GRADE] must secure and which it can afford to drop. Add the mistakes the board's examiners' reports say students make on each topic, taken from the reports you downloaded; if you can't find a report for a topic, say so rather than inventing one.
[✓]

What to check

In one worked solution, the marks per step add up to the question's total. The examiner-mistake notes name a year or a paper.

8

Make it easy to come back to

prompt
Now make it the site [CHILD'S NAME] will open every day, not once. Front page: one clear thing to do, opening on whatever topic they practised last. Sessions of five questions with a clear finish. Never use "overdue", "due", "behind" or anything that makes revision sound like a debt. Fold long explanations away behind a tap. Quick on a small screen, readable in light and dark. No analytics, no tracking, no third-party scripts. [ANYTHING ABOUT HOW THEY LEARN, or delete.] Then look at the front page, a topic page and a question at phone width and on a tablet-sized screen, and tell me honestly what still looks wrong.
[✓]

What to check

Hand your child the device they'll actually use, give them five minutes and don't help. Count the taps to the first question: it should be one. Close the browser and reopen it at the same address: same topic. Switch to dark mode: still readable. The second visit to a page should be quick; the first is always slower before Part 2 puts it online.

9

Check the content against the documents

Do this once everything is built, and again every few weeks.

prompt
Go through every piece of content on the site and check it against the documents you downloaded — every claim about what is examined, what is given in the exam, and what a grade needs. List what you found and fixed, naming the page and the document you checked it against. Then add tests that stop the site contradicting itself in future — for example, one page saying a formula is given in the exam and another saying it must be memorised.
[✓]

What to check

The list names specific pages and specific documents.

~

Keeping it going

Short prompts for the ongoing job. Paste one whenever it applies.

prompt
[CHILD'S NAME] found [TOPIC] confusing today. Add a second explanation that comes at it from a different direction, and a quick self-check.
prompt
They're doing [TOPIC] in class this term — make it easy to find from the front page.
prompt
The exam is in [NUMBER] weeks. Suggest a plan, and put a gentle countdown on the front page — no pressure language.
prompt
Add a page where I can see what's been practised this week and which topics are going well.
prompt
Re-check everything on the site against the specification and tell me what you'd change.
prompt
Zip up the site without the installed packages, small enough to copy to a USB stick or a cloud drive. Tell me where it is, and how I'd restore it somewhere else.

That last one matters until you've done Part 2. Until then there is only one copy of everything you've built.

~

If something goes wrong

prompt
Stop any old copies of the site, start it again, and tell me the address to open.
prompt
The site won't start. Here's what it says: [PASTE WHAT YOU SEE]
prompt
The site shows [PASTE WHAT YOU SEE]. Find out why, fix it, then tell me in plain English what happened.
prompt
The tests failed.
prompt
Undo the last change you made.

A more reliable undo

The last prompt asks Claude to undo its own change, which depends on Claude having tracked correctly what it did. There is a surer way: type /rewind, or in a terminal press Escape twice with the message box empty. Claude Code offers to put the files and the conversation back to an earlier point. Reach for it when a change has made things worse and you would rather go back than explain.

Starting a new conversation

Starting a new conversation. Some things carry over on their own: CLAUDE.md is read at the start of every conversation, and Claude Code keeps its own notes between them. The detail of what was built does not — but that is all in the folder. Open Claude Code on that folder and paste this to take stock:

re-entry prompt
Read the site as it stands and tell me what is done and not done from this list:

1. Topic map from the specification, in the board's numbering
2. Site runs and I can open it
3. Pitched at [TARGET GRADE], with "must be able to" and "stretch" lines per topic
4. Whatever this subject needs beyond text — audio, diagrams, quotations, source extracts, a reference sheet
5. Practice questions for every point, auto-marked where possible, with a test that every question marks its own answer correct
6. Mark-scheme working in the board's convention, with examiners' report mistakes
7. Front page opens on the last topic, five-question sessions, no debt language, dark mode
8. Content checked against the specification, with tests against self-contradiction

Then start the site, tell me the address, and carry on from the first thing not done.
~

If you'd rather have paper

Four prompts that turn what Part 1 built into PDFs you can print. If you stop here, Part 2 is unnecessary: nothing goes online, no account is needed, and nothing about your child is stored anywhere but your own computer.

The revision pack

Claude prints to PDF with a headless browser — the one it downloaded for screenshots in step 3 if you let it, or Playwright through npx if not. Nothing is installed globally either way.

prompt
I'd rather have this on paper than as a website. Using the topic map and the "must be able to" and "stretch" lines you've already written, build a revision pack for [CHILD'S NAME] as printable pages: one topic per page where it fits, in the board's own numbering, with the plain-English summary and the "in the exam" note.

Lay it out for A4 paper, not for a screen: black on white, no navigation, and nothing that only works online. Print it to PDF with a headless browser: the one you downloaded for screenshots if you have it, and otherwise Playwright run through npx. Don't install anything globally for this. Put the PDF in a folder called pack and tell me where it is.

Do one topic first and let me look at the PDF before you do the rest.

Worksheets and mark schemes

On paper nothing marks itself. This is the honest replacement: a person marks it, using the board's own convention rather than guessing.

prompt
Now make the practice questions printable. For each topic, one worksheet of questions with room to write, and the mark-scheme working as a separate section at the back — not on the same page, so [CHILD'S NAME] can't see it while working.

Mark the scheme up the way this board does — [step by step with the mark each step earns / against level descriptors — whichever you found in step 2 of Part 1] — so whoever marks it is using the board's convention and not guessing. Say on each worksheet which questions are at [TARGET GRADE] and which are stretch.

Print each one to PDF as before.

Flashcards

prompt
Make printable flashcards for the facts, formulae, definitions and quotations this subject expects to be recalled — only the ones the specification or the mark schemes actually require, not everything you can think of.

Lay them out to print on plain A4 and be cut up, with the question side and the answer side back to back so they line up when printed double-sided. Tell me exactly what to set in the print dialogue for that to work.

The specification checklist

The paper equivalent of a progress page: coverage at a glance, ticked off by hand.

prompt
Make a one- or two-page checklist of every numbered point in the specification, in the board's numbering, each with a tick box and nothing else — no summaries, it has to fit on the wall. So [CHILD'S NAME] can see what's covered and what isn't.

Print it to PDF with the rest.
[✓]

What to check

Print one worksheet and its mark scheme on actual paper. The answers must not be visible on the question page. Work one question yourself and mark it from the scheme: the marks per step add up to the question's total. Check one topic page against the specification PDF — same number, same wording.

Keeping it current

A printed pack goes out of date the moment anything changes. When it does, rebuild it rather than patching it:

prompt
Rebuild the whole pack — revision pages, worksheets, flashcards and checklist — from the site as it stands now, and tell me what changed since the last version.
Part 2 of 2

Online, a domain, and sign-in

Four steps. Each works on its own, and you can stop after any of them. They add, in order: a copy of the site held off your computer with a version history, a public web address, an address you own, and sign-in so progress follows your child between devices.

What each step adds

2.1

GitHub

Free.

A copy of the site that isn't on your computer, and every version kept so anything can be undone.

2.2

Vercel

Free.

A real web address that works on their own device anywhere, and updates itself whenever Claude saves.

2.3

A domain

Costs money.

An address of your own instead of one ending in .vercel.app.

2.4

Sign-in

Free.

Progress follows your child between devices, and more than one child can use the site.

One thing to know before you start. The progress your child has built up on the home address does not travel to the new online one — a browser keeps progress separately for each address. Step 2.4 is what fixes that permanently. If they've done a lot of practice in Part 1, it's worth going straight through to 2.4.

2.1

A safety copy and a history — GitHub

One free account. The site survives a dead laptop, every version is kept, and once 2.2 is done the online site updates itself whenever Claude saves. On a Mac, the first time Claude uses it your computer will offer to install its "command line developer tools": press Install, wait, then tell Claude you're done.

First, in your browser:

  1. 1Create an account at github.com.
  2. 2New repository. Name it revision-site, choose Private, press Create repository.
  3. 3Copy the address of the page you land on.
prompt
Set this folder up on GitHub in my private repository at [PASTE THE ADDRESS], and save everything to it. Walk me through anything you need me to do in the browser, one step at a time; I'll say done after each. Don't save any passwords or keys.

New habit from here on. After any change you want to keep, say "save this to GitHub". That one sentence is what protects your work — and, after the next step, what puts it online.

[✓]

What to check

Refresh the GitHub page: the files are listed, and it says Private next to the name.

2.2

Put it on the internet — Vercel

Free. This is the step that puts the site on a public address.

First, in your browser:

  1. 1Go to vercel.com → Continue with GitHub.
  2. 2Add New Project, find your repository. If Vercel asks for permission to see it, press Install.
  3. 3Deploy. Leave every setting exactly as it is.
  4. 4Wait one to three minutes for a green Ready. The address ends in .vercel.app.
  5. 5Red Error instead? Copy the text of the log and paste it to Claude with "The deployment failed".
prompt
The site is online at [PASTE THE .vercel.app ADDRESS]. Open it and check the front page and a topic page work the same as they do on my computer. Tell me if anything differs.

From now on, every time you say "save this to GitHub", the online site updates itself about two minutes later.

[✓]

What to check

Open the address on your child's own device, away from your home wifi — mobile data, or a friend's wifi. That's the whole point of this step. Add it to their home screen or bookmarks.

2.3

A domain of your own

Optional · costs money. A name like yourchild-maths.co.uk instead of the .vercel.app one. Around £10 a year.

First, in your browser:

  1. 1Buy the domain from any registrar.
  2. 2In Vercel: Settings → Domains → Add, type it in.
  3. 3Vercel shows you what to set at the registrar. Paste that into Claude if you'd like it explained.
prompt
I've bought the domain [DOMAIN] and Vercel is asking me to change settings at the registrar. Here's what it says: [PASTE WHAT VERCEL SHOWS]. Tell me exactly what to type in, in plain English.
[✓]

What to check

The domain opens the site. It can take a few hours. If you do step 2.4 before this one, come back and redo its URL screen afterwards with the new address.

Read before starting

[!]

You'll need a Supabase account (free) and an email-sending service such as Postmark (free tier). Most sending services need an email address on a domain you own — not a Gmail-style address — and new accounts start restricted until approved. Check the current rules before you begin.

[!]

Once sign-in is on, everyone must sign in to the online site. Your child needs an email address they can open on the device they'll be using. School addresses often block outside mail.

[!]

This applies to the online site only. The copy on your computer carries on exactly as before, with its own separate progress.

[!]

Supabase's free projects pause after a period unused. Sign-in then fails until you press Restore in the Supabase dashboard. This will happen during a school holiday.

Why this is safe. The first paragraph of the prompt sets rules for the whole project. Keys are like passwords for the database. One of them — the "anon" or "publishable" key — is designed to be public, and is the only one that goes anywhere. The "service role" key can read everything and is never needed; if anything ever asks for it, something is wrong. What actually protects your child's data is a database rule that each account can only see its own rows, and the prompt asks Claude to prove that with a test.

2.4

Sign-in, so progress follows them

The fiddliest step, and the only one that makes progress follow your child between devices or lets more than one child use the site.

Claude will walk you through these, in this order. Type done after each.

  1. 1Paste the database setup Claude gives you into Supabase's SQL Editor and run it.
  2. 2Authentication → Emails → SMTP Settings: your email sender's details. Supabase's own sender is rate-limited to a handful of emails an hour — check the current figure on the screen — which is why this is needed. The sender's token is typed into this screen and nowhere else.
  3. 3Authentication → Rate Limits: raise the email limit. Setting up the sender does not lift it on its own.
  4. 4Authentication → URL Configuration: your online address — copy it from the browser's address bar rather than typing it — as the Site URL and as a redirect URL. If you've done step 2.3, add the domain as well.
  5. 5Edit the sign-in email template to the address Claude gives you. This is what makes a link requested on one device work when it's opened on another.
  6. 6Two public values — Supabase → Project Settings → API (the key is labelled "anon" in older projects and "publishable" in newer ones) — go into Vercel → Settings → Environment Variables. Then Deployments → … → Redeploy. They do nothing until the site is rebuilt.
prompt
Rules for the whole project: never put any secret key in the code, in a file, or in this chat. The only Supabase key that goes anywhere is the public one the dashboard calls "anon" or "publishable" — it is designed to be public. The "service role" key is never needed; if something seems to need it, that is a mistake. The data must be protected by row-level security so one child can never see another's progress, and I want a test that proves it.

Add sign-in by email link (no passwords) with Supabase, for the online site only — the copy on my computer should keep working as it does now. Walk me through the Supabase dashboard one screen at a time; I'll type "done" after each.
[✓]

What to check

Yours, not Claude's. On the computer, open the online address and request a sign-in link. Open the email on the device they'll use: it must work. Sign in with two different email addresses and confirm each sees only its own progress. Ask Claude "What is the name of the test that proves one account cannot read another's?" — it should exist and pass.

Then

prompt
Sign-in is set up and the site has been redeployed. Add a page that says in plain English exactly what is stored — name every field, including the answers themselves and the scores, not a summary — and says that whoever administers the database can read all of it. Add a "Delete my data" control on every page that removes it immediately without asking anyone. Then save this to GitHub.

These rules matter more than any others in the guide, and the prompt above sets them for one conversation only. Put them in the file as well:

prompt
Add these rules to CLAUDE.md: never put any secret key in the code, in a file, or in this chat. The only Supabase key that goes anywhere is the public one labelled "anon" or "publishable". The "service role" key is never needed, and if something seems to need it, that is a mistake.

If something goes wrong online

prompt
The deployment failed. Here is the log: [PASTE THE LOG]
prompt
The online site is showing [PASTE WHAT YOU SEE] but it works on my computer. Find out why.

Then, once the fix is working, save it the way you save anything else:

prompt
Save this to GitHub.

Sign-in stopped working after a quiet spell? Open the Supabase dashboard. If the project says Paused, press Restore. It works again within a minute or two. No prompt needed.

~

A note on your child's data

In Part 1, and online before you add sign-in, nothing leaves the device. Progress is kept in that browser, at that address, and no one — including you — can see it from anywhere else. Clear the browser's data and the progress is gone; the site is not.

With sign-in, more is stored than you might expect: an email address, every answer given, whether it was right, how long it took, and the score for each session. That is what makes the progress pages work.

Signed in, each account can only read its own rows — one child can never see another's. You are the exception. You set up the database, so you can read all of it from the Supabase dashboard: every answer, every score. That is worth deciding on deliberately, and worth telling your child, rather than discovering later. Deleting it is a button on every page.

If your child is under 18, whether they sign up with their own email address is your call as the parent.

Written from building mathsalevel.ai for one student. The example values throughout — Pearson Edexcel, A Level Mathematics, 9MA0, grade B — are that project's real ones. Everything else is yours to fill in.