{"slug": "iam-12-i-built-an-ai-web-app-in-a-single-92kb-html-file-no-react-no-build-step", "title": "Iam 12 .I Built an AI Web App in a Single 92KB HTML File. No React. No Build Step. No Excuses.", "summary": "A 12-year-old developer built a full AI coding mentor web app contained in a single 92KB index.html file, using vanilla JavaScript with no React, no build step, and zero npm dependencies. The app streams LLM responses via fetch and ReadableStream, runs backend logic on a Cloudflare Worker with Supabase for auth and database and Groq for inference, and enforces an 11-article constitutional safety framework before requests reach the model. The developer reports the entire stack runs on free tiers at zero monthly cost and loads in under a second on 3G.", "body_md": "most ai apps ship a 4MB javascript bundle.\n\nthey 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.\n\ni don't have any of that.\n\ni have a $150 poco c55 phone. i have cloudflare's free tier. i have a single index.html file.\n\nand i built a full ai coding mentor that streams responses, reads images, exports conversations, handles auth, and enforces an 11-article constitutional safety framework.\n\nthe entire frontend is 92 kilobytes.\n\nhere's how.\n\n| layer | tool | cost | \n|---|---|---|\n| frontend | single index.html (vanilla js + css) | $0 | \n| hosting | netlify (static) | $0 | \n| backend logic | cloudflare worker | $0 | \n| database/auth | supabase | $0 | \n| llm | groq (free tier) | $0 | \n| web search | tavily | $0 | \n\ntotal monthly cost: zero dollars. \n\ntotal npm dependencies: zero. \n\ntotal build tools: zero. \n\ni 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.\n\nbecause i'm coding on a phone.\n\nreact 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.\n\nvanilla 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.\n\nand here's the secret: for an app this size (~1,900 lines of js), you don't need reactivity. you need two functions:\n\nwhen state changes, i call the function. that's it. no virtual dom. no reconciliation. no hydration. just innerHTML and move on.\n\ninside the single index.html:\n\nno 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.\n\nthe browser downloads one file. it parses it. the app runs. done.\n\nmost people reach for socket.io or some sse client library.\n\ni use fetch() with a readablestream reader:\n\nconst reader = res.body.getReader();\n\nwhile (true) {\n\n  const { done, value } = await reader.read();\n\n  if (done) break;\n\n  const chunk = new TextDecoder().decode(value);\n\n  // parse sse lines, append deltas to bubble\n\n}\n\nthat's it. that's the whole streaming system. no library. no abstraction. just the platform.\n\nthe real intelligence isn't in the frontend. it's in the cloudflare worker.\n\nevery request passes through an 11-article constitution before it hits the llm. the worker:\n\nthe frontend is dumb on purpose. it renders whatever the worker sends. the worker is the brain. the html is the face.\n\nconstraints are the best architect. if you can't install npm packages, you stop reaching for them. you start reading mdn instead.\n\nboring tech ships faster. while my classmates were configuring vite aliases and debugging tailwind plugins, i was already talking to users.\n\nthe 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.\n\nsenior 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.\n\nkoda-aicodementor.netlify.app\n\nopen 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.\n\n92 kilobytes. zero dependencies. zero excuses.", "url": "https://wpnews.pro/news/iam-12-i-built-an-ai-web-app-in-a-single-92kb-html-file-no-react-no-build-step", "canonical_source": "https://dev.to/koda2026/iam-12-i-built-an-ai-web-app-in-a-single-92kb-html-file-no-react-no-build-step-no-excuses-4f9d", "published_at": "2026-10-05 07:33:56+00:00", "updated_at": "2026-10-05 07:48:29.619280+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "developer-tools", "large-language-models", "ai-agents"], "entities": ["Cloudflare", "Supabase", "Groq", "Tavily", "Netlify", "Netflix"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/iam-12-i-built-an-ai-web-app-in-a-single-92kb-html-file-no-react-no-build-step", "markdown": "https://wpnews.pro/news/iam-12-i-built-an-ai-web-app-in-a-single-92kb-html-file-no-react-no-build-step.md", "text": "https://wpnews.pro/news/iam-12-i-built-an-ai-web-app-in-a-single-92kb-html-file-no-react-no-build-step.txt", "jsonld": "https://wpnews.pro/news/iam-12-i-built-an-ai-web-app-in-a-single-92kb-html-file-no-react-no-build-step.jsonld"}}