This course is one project, built for real. By the end of this level you will have a habit tracker running on the internet at a link you can send to someone, and you will have built it the way it is built in practice: one small turn with an AI agent at a time, each one checked and committed.
What you are building
A single web page. You type a habit, it appears in a list. Each habit gets a row of seven checkboxes, one for each of the last seven days, and a count of how many days in a row you have kept it up. Close the tab, come back tomorrow, and it is all still there.
The finished version is live at funfactorydev.github.io/habit-tracker-with-an-ai-agent. Open it, add a habit, tick a day. That is the whole product.
The code is public too, in the habit-tracker-with-an-ai-agent repository. It has one commit per step, and every lesson in this level links to the commit for the step it describes. The reference commits were recorded in one pass after the finished build was checked, so read them as checkpoints you can compare against, not as a log of a timed session.
Your code will not match ours
Every lesson shows a prompt that produces each step. Give the same prompt to your agent and you will get different code — a different tool, a different model, or the same model on a different day. That is expected. What has to match is the behaviour, and every step ends with a check you can run yourself.
Why this project
It is small enough to finish in an evening and real enough to use every day. It also has no server, and that choice does most of the work.
No server means nothing to pay for, nothing to keep patched, no database to secure, no keys to leak. Publishing it is putting three files online. The only thing you give up is sync between devices, which is a fine thing to give up in a first project.
The habits are saved with localStorage: a small storage area the browser keeps for each site. It holds text, it stays until you clear it or the browser does, and it never leaves the device. Four consequences worth knowing before you start:
- Your habits live in one browser on one device. Open the page on your phone and the list is empty.
- Clearing your browser data deletes them. In a private window they are gone when the last private tab closes.
- Safari deletes a site’s stored data after about a week of using Safari without visiting that site. Skip a week and the list starts empty. A page added to the home screen is the exception.
- Each site gets its own storage. The copy you open from your own folder and the published copy do not see each other’s habits.
Quick check
You add habits on your laptop, then open the same page on your phone. What do you see?
What you need
- An AI coding agent that can work on a folder on your computer. Any of them will do: the prompts here are plain English and assume nothing about the tool. The lessons and GitHub Pages are free; the agent may not be, since some need a paid plan or an API key. Which AI Coding Tool? compares them and helps you choose.
- A browser. It is also your test runner.
- Git, for the checkpoints. If commits are new to you, Terminal Basics covers them in the browser.
- A free GitHub account, for the last lesson, where the page goes online.
One sentence, two lists
Before the first line of code, write down what you are building. Not a specification, just three things:
- One sentence. A single web page where you tick off your daily habits and see your streak, saved in your own browser.
- What it does. Add a habit, tick off today or a day you forgot, see the streak, delete a habit, remember everything after you close the tab.
- What it does not do. No accounts or sync, no server, no reminders, no charts, nothing beyond the last seven days, no renaming, and no build step, framework or packages.
That third list is the one that saves the project. Halfway through, the agent will offer to add reminders, or charts, or a login so you can sync. Each one sounds reasonable. Each one would double the size of what you have to review. The list lets you say no in one line. The same idea is taught on a different project in Scoping something small enough to finish.
Step 1: the scope, as a file
The first prompt asks for no code at all:
I want to build a habit tracker: a single web page where I tick off daily habits and see my streak, saved in my own browser. Before any code, write a README.md with that one sentence, a short list of what it does, and a “Not in this version” list: no accounts or sync, no server, no reminders, no charts, no history beyond the last seven days, no renaming habits, and no build step, framework or packages — plain HTML, CSS and JavaScript only.
Then the rhythm you will repeat after every step:
- Run it. Here there is nothing to run, so read the README instead. Does it say what you meant?
- Read the diff. One new file. Did the agent quietly add a feature to the “what it does” list? Take it out.
- Commit it.
Checkpoint: step 1 in the reference repository is exactly this README and nothing else.
Your turn. In the terminal below, make the project folder, put the one sentence into a README, and commit it before any code exists. The simulator only gives you a one-line README; on your own machine, the agent writes the full one.
Why commit a README
The first commit is the safety net for every turn that follows. From here on, a turn that makes things worse is one command away from undone, and that is what makes it cheap to let the agent try things.
Can I build something other than a habit tracker?
Yes, and you should for your second project. For the first one, following a project that is already finished lets you compare every step against a version that works, which is the fastest way to learn what a good turn looks like.
Which AI coding agent should I use for this?
Any agent that can read and write files in a folder on your computer. The prompts are plain English and do not rely on a feature of one particular tool.
Do I need to know JavaScript?
No. You need to run the page after every step and read the diff for the few things each lesson points out. Knowing a little helps, and this project is a good place to pick some up.