Guide · Path two: ship apps for free

The free app stack

This site costs $0 to run. Not a trial, not a coupon, not "free until you grow." Four free pieces, one honest pattern for API keys, and the real limits of each tier. PlainLogic is the worked example.

See the pieces Start from zero

No affiliate links anywhere on this page. Nothing here earns PlainLogic a commission. Free-tier terms change over time, so the guide tells you where to verify each limit instead of quoting numbers that go stale.

The four pieces

The stack, at a glance

Four pieces. Code lives in GitHub, Vercel turns each push into a live site, live data comes from free public APIs, and the one API that needs a key goes through a small server function so the key never reaches the browser.

Code home

GitHub: your code, your deploy button

The repo holds everything: pages, styles, scripts, and the build scripts. PlainLogic's site is a static repo, and pushing to main is the entire deploy process. Private repos are free for individuals, so your half-finished experiments can stay private while they are half-finished.

The real limit: very large files and heavy automation have published caps. A normal site or app repo will not come close. Check GitHub's pricing page before you assume anything about the caps.

Hosting

Vercel hobby tier: push, and you are live

Connect the GitHub repo once. Every push to main rebuilds and deploys automatically, with a preview URL for every change before it goes live. The hobby tier is free for personal projects and serves the whole PlainLogic site today.

The real limit: hobby has published caps on bandwidth, build minutes, and serverless execution time. A personal site or a small app will not touch them. If you ever do, the dashboard shows you exactly which cap bit.

Live data · No key

Free public APIs that need no signup

Some of the best data on the internet is free with no key at all. The Situation Room pulls from all of these in your browser, right now:

National Weather Service (api.weather.gov): forecasts and alerts. Free, no key; it asks for a User-Agent header so it knows who is calling.
USGS earthquakes (earthquake.usgs.gov): real-time quake feed, no key.
NASA EONET (eonet.gsfc.nasa.gov): natural events like wildfires and storms, no key.
NOAA space weather (services.swpc.noaa.gov): solar wind and geomagnetic data as plain JSON, no key.

The real limit: rate limits and fair-use policies. These are production APIs, not demos, but they are shared resources. Cache responses for a few minutes and you will never notice the limit.

Keys done right

The API-key pattern: never in the browser

One data source PlainLogic uses, the USGS water API, requires a key. The key is never shipped to the browser. It lives in a Vercel environment variable, and a small serverless function adds it to the request server-side:

// /api/live.js: runs on Vercel's servers, never in the browser
export default async function handler(req, res) {
  // The key lives in a Vercel env var. The browser never sees it.
  const key = process.env.USGS_WATER_KEY;
  // Attach the key however this API expects it, then forward the reply.
  const upstream = await fetch(buildKeyedUrl(req.query, key));
  res.status(200).json(await upstream.json());
}
// The browser only ever calls YOUR endpoint:
fetch('/api/live?source=water')

Simplified illustration of the pattern. Your real function fills in that API's URL and key scheme.

Honest scope

What you can build for $0

Everything PlainLogic does is in reach: a multi-page site, interactive tools that run entirely in the browser, animated labs, and live-data dashboards fed by free public APIs. Concretely, the $0 pattern covers:

Personal sites and portfolios that deploy on every push.
Browser tools like the PDF tools: all the work happens on the visitor's machine, so the server does almost nothing.
Live dashboards that read free public APIs straight from the browser, plus a thin server function for any API that needs a key.
Small interactive experiments: games, visualizations, and sandboxes with no backend at all.

What it does not cover: anything that needs a real database with private user data, long-running background jobs, or heavy computation on the server. Those need a paid tier somewhere, and that is fine. The free pattern is the on-ramp, not the whole road.

Know when to pay

Signs you have outgrown free

Upgrade when a published limit actually bites, not before. The honest signals:

Bandwidth or build minutes run out mid-month. The dashboard tells you which cap hit and when. That is the tier telling you the project is real.
Server functions time out. Hobby execution limits are short by design. If your work genuinely needs minutes instead of seconds, that is a paid-tier job.
You need guarantees. Free tiers owe you nothing: no SLA, no support queue. The moment someone else's business depends on your uptime, pay for the tier that promises it.
You need a team. Collaboration features, shared environments, and access controls are where free plans draw the line.

One honest cost that is not free: a custom domain. The site itself can live at a free subdomain forever, but plainlogic.org is a registered domain, and domains cost money every year. Budget for that one line item and the rest of this guide really is $0.

Do it today

Start from zero, in order

Six steps. Nothing here costs money and nothing here is irreversible.

Step 1Put code in GitHub

Create a repo and push a single index.html. Ugly is fine. It is live-able the moment it exists.

Step 2Connect Vercel

Import the repo on the hobby tier. Every push to main now deploys automatically. Your site has a URL.

Step 3Make it real with a free API

Fetch one no-key API from the browser, like the National Weather Service, and render the answer on the page. You now have live data.

Step 4Hide one key properly

Pick an API that needs a key, store it in a Vercel env var, and write the tiny server function from the pattern above. Verify the key never appears in the browser's network tab.

Step 5Ship something small

One page that does one useful thing beats a ten-page plan. PlainLogic started as experiments that genuinely worked, not as a big launch.

Step 6Watch the dashboard

Check bandwidth and build usage once in a while. The day a cap bites is the day you have something worth paying for.

Honest answers

Questions this guide actually answers

Is it really $0? What is the catch?

The hosting, deploys, and the APIs named here are $0 on their free tiers. The catch is the limits: bandwidth, build minutes, and function runtime are all capped, and free tiers can change their terms. The only unavoidable cost is a custom domain if you want one.

Will my API key leak if I do it wrong?

Yes, and that is the most common beginner mistake: pasting a key into frontend JavaScript ships it to every visitor. The rule is simple. Keys live in server environment variables, browsers call your server function, and the function calls the API. If you can find the key in your page's source, it is already leaked: rotate it and fix the pattern.

Why no exact prices or limits here?

Because they change. Quoting a number that goes stale turns a guide into misinformation. Every section above tells you where the real limit is published so you can check the current number in one click.

Part of the Learn section. Want the AI theory first? Start with How an LLM Works.