Give Your AI-Built App a Real Database (Supabase, Free Tier)
The wall every vibe coder hits: data disappears on refresh. Here's how to add a real database to a single-file app with Supabase's free tier — guided by AI the whole way.
Every beginner hits this wall in the same way: you build a to-do app or a game with high scores, it works beautifully, you refresh the page, and everything is gone. Browser apps have no memory. The fix is a database — and the reason this used to be the point where non-developers quit is that databases meant servers, backends, and security. Supabase's free tier deleted most of that. What's left, AI can walk you through.
Step 1 — Understand the shape of what you're building
Three pieces: your HTML file (the visitor's browser), Supabase (a Postgres database in the cloud with an API in front of it), and two strings that connect them — a project URL and a public 'anon key'. Your page sends reads and writes over the internet; Supabase decides what's allowed. That deciding part is the only genuinely dangerous step, and it's step 4.
Step 2 — Create the project and the table
Sign up at supabase.com (free tier: 500MB database, plenty). Create a project, then use the Table Editor to create your table visually — for a guestbook: columns for name (text), message (text), and created_at (timestamp, default now()). No SQL required, though here's the trick if the UI confuses you:
I'm using the Supabase Table Editor for the first time. I want a table called 'entries' for a public guestbook: visitor name (required, max 50 chars), message (required, max 500 chars), and an automatic timestamp. Walk me through exactly what to click and type, including which column types to choose and why id and created_at should be left as defaults.
Step 3 — Wire the page to the database
Build a single-file HTML guestbook using the Supabase JS client from a CDN. Project URL: [paste]. Anon public key: [paste]. Table 'entries' with columns: id, name, message, created_at. Features: a form to submit name + message, a list of the 50 newest entries (newest first), graceful error messages, and basic input validation. Clean, warm design, mobile-friendly, no frameworks.
Yes, the anon key goes in the page, and yes, that's by design — it's the public key. It is safe ONLY in combination with the next step. Do not skip the next step.
Step 4 — Row Level Security: the step that actually matters
By default your table is either locked (app can't read it) or open (anyone on the internet can delete everything). Supabase's answer is Row Level Security: rules that define what the public key is allowed to do. For a guestbook, the rules are: anyone may INSERT a row, anyone may SELECT rows, nobody may UPDATE or DELETE. Ask the AI:
Write the Supabase RLS policies for a public guestbook table called 'entries': allow anonymous INSERT and SELECT, deny UPDATE and DELETE entirely. Give me the exact SQL to paste into the Supabase SQL Editor, then explain each policy in one sentence so I understand what I just enabled.
Step 5 — Test like an attacker, gently
Open the page in two browsers — entries appear in both (shared data, working). Then verify the locks: ask the AI for a snippet to run in the console that attempts a DELETE, and confirm Supabase refuses it. Sixty seconds of hostile testing now saves you a wiped table later.
Step 6 — Where this pattern takes you
Guestbook, game leaderboard, habit tracker, signup list, comment box — all the same shape: table + RLS + a page that reads and writes. The next ceiling is per-user private data ('my tasks, not everyone's'), which is Supabase Auth — real but a separate day's project. You now have the skill that separates toy demos from actual products: your apps remember.
Keep going
Need somewhere to put it live? See where to host AI-built sites. Compare tool costs on the pricing tracker (or stick to the free options), then pick your next build.