Vibe Coding

Adding a Database to Your Vibe Coding Project with Supabase

Connect a Supabase database to your vibe coding project: 3 step-by-step methods, the exact code to copy, and the security mistakes that leak beginners' data.

โดย Jérémie Chiari

29 กันยายน 2569 อ่าน 10 นาที

You built an app with Claude Code, it shows up, it works, and then you refresh the page: everything is gone. That's normal — your data was living in the browser's memory. For an application to hold on to its users' information, it needs a database. Supabase is currently the most accessible option when you're starting out: a hosted PostgreSQL database, an automatically generated API, user account management, and a free plan that's more than enough for a first project.

Here you'll see three ways to add that database to your project: learn in a guided setting where the tools are already set up for you, build it by hand in the Supabase dashboard, or let Claude Code write your schema itself through a controlled connection. You'll also see the serious alternatives (Firebase, Airtable, SQLite) and the five mistakes that leak beginners' data. No prerequisites: if you can install an app, you can follow along.

What a database changes in your app, and what Supabase does

A database is where your application writes whatever has to survive closing the tab: accounts, orders, messages, uploaded files. Without one, you have a mockup that reacts nicely but forgets everything.

Vibe coding means describing in plain language what you want and letting an agent like Claude Code write the code for you. It works remarkably well for the interface: buttons, forms, layout. It tends to stall at the storage stage, because that's where you have to make real decisions: which tables, who is allowed to read what, how to change the structure later without breaking what already exists.

Supabase bundles those answers into a single project. Behind the interface it's PostgreSQL, a database that has been running in production for over thirty years, with extra layers stacked on top.

Supabase building block	What it's for	Something you already know
Database (PostgreSQL)	storing your tables and their relationships	an Excel workbook, but with strict rules
Auth	sign-up, sign-in, forgotten password	the "Sign in with Google" button
Storage	images, PDFs, videos	a Drive attached to your app
Realtime	instant screen updates	seeing other people's cursors in a shared document
Auto-generated API	talking to the database from your code	the server you don't have to write

In practice: you create a taches table, and Supabase immediately hands you the endpoints to read, add, edit and delete rows. You don't write a server. That's exactly what makes the tool such a good fit for vibe coding. The official Supabase documentation on databases is still the reference to keep open in a tab.

Method 1: build your database in a guided setting with Skilzy

When you're a beginner, the fastest route is to learn schema design and security while you build, with the tools already installed and paid for.

Skilzy is a French e-learning platform for learning and using AI. It has more than 15 programs: creating images, videos (UGC, ads, faceless channels, avatars, voiceovers), music, automating with n8n, writing good prompts, coding with AI. The thing that changes everything for a beginner is the built-in AI Lab: you use the real tools directly inside the platform, credits included, without piling up €20-a-month subscriptions.

For the part you care about here, the program on building an app with Claude Code takes you from a blank page to an application that stores real data. What you walk away with, applied to your database:

a schema you actually understand, with the right column types and real relationships between tables, instead of a pile of text columns
security rules (Row Level Security) written and tested, so one user can't read another user's rows
clean handling of API keys and environment variables, the number one source of data leaks among beginners
an instructions file that keeps the agent on rails going forward, as explained in our guide to the CLAUDE.md file

Two French state-recognized certifications, eligible for public training funding, are also available: RS7439, AI-assisted content marketing, and RS6792 on AI and sales. Useful if you want your learning to show up on your résumé or to be covered by a training budget.

There's also a B2B offer for training organizations that want to add these tracks to their catalog.

Method 2: build your database by hand in the Supabase dashboard

It's free, it takes about fifteen minutes, and it's the method to know even if you later hand the work off to AI. You can't check what an agent is doing to a database whose workings you don't understand.

Create your project. On supabase.com, sign in with GitHub, then hit "New project". Pick a region close to your users (Paris or Frankfurt for a European audience — it's worth tens of milliseconds on every request). Save the database password in your password manager: it will never be shown again.
Create your first table. Two routes: the "Table Editor", which looks like a spreadsheet, or the "SQL Editor", which is faster as soon as you know what to write. Here's an example for a to-do list tied to users:

create table public.taches (
  id uuid primary key default gen_random_uuid(),
  created_at timestamptz not null default now(),
  user_id uuid not null references auth.users (id) on delete cascade,
  titre text not null,
  terminee boolean not null default false
);

Turn on row-level security. Without this step, anyone holding your public key can read the entire table. Supabase enables RLS by default on tables created through the interface, but not always on tables created in SQL. Check, then write your rule:

alter table public.taches enable row level security;

create policy "chacun voit ses taches"
  on public.taches for select
  using (auth.uid() = user_id);

In plain language: a signed-in user only sees the rows whose user_id matches their own ID. You'll need an equivalent rule for insert, update and delete.

Grab your keys. Under "Project Settings", then "API", you'll find the project URL and two keys. The public key (anon) can live in your front-end code. The service_role key bypasses every security rule: it must never leave your server, and never appear in a Git repository.
Wire it into your code. Install the official library with npm install @supabase/supabase-js, put your keys in a .env.local file that Git ignores, then:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

const { data, error } = await supabase
  .from('taches')
  .select('*')
  .order('created_at', { ascending: false })

On the budget side: the Supabase free plan covers two active projects, roughly 500 MB of database and 50,000 monthly active users as of this writing. Free projects are paused after a week of inactivity, which catches a lot of beginners off guard — you just restart them from the dashboard. Check the pricing page before you build a business on top of it; these thresholds change.

Method 3: let Claude Code write your schema with the Supabase MCP server

Claude Code can read your database structure, suggest the missing tables and write the migration files itself — as long as you give it controlled access.

MCP (Model Context Protocol) is the standard that lets an agent talk to an outside tool. Supabase publishes an official MCP server. Installing it is one command:

claude mcp add supabase -e SUPABASE_ACCESS_TOKEN=ton_token -- npx -y @supabase/mcp-server-supabase@latest --read-only --project-ref=ton_ref

The --read-only is deliberate: you start in read-only mode, long enough to confirm the agent understands your database. You remove it later if you need to. If this part is new to you, our tutorial on connecting Claude Code to your tools with MCP walks through every step, including creating the personal access token.

From there, you work in plain language: "Look at the taches table in Supabase, add a projets table with a title and a color, link each task to a project, and write the migration." The agent reads the existing structure, proposes the SQL, and you approve it.

For changes, use the Supabase CLI rather than typing SQL by hand in the interface. Your changes become versioned files, which means they're reversible:

npx supabase init
npx supabase link --project-ref ton_ref
npx supabase migration new ajout_table_projets
npx supabase db push

A CLAUDE.md file at the root of the project prevents 80% of accidents. Three lines are enough: "Every schema change goes through a migration in supabase/migrations. RLS is mandatory on every new table. Never use the service_role key on the client." For the rest of the day-to-day reflexes, keep the essential Claude Code commands within reach.

The five mistakes to fix before you ship your app

RLS disabled on a public table. Your anon key is visible in the browser code. Without RLS, the whole table is readable by anyone.
The service_role key in the front end. It ignores all your rules. It stays server-side, period.
The .env file pushed to GitHub. Check your .gitignore before the first commit. A published key has to be revoked, not just deleted from the repo.
Schema changes made by hand only. Without a migration, you can't roll back or recreate your database anywhere else.
Approving the agent's SQL without reading it. A drop table slipped into a migration is irreversible on the free plan, which doesn't include point-in-time recovery.

Alternatives to Supabase, and when they're the better fit

Supabase isn't the only option, and on some projects it isn't even the best one. Here are the choices that hold up.

Option	Its strength	Its limit	Who it's for
Supabase	standard PostgreSQL, plain SQL, generous free plan	you have to understand RLS	web or mobile app with user accounts
Firebase (Google)	very fast to get going, excellent on mobile	non-relational database, complex queries are painful, bills are hard to predict	mobile prototype, push notifications
Airtable	instantly familiar spreadsheet interface, great with n8n	slow past a few thousand rows, expensive per user	internal tool, content management, automations
SQLite or Turso	single file, no network latency, zero configuration	no built-in auth, backups are on you	solo project, local tool, desktop app
Google Sheets	you already know how to use it	it isn't a database, it buckles fast	throwaway mockup, testing an idea over a week

A simple rule to decide: if your app has user accounts and data that cross-references (a user, their projects, their tasks), go with Supabase. If you're building an internal tool driven by automations, Airtable will save you hours. If you're making a small local utility, SQLite is plenty and will never cost you a cent.

Your next step

Open a Supabase project, create a single table with four columns, turn on RLS, write one read policy, and wire it into your app. One hour, no more. That first complete loop is what unlocks everything else: from then on, every new table is just the same move repeated.

If you're still unsure what order to learn things in, our guide on where to start with AI lays out a clear path.

คำถามที่พบบ่อย

Is Supabase really free for a first project?

Yes. The free plan lets you run two active projects, with roughly 500 MB of database, 1 GB of file storage and 50,000 monthly active users. That's plenty for learning and for launching a first application. Two things to know: a free project that sits idle for about a week gets paused (you restart it in one click), and point-in-time database recovery isn't included. Check the official pricing page before you commit, since these limits change regularly.

Do you need to know SQL to use Supabase?

No to get started, yes to stick with it. Supabase's "Table Editor" looks like a spreadsheet: you create your tables and columns with the mouse, without writing a line of code. And Claude Code can generate the SQL for you. But you need to be able to read that SQL to check what's going to production, especially the security rules. The useful vocabulary fits in five words: select (read), insert (add), update (change), delete (remove), policy (access rule). An hour of learning covers 90% of cases.

Can Claude Code modify my database on its own?

Yes, through Supabase's official MCP server — but start in read-only mode with the --read-only option. The agent can then read your structure, understand your tables and propose SQL that you approve before it runs. When you do open up write access, set two rules in your CLAUDE.md file: every schema change goes through a versioned migration file, and no table gets dropped without explicit confirmation. Always reread the SQL before running it against a database holding real data.

What's the difference between the anon key and the service_role key?

The anon key is public: it's designed to live in your front-end code, and it's subject to your row-level security rules (RLS). The service_role key, on the other hand, bypasses all of those rules and gives full access to the database. It should only ever appear in server-side code, never in the browser, never in a Git repository. If you've accidentally published a service_role key, revoke it immediately from the project settings: deleting it from your code isn't enough, since it stays in the history.

Supabase or Firebase for an app built with vibe coding?

Supabase in most cases, because it's standard PostgreSQL: your data has a clear structure, queries that span several tables are straightforward, and you can take your database elsewhere if you need to. Firebase still makes sense for a mobile app with push notifications, where its Google ecosystem saves real time. Its non-relational database, though, makes anything beyond simple queries awkward, and the bill is harder to predict since it depends on the number of reads.