most ai apps ship a 4MB javascript bundle.
they need node 22. they need webpack. they need a $40/month vercel plan. they need a macbook to run the dev server without the fan sounding like a jet engine.
i don't have any of that.
i have a $150 poco c55 phone. i have cloudflare's free tier. i have a single index.html file.
and i built a full ai coding mentor that streams responses, reads images, exports conversations, handles auth, and enforces an 11-article constitutional safety framework.
the entire frontend is 92 kilobytes.
here's how.
| layer | tool | cost |
|---|---|---|
| frontend | single index.html (vanilla js + css) | $0 |
| hosting | netlify (static) | $0 |
| backend logic | cloudflare worker | $0 |
| database/auth | supabase | $0 |
| llm | groq (free tier) | $0 |
| web search | tavily | $0 |
total monthly cost: zero dollars.
total npm dependencies: zero.
total build tools: zero.
i don't run npm install. i don't run npm run build. i edit a file. i hit deploy. it's live in 8 seconds.
because i'm coding on a phone.
react needs a dev server. vue needs a bundler. svelte needs a compiler. all of them need a terminal that my $150 phone can't run smoothly.
vanilla js runs everywhere. it runs in the browser i already have. it doesn't need a node process eating 400mb of ram on a device with 4gb total.
and here's the secret: for an app this size (~1,900 lines of js), you don't need reactivity. you need two functions:
when state changes, i call the function. that's it. no virtual dom. no reconciliation. no hydration. just innerHTML and move on.
inside the single index.html:
no external css files. no external js files. no font imports. no icon libraries. every svg icon is an inline path string in a js object.
the browser downloads one file. it parses it. the app runs. done.
most people reach for socket.io or some sse client library.
i use fetch() with a readablestream reader:
const reader = res.body.getReader();
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = new TextDecoder().decode(value);
// parse sse lines, append deltas to bubble
}
that's it. that's the whole streaming system. no library. no abstraction. just the platform.
the real intelligence isn't in the frontend. it's in the cloudflare worker.
every request passes through an 11-article constitution before it hits the llm. the worker:
the frontend is dumb on purpose. it renders whatever the worker sends. the worker is the brain. the html is the face.
constraints are the best architect. if you can't install npm packages, you stop reaching for them. you start reading mdn instead.
boring tech ships faster. while my classmates were configuring vite aliases and debugging tailwind plugins, i was already talking to users.
the platform is enough. fetch, localstorage, blobs, url.createobjecturl, window.print, navigator.clipboard — these are all native. you don't need a library for any of them.
senior devs respect constraints. when i told a netflix engineer my whole app loads in under 1 second on 3g, he didn't laugh. he nodded. because he knows that's harder than shipping a 4mb bundle on a fiber connection.
koda-aicodementor.netlify.app
open it on your phone. open it on a 5-year-old device. open it on a hotel wifi that barely works. it loads. it streams. it teaches.
92 kilobytes. zero dependencies. zero excuses.