Ms Ngo Bla — Student Quiz App

A Next.js + Supabase app where students create an account, take quizzes (multiple choice, true/false, fill-in-the-blank, sentence completion, matching), get graded instantly with explanations, and can look back at their result history.

This was hand-written in an environment without package-manager access, so it has not been run or compiled yet. The steps below get it running without needing Node.js on your own computer at all — GitHub + Vercel do the installing and building for you.

1. Push this folder to GitHub

Using GitHub Desktop (free, no command line):

1. Install GitHub Desktop and sign in with your GitHub account.
2. File → Add local repository → pick this folder.
3. If it asks to initialize a repository, say yes.
4. Write a commit summary (e.g. "Initial version") → Commit to main.
5. Click Publish repository (top bar). Choose a name (e.g. ms-ngo-bla-lms) and whether it's public or private — private is fine.

2. Create a Supabase project (the database + student accounts)

1. Go to supabase.com → sign up → New project. Pick a database password and a region close to Vietnam (Singapore is usually fastest).
2. Once it's ready, open SQL Editor → New query, paste the entire contents of supabase/schema.sql, and click Run.
3. Do the same with supabase/seed.sql — this adds one sample quiz ("Vocabulary Builders — Unit 1 Check") so there's something to test.
4. Go to Project Settings → API and copy two values: Project URL and the anon public key. You'll need both in the next step.

3. Deploy on Vercel

1. Go to vercel.com → sign up (choose "Continue with GitHub" so it can see your repositories).
2. Add New → Project → pick the ms-ngo-bla-lms repo you published.
3. Before clicking Deploy, open Environment Variables and add:
   • NEXT_PUBLIC_SUPABASE_URL = the Project URL from step 2.4
   • NEXT_PUBLIC_SUPABASE_ANON_KEY = the anon public key from step 2.4
4. Click Deploy. After a minute or two you'll get a live link like https://ms-ngo-bla-lms.vercel.app.

That link is a real, working site: anyone can sign up, log in, take the sample quiz, and see their score and history.

Update: "Featured courses" on the homepage

The homepage now shows three course cards — Vocabulary Builder, IELTS Preparation, Writing Courses — matching what was planned at the start. Since your Supabase project and Vercel site are already set up, do these two things to pick up the update (order matters — do the database step first):

1. Database: In Supabase → SQL Editor → New query, paste the contents of supabase/migration_002_add_category.sql and click Run. This adds the new category column and tags the existing sample quiz as "vocabulary" so it shows up under the Vocabulary Builder card. (Skip this step only if you are setting up Supabase for the very first time — schema.sql and seed.sql already include this for a fresh project.)
2. Code: In GitHub Desktop, you'll see the changed files listed. Write a commit summary (e.g. "Add featured courses to homepage") → Commit to main → Push origin. Vercel picks this up automatically and redeploys in a minute or two.

Once both are done, signed-in students who click a course card go to /quizzes filtered to that course. IELTS Preparation and Writing Courses will show "Coming soon" until quizzes are added under those categories (see the next section) — only Vocabulary Builder has a quiz so far.

Update: Admin area

There's now an admin area at /admin (there's also an "Admin" link in the top nav once you're signed in as an admin) where you can create/edit/delete quizzes and questions through a normal web form instead of writing SQL, see every student's results, and promote other accounts to admin. Since your project is already live, do these in order:

1. Database: In Supabase → SQL Editor → New query, paste the contents of supabase/migration_003_admin.sql and click Run. (Skip this only on a brand-new project — schema.sql already includes it.)
2. Code: In GitHub Desktop: write a commit summary (e.g. "Add admin area") → Commit to main → Push origin. Vercel redeploys automatically.
3. Make yourself admin. First sign up / log in on the live site with your own email if you haven't already. Then, back in Supabase's SQL Editor, run (with your real email):

   update public.profiles set role = 'admin' where email = '[email protected]';
   

4. Refresh the site and log in with that account — you'll see an Admin link in the top nav. From there:
   • Quizzes — create a quiz (title, description, level, which homepage course it belongs to, published or draft), then add its questions one at a time with a form that adapts to the question type (options for multiple choice, accepted answers for fill-in-the-blank, pairs for matching, etc). Edit or delete either at any time.
   • Results — every student's attempts across every quiz, most recent first.
   • Students — everyone who has signed up, with a dropdown to change their role (student / teacher / admin). Promote a co-teacher the same way you promoted yourself in step 3, just from the browser this time.

The old way — inserting rows directly in Supabase's SQL Editor, following the pattern in supabase/seed.sql — still works too and schema.sql still documents the exact shape of questions.data per question type, in case you ever want to bulk-load quizzes that way instead.

This is the beginning of the README. Read the rest at the original. Read the full README ↗