The App You Will Ship
In Part 1 you put a project on GitHub. In this part you turn it into a small public app with three features:
- Sign-in. A visitor creates an account and logs in.
- Saved data. Each signed-in user can save short notes that only they can see.
- An AI feature. A button sends a note to an AI model and shows a summary.
Your AI assistant writes the code. Your job is to understand each part, check it, and make good decisions. To do that, you first need to know which service does which job.
Four Services, Four Jobs
In Level 1 you learned that a domain points to an address, DNS looks that address up, HTTPS encrypts the connection, and an app has a front end (code that runs in the browser) and server-side code (code that runs on a computer you control). Each service below covers one part of that path.
| Service | Job in the app | Analogy | One alternative |
|---|---|---|---|
| Vercel | Hosting. It takes your GitHub code, builds it, serves the front end and runs your server-side functions. | The shop building | Netlify |
| Supabase | Database, user sign-in and file storage, all hosted for you. | The filing cabinet and the front-desk ID check | Firebase |
| Cloudflare | Your domain name, DNS, and protection from attacks and floods of traffic. It also offers Workers (small server-side programs) and R2 (file storage). | The street address and the security guard | Fastly |
| OpenRouter | An AI gateway: one account and one key give you access to many AI models from different providers. | A phone switchboard that connects you to many experts | Calling a provider such as OpenAI or Anthropic directly |
The course works with any vendor. The skills you learn here (hosting, databases, DNS, keys) carry over to the alternatives.
Do now: copy the table into your notes. Next to each service, add one sentence in your own words about what it does.
Compare the Free Tiers, With a Date
A free tier is the amount of a service you can use without paying. Its limits are the caps, for example how much data you can store. Vendors change these often, so a number is only reliable alongside the date you read it.
Here are the figures from each official pricing page, checked on 31 October 2026:
- Vercel Hobby plan ($0): for personal, non-commercial use only. Includes 100 GB of Fast Data Transfer and 1 million function invocations per month. Pro costs $20 a month.
- Supabase Free plan: 2 active projects, a 500 MB database, 1 GB of file storage, 50,000 monthly active users and 5 GB of egress (data sent out). Free projects are paused after 1 week of inactivity. Pro starts at $25 a month.
- Cloudflare Free plan: DNS, the CDN (copies of your site kept close to visitors), a Universal SSL certificate for HTTPS, and unmetered DDoS protection. Workers Free allows 100,000 requests per day. R2 includes 10 GB of storage per month.
- OpenRouter: more than 25 free models, limited to 20 requests per minute and 50 per day. The daily limit rises to 1,000 once your account has bought at least $10 of credits. On paid credit purchases, the Standard plan adds a 5.5% fee. Model usage is charged at the provider's list price.
Do now: build your own table.
- Open each vendor's official pricing page. Search for the vendor name plus "pricing" and open the result on the vendor's own website, not a blog.
- Make a table with the columns Service, Plan, Key limits, Cost to upgrade, Date checked, Link.
- Copy the limits that matter for this app: storage, users, requests and any pausing rule.
- Write today's date in every row.
- If your numbers differ from the ones above, trust the official page. The figures above are a dated snapshot.
Create Your Accounts Safely
Two-factor authentication (2FA) means that signing in needs a second proof as well as your password, usually a code from an authenticator app on your phone. A stolen password alone is then not enough to get in.
- Secure GitHub first. Turn on 2FA in GitHub's settings under Password and authentication. Several services below let you sign in with GitHub, so your GitHub account becomes the master key to all of them.
- Vercel: sign up and choose Continue with GitHub. Pick the Hobby plan.
- Supabase: sign up with Continue with GitHub. Do not create a project yet.
- Cloudflare: sign up with your email address, using a strong, unique password from a password manager.
- OpenRouter: sign up with GitHub or with your email address. Do not buy credits yet.
- In each dashboard, open the account or security settings and turn on 2FA wherever it is offered. Save the recovery codes (one-time backup codes) somewhere safe and offline.
- Write it down. Record each account's sign-in method and whether 2FA is on.
Do not create any API keys yet. Later levels show you how to handle them safely.
When the Screen Looks Different
Dashboards get redesigned often. Buttons move and menus get new names. When a step does not match what you see:
- Spot the change. The button name is different, the menu is missing, or the steps are in a new order.
- Search the official docs for the task, not the button, for example "Supabase enable two-factor authentication".
- Check that the page is current. Look for a recent "last updated" date or a changelog entry.
- Find the same goal. The task is the same even if the path is different. Follow the docs' current steps.
- Ask your AI assistant carefully. Its knowledge can be months old. Ask it for a link to the official page and check that page yourself.
Key Takeaways
- Vercel hosts the app, Supabase stores data and handles sign-in, Cloudflare handles the domain, DNS and protection, and OpenRouter connects you to many AI models.
- Every service has alternatives (Netlify, Firebase, Fastly, direct AI providers). The skills carry over.
- Free-tier limits change. Copy them from official pricing pages and write down the date you checked.
- Vercel Hobby is for non-commercial use only, and free Supabase projects pause after a week of inactivity.
- Secure GitHub with 2FA first, sign in with GitHub where you can, and turn on 2FA everywhere it is offered.
- When a screen changes, search the official docs for the task and follow the current steps.