Setup Guide

Download and unzip the project

Download trading-academy.zip (383 KB) from the workspace of the conversation where this was built — click the file, then the download button.

• macOS: double-click the .zip. A trading-academy folder appears next to it.
• Windows: right-click the .zip → Extract All… → Extract. Open the extracted folder; if you see another trading-academy folder inside it, that inner one is the real project folder.

Now drag that folder somewhere permanent and easy to type. The Desktop is perfectly fine:

This folder is "the project folder" that the rest of this guide refers to. Avoid leaving it inside Downloads (easy to lose) or in iCloud/OneDrive folders that sync and lock files.

Check you have the right folder

Open it. You should see exactly this:

Quick proof it is in the right place: double-click index.html. The app should open in your browser with an orange DEMO MODE banner, and student@demo.school / demo1234 should sign in. If that works, your folder is fine and you can start at section 1.

How to open a terminal inside that folder

You only need this for step 13 (testing locally). If you would rather skip it, you can go straight from section 5 to section 10, put the site online first, and do all your testing on the live URL.

Confirm you are in the right place by listing the files — type ls on macOS or dir on Windows. You should see index.html in the output. If you do not, you are in the wrong folder and every command after this will fail.

Sign up

Go to supabase.com and click Start your project (top right). Sign in with GitHub or with an email address. The free plan needs no payment details.

Create the project

On the dashboard click New project.

• Name — anything, e.g. trading-academy.
• Database Password — click Generate a password and save it in a password manager. This password never goes into the app. You will need it only if you ever connect with a SQL client.
• Region — pick the one closest to your students. It affects page speed.
• Plan — Free.

Click Create new project and wait roughly two minutes while it provisions.

Open the SQL Editor

In the left sidebar of your project click SQL Editor (the icon that looks like a terminal prompt). Then click New query at the top of the panel.

Paste and run supabase/schema.sql

Open supabase/schema.sql — that is the supabase sub-folder inside the project folder you unzipped in section 0 — in a text editor, select everything (Ctrl+A / Cmd+A), copy it, paste it into the SQL editor and click Run (bottom right, or Ctrl+Enter).

It takes a few seconds. You should see Success. No rows returned. The script is idempotent: running it a second time is harmless.

This one file creates everything: 21 tables, 7 enum types, the authorisation helper functions, the guard triggers, Row Level Security on every table with 47 policies, 10 RPC functions, and a least-privilege grant block that strips all table access from anonymous visitors.

Paste and run supabase/schema-math.sql

This step is not optional. It creates the three tables the mathematics side of the app writes to. If you skip it, every maths page still loads and the practice problems still work, but nothing a student does is saved — the browser queues the attempts and keeps retrying against tables that do not exist.

Same routine as the previous step: New query → paste the whole of supabase/schema-math.sql → Run. It is safe to run twice.

The output panel ends with a NOTICE that must read:

LearnAurelle math schema: 3 / 3 tables, 8 / 8 policies, 5 / 5 functions

What it adds:

• math_skill_progress — one row per student per skill: attempts, correct, current streak, best streak, time spent, and when the skill was mastered.
• math_attempts — an append-only log of every item attempted, including the generator seed, so you can reproduce the exact question a student was shown. There is deliberately no update or delete policy on this table.
• math_unit_state — which units a student has opened.

Confirm RLS is on

Paste this into a new query and run it:

select count(*) filter (where rowsecurity) as tables_with_rls,
       count(*)                            as tables_total
  from pg_tables where schemaname = 'public';

Both numbers must be 24 — the original 21 tables plus the three added by schema-math.sql. If tables_with_rls is lower, a schema file did not finish — scroll up in the editor output for the error and re-run it.

Run supabase/seed_curriculum.sql

Exactly the same copy-paste routine as step 4, with the other file: New query → paste the whole of supabase/seed_curriculum.sql → Run. The final row must read 36 | 36 | 0: thirty-six lessons, thirty-six answer keys, none missing.

This is what makes graded quizzes trustworthy. The correct answers live in lesson_answer_keys, which has RLS enabled and no read policy for students at all. When a student submits a graded quiz the browser sends only their chosen option numbers; public.submit_quiz() compares them inside the database and returns the score. A student who reads every line of JavaScript this app serves still cannot obtain the key.

Turn off email confirmation while you are testing

Left sidebar → Authentication → Sign In / Providers → Email. Switch Confirm email off and click Save.

Set the site URL

Authentication → URL Configuration.

• Site URL — where the app will actually live, e.g. https://your-project.pages.dev. While testing locally use http://localhost:8080.
• Redirect URLs — click Add URL and add both your local address and your deployed address, each with /reset.html on the end. Password reset links will not work until these are listed.

Optional: restrict signups to your school's domain

If every student has an address at the same domain, you can block everyone else. Authentication → Sign In / Providers → Email → Allowed email domains. This is the cheapest way to stop strangers creating accounts in your school.

Copy the two public values

The fastest way to get both at once: open your project and click the Connect button in the bar across the top of the page (next to the project name). The dialog that opens shows the Project URL and the publishable key together, with a copy button on each.

Supabase splits these two values across two different pages, so if you prefer the settings screens:

• Project URL — left sidebar Integrations → Data API. It is the field labelled Project URL / API URL.
  On older dashboards this lived at Project Settings (gear icon, bottom of the sidebar) → API, on the same page as the keys. Both old links still redirect.
• Publishable key — Project Settings (gear icon) → API Keys.

Edit js/config.js

window.LA_CONFIG = {
  SUPABASE_URL: "https://abcdefgh.supabase.co",
  SUPABASE_PUBLISHABLE_KEY: "sb_publishable_xxxxxxxxxxxxxxxxxxxx",

  APP_NAME:    "LearnAurelle",
  SCHOOL_NAME: "Your School Name",
  ...
};

Save the file and reload the app. The orange DEMO MODE banner disappears — that is how you know it is talking to your real project.

This file is safe to commit to a public repository. Those two values are meant to be in a browser; your data is protected by the RLS policies, not by hiding the key.

Serve the folder

Opening index.html straight from disk works for a quick look, but real authentication behaves better over HTTP. Open a terminal inside the project folder (section 0, step C) and run one of these:

The terminal will print something like Serving HTTP on 0.0.0.0 port 8080 and then appear to hang. That is correct — it is the server running. Leave that window open and switch to your browser:

http://localhost:8080

When you are finished, press Ctrl+C in the terminal to stop it.

Create your own account

Click Get started → the Create account tab. Enter your name, your email and a password of at least eight characters, tick the acknowledgement and submit.

Notice what you are not offered: there is no role selector. Everyone who signs up through the public form becomes a pending student with no school attached. There is no way to register as a teacher or an administrator, and no hard-coded administrator password exists anywhere in this project.

Confirm the profile row exists

Supabase dashboard → Table Editor → profiles. Your row should be there with role = student and status = pending, created automatically by the handle_new_user trigger.

Run the bootstrap function once

SQL Editor → new query → substitute your own address:

select public.bootstrap_first_admin('you@yourschool.org');

A successful run returns: OK: you@yourschool.org is now an administrator of LearnAurelle.

You can also pass a school name and slug:

select public.bootstrap_first_admin(
  'you@yourschool.org', 'Riverside High School', 'riverside');

Sign out and back in. You now land on the School Dashboard.

update public.schools
   set name = 'LearnAurelle', slug = 'learnaurelle'
 where slug = 'tradedesk';

Optional: load the sample classes

Run supabase/seed.sql in the SQL editor. It creates three classes with working join codes, nine assignments covering every activity type, and some announcements. It never creates user accounts — those have to come from real signups. It is safe to run more than once.

Invite a teacher

In the app: Users → Invite teacher/admin. Enter their email and choose Teacher. If they have already signed up they are promoted immediately; if not, the invitation applies the moment they register with that address.

Every role change is recorded in Audit Logs, including yours.

Create a class

Classes → Create class. Give it a name and pick a lead teacher. A teacher who is not listed on a class cannot see it at all — that is checked by public.is_class_teacher() inside every relevant policy, not by hiding buttons.

Enrol students — two ways

• You add them: open the class → Enroll students → tick names → Save.
• They add themselves: open the class → Join code → Generate code. Give students the seven-character code; they enter it under My Classes → Join a class with a code.

Codes are validated in the database by public.join_class_with_code(), which also checks that the code has not been revoked. Press Rotate code and the old one stops working for everybody instantly; students already enrolled are unaffected.

Approve pending signups

A brand-new account has no school until you approve it. Users → Approve next to their name. Until then they can read the Learning Academy but see no class work.

Approving does two things in a single database write: it sets the person's school_id to your school and flips status from pending to active. Both halves matter — see the warning below.

Where to find people waiting: the Overview page shows an amber "N accounts awaiting approval" banner, and Users → Any status → Pending lists them. A person with no school is also tagged not in a school yet under their name.

-- who is stranded?
select id, email, full_name, role, status
from public.profiles
where school_id is null and status <> 'pending';

-- put them back in the approval queue, then click Approve in the app
update public.profiles set status = 'pending'
where school_id is null and status = 'active';

As the teacher: create an assignment

Create Assignment → Open the assignment form. Set a title, class, points and due date. Add rubric criteria if you want criterion-level marking. Pick an activity type — Lesson quiz is auto-graded by the database; the rest are graded by you.

Save it as a draft first if you like: students never see drafts. Click Publish now when it is ready.

To target only some students, open the assignment and use Assign to…. Students who are not targeted cannot load it even if they guess the address.

As the student: submit

Assignments → open it → type an answer → Save draft (drafts live in the database, so they follow the student to any device and auto-save every 25 seconds) → Submit.

As the teacher: grade and release

Submissions → Grade. The student's work is on the left, the marking form on the right. Enter rubric scores (the total fills in automatically), write private feedback, and choose:

• Save without releasing — recorded, invisible to the student.
• Save & release — the student can now see the score and feedback.

A held-back grade is marked with an asterisk in the gradebook. Unreleased grades are invisible to students at the database level: the students' SELECT policy on grades includes and is_released, so the row is never sent to their browser.

Check the student side

Sign in as the student and open Grades & Feedback. The released grade, the percentage, the letter and the written feedback are all there. The Export CSV button downloads it.

Create a free account at dash.cloudflare.com. In the sidebar choose Workers & Pages → Create → the Pages tab → Upload assets. Give the project a name — learnaurelle is fine — then drag the learnaurelle-site folder onto the upload area and click Deploy site.

This is the moment your files leave your computer — the folder is copied to Cloudflare's servers, and that copy is what the world sees. Supabase is untouched by this; it has been holding your database the whole time.

You get a URL like https://learnaurelle.pages.dev.

To publish a change later, return to the same project and choose Create a new deployment, then drag the folder again. The new upload replaces the old one.

Push the folder to a GitHub repository, then in Cloudflare choose Workers & Pages → Create → Pages → Connect to Git, pick the repository and leave the build settings empty:

Click Save and Deploy. Every future git push redeploys automatically.

Deploy first using Option A or B above, so you have a working something.pages.dev address. Then:

1. In Cloudflare: Workers & Pages → your project → Custom domains → Set up a domain.
2. Type academy.yourdomain.com → Continue.
3. Cloudflare shows you the record to create. Go to your current DNS provider (wherever you bought the domain) and add it:

   Type	Name / Host	Value / Points to	TTL
   CNAME	academy	your-project.pages.dev	Auto / 3600

   Most registrars want just academy in the Name field, not the full academy.yourdomain.com — they append the domain for you.
4. Back in Cloudflare, wait for the status to turn Active. The HTTPS certificate is issued automatically and free. DNS can take anywhere from two minutes to a few hours.

Add the domain to Cloudflare as a zone: in the dashboard click Add a domain, enter yourdomain.com, choose the Free plan, and let Cloudflare scan your existing DNS records. Then change the nameservers at your registrar to the two Cloudflare gives you. Once the zone is active, go to your Pages project → Custom domains → Set up a domain → enter yourdomain.com, and Cloudflare writes the record itself.

If you want the bare domain but will not move DNS, GitHub Pages handles apex with ordinary A records. Push the project to a public GitHub repository, then repository Settings → Pages → set the source branch, and under Custom domain enter yourdomain.com and save. At your DNS provider add these four A records, all with the name @:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Then tick Enforce HTTPS in the same GitHub settings page — it can take up to 24 hours to become available while the certificate is issued. GitHub Pages is free with a 1 GB site limit and a soft 100 GB/month bandwidth limit, both far beyond what this app uses.

Point Supabase at the final address — do not skip this

Supabase has to be told which address your app lives at, or email confirmation links and password resets will quietly fail. Go to Authentication → URL Configuration.

The trailing /** is a wildcard that covers every page on that address, so you do not have to list /reset.html and the rest one by one. Listing an address that is not live yet is harmless. Password resets fail silently when this is wrong, so test one reset after changing it.

On a phone, open the deployed URL and sign in as the student account. You should see the same classes, the same drafts and the same grades you saw on the desktop — because the data lives in Postgres, not in the browser. That is the actual test of whether the app is really multi-user.

Things worth checking on a phone:

• The hamburger menu opens the sidebar and closes it after you pick a page.
• Charts resize to the screen and respond to touch (drag across one to move the crosshair).
• A draft saved on the desktop appears in the textarea on the phone.
• Sign in as the teacher on a second device and release a grade — reload the student's phone and it appears.