Lesson 1 of 5
What you're shipping today
What this course does, what you need, and how to pick a domain name.
By the end of this course your app will be live on the internet at a URL you own — something like yourname.com or notes.yourdomain.com. Anyone with the link can open it. No localhost. No "can you check my screen share?" No emailing yourself a file.
The route there has four steps:
Lesson 2 Push your code to GitHub
Lesson 3 Deploy to Vercel → get a free *.vercel.app URL
Lesson 4 Buy a domain on Namecheap
Lesson 5 Point your domain at Vercel → live on your own URL
This course picks up where Mac Setup leaves off. It assumes you've finished the Mac Setup for Vibe Coding course — meaning you have Homebrew, Node.js, Git, the GitHub CLI, and a coding AI installed, and you ran gh auth login in that course's setup orchestrator. If any of that's missing, go back and finish Setup first.
What this costs
| Item | Cost |
|---|---|
| GitHub | Free |
| Vercel (Hobby plan) | Free, indefinitely for personal projects |
| Domain on Namecheap | ~$10–15/year for a .com (see current pricing) |
The domain is the only real expense. If you already own one somewhere else (GoDaddy, Google Domains, etc.), you can use it — the last lesson covers the same nameserver approach, the panels just look slightly different.
What you're shipping
This course uses the personal notes app from Mac Setup Lesson 7. It's a React app that saves notes in your browser — no database, no backend.
Don't have it? If you didn't save or commit the notes app, use the prompt below to rebuild an equivalent one in about 5 minutes before continuing. Open your AI CLI in a new project folder, run the prompt, and come back here when the app is running locally.
I am a non-technical Mac user. Please explain every command in plain English before running it.
Build me a personal notes app as a web application. Requirements:
- I can write and save text notes
- Notes are saved automatically (no save button needed)
- Each note has a title and a body
- I can see a list of all my notes on the left, and the full note on the right
- I can delete notes I no longer need
- Everything saves in the browser (localStorage, no database or accounts required)
- The design should be clean and professional — nothing flashy
Use React with Vite. When it's done, start a local development server and tell me how to view it in my browser.
Any project works. If you built something other than the notes app in the Mac Setup course, use that instead. Vercel handles any framework — or even plain HTML. The screenshots in this course show the notes app, but the steps are identical.
Choose your domain name now
You won't buy the domain until Lesson 4, but think about it now so you're not stuck waiting mid-course.
A few constraints:
- Keep it short. You'll type and say it out loud. Fewer syllables win.
- Stick to
.comfor a first domain. It's what people expect and type automatically. - Avoid hyphens.
my-notes-app.comis hard to say and looks cheap. - Check it's available. Go to namecheap.com and search. If your first choice is taken, add a word (
app,hq,co) rather than swapping the TLD to.netor.io.
Write it down. You'll paste it into the Namecheap search bar in Lesson 4.
The next lesson pushes your project to GitHub so Vercel can find it.