Devlog: getting ready to ship

Spent this session getting everything ready to ship. Turns out “it works on my machine” and “a random person can actually try it” are super different things lol.

Free preview so people can actually try it

Biggest problem was the whole site was locked behind a login. If someone clicked the link they just hit a sign in wall, which is basically the fastest way to make people leave. So I made the first two lessons (Unit 1 lesson 1 and 1.2) totally free, no account needed.

Now if your signed out:

• The homepage loads like normal instead of throwing you to the login page
• The free lessons open up so you can read them, run real Python in the browser, and take the quiz
• Every other lesson has a little lock icon and sends you to login
• Save and Check still ask you to sign in since those need an account (progress and the AI grading are tied to your user)

Best part is running code and the quizzes already worked without an account, so the free preview actually feels real and not just a teaser. Pretty happy with how that turned out.

Lock icons on the homepage

Added some logic so signed out people see a lock on the lessons they cant open yet, plus a “Free preview, sign in to unlock all lessons” message at the top. The free ones keep the normal arrow so its obvious which ones you can actually click.

Fixed the README

My old README was kinda lying at this point lol. It said “no server needed” and “all your data stays locally” which used to be true but isnt anymore now that I got Supabase doing accounts, progress syncing, and AI grading. So I rewrote the whole thing to actually match what the project does, threw the live demo link right at the top, and explained how the free preview works.

What I checked

• Made sure my OpenAI key never got committed (its gitignored and the grading function reads it server side only)
• Tested the signed out flow in an incognito window so I could see exactly what a new visitor sees

Feeling really good about where its at now. Basically just doing one last check over everything before I actually ship it!!!

Deleted 24,000 Lines, Added a Python IDE, and Made AI Grade Your Code

Big update.

Since last time, the site went from 27 copy-pasted lesson pages to one dynamic page, got a real Python editor that runs in the browser, and now has an AI that checks your practice answers and gives you hints.

The Great Deletion

Every lesson used to be its own 907-line HTML file. 27 of them. All basically identical.

Changing one button meant changing it 27 times, which I was obviously never going to do.

So I merged them into one lesson.html that reads ?unit=2&lesson=3 from the URL and imports that lesson’s data.js dynamically.

29 files changed, 25 insertions(+), 24498 deletions(-)

Deleted 24,498 lines! Best commit ever.

The IDE

Next, I replaced the static code examples with an actual editor (CodeMirror) plus Python running in the browser through Pyodide.

No server, because the code runs on your own machine.

Then I added it to the practice questions too: every question gets its own mini IDE with Run + Save, and saves go to Supabase so your code is still there when you come back.

This took way more bug fixing than expected. There was a cursed '\n' error, the editor kept breaking when switching themes, and long lines ran off the screen until I added line wrapping.

Like 5 commits of just fixing the editor (help me).

The AI Checker

The big one. There is now a Check button next to Run that has gpt-4o-mini grade your code:

✗ Almost! Your scoreboard only prints one player.
  Hint: you need a second print() line for the second player.

The site is fully static, so I couldn’t just put an API key in the frontend (the whole internet would spend my credits).

Instead, the code and its output get sent to a Supabase Edge Function, which hides the key, checks that you’re logged in, and asks OpenAI for a strict JSON verdict: passed, feedback, hint.

I compared Gemini and Ollama first, but went with OpenAI because I have $5 of credits left from a previous grant.

And since I don’t want to overuse my credits: 5 checks per minute and 500 per day per user, 1,400 per day for the whole app.

Next up: grading notes per question so the AI knows exactly what each task wants, and maybe an admin dashboard to watch usage.

Progress now saves to the cloud!!!

Ripped out localStorage and replaced it with Supabase so lesson completions are now tied to your account, not your browser. You can now sign in on any device and your progress is tracked there too.

I had to change 30 DIFFERENT FILES JUST TO ADD THIS, but hey its working properly now and its another BIG step towards making a full learning platform…you guys can now try it!!!!!!!

JUST ADDED UNITS 4, 5, 6, AND 7!!!!!!!!!

The course is officially 27 lessons in total. I also made an actual home page that lists every unit and lesson so it’s easier to use the course without having to open tons of random files.

My favorite part of everything was adding the lesson completion tracking. Basically each lesson has a “Mark as complete” button which then saves everything to a localStorage. No backend needed (thank god).. Also the homepage now shows all the finished lessons in green, and also has an overall progress bar showing how far someone is through all 27 lessons.

I MAY have spent way too much time trying to figure out why it kept showing an Error 404 when clicking through different lessons. I checked the JS, checked all the paths, and then rewrote all the href logic. Turns out a browser can’t handle spaces in folder names over file://. I just wrapped the path in encodeURI(). MAY have spent an hour tryna debug this but it works so yayyaya!!!

Gonna deploy to GitHub Pages so it’s a real URL, add a quiz score tracker so students can see how they’re doing across the whole course, and maybe create an account system so people can track everything, but its not fixed yet so keep looking

JUST FINISHED UNIT 3 AND MADE A PROPER README!!!!!!!!!

Just finished all 4 lessons for unit 3 today:

• comparisons and booleans
• if/else
• elif chains
• combining conditions with and/or/not

Each one is fully complete with a goal, explanation, an example code, practice questions, a quiz, and a project. the projects are actually pretty fun (BMI calculator, theme park entry checker, and even more…you should check the repo out frfr)

Also just added a full README to show the entire course, what it covers, what each lesson has, how the file system works, and a full breakdown of every single unit, every lesson, and every project.

Right now the course is sitting at 7 units, 27 lessons, 27 projects and 54 practice tasks total. Just finished unit 3, FOUR MORE TO GO!!!

JUST FINISHED UNIT TWO!!! also organized the files into a data.js file and a lesson.html file for each lesson. check my github for the latest updatesssssss

JUST CREATED UNIT ONE!!!!!! just some basic print(), input(), different variables, and casting

Just created the entire lesson plan for my course and JUST LEARNED HOW TO USE FIGMA!!!! I’m lowk just used Figma for the website design