6

Infrastructure

Supabase: Instant Backend

Add a database, user accounts, and file storage to your app — no server required

Most apps need to remember things — user accounts, saved data, uploaded images. That's what a backend is: the behind-the-scenes part that stores and manages data. Building one from scratch is complicated. Supabase gives you a ready-made backend with a database, user login system, and file storage, all through a visual dashboard. You don't need to manage any servers.

Wait, what's a backend?

A website has two parts: the frontend (what users see — buttons, text, images) and the backend (the invisible part that stores data and makes things work). When you create an account on a website, the backend saves your email and password. When you post a photo, the backend stores it. Supabase is the backend, so you only have to build the frontend.

When you'd use Supabase

  • Your app needs to save data (notes, posts, scores, orders, anything)
  • You need user accounts — sign up, log in, log out
  • You need to store files — images, PDFs, uploads
  • You want real-time features — like a live chat or collaborative editing
If your project is a static website with no user data (like a portfolio or blog), you probably don't need Supabase. Use it when your app needs to remember things between visits.

Getting started

  • Go to supabase.com and create a free account
  • Click "New Project" — give it a name and a password (this is your database password, save it somewhere safe)
  • Wait about 30 seconds for your project to spin up
  • You'll land on a dashboard — this is your backend's control center

Your first database table

A database stores your app's data in tables — think of a table like a spreadsheet. Each row is a record (like one note or one user) and each column is a property (like "title" or "created date").

  • In the dashboard, click Table Editor in the sidebar
  • Click "Create a new table"
  • Name it something like notes
  • Add columns: id (auto-generated), text (type: text), created_at (type: timestamp)
  • Click Save — you now have a database table
  • Click "Insert row" to add your first piece of data
You can do all of this from the visual dashboard — no code required. When you're ready to connect it to your app, Supabase gives you copy-paste code snippets.
Claude Code can do this for you
With the Supabase MCP connected (see Guide #4), you can ask Claude Code to do all of this for you: "Create a notes table with id, text, and created_at columns" or "Add a tags column to the posts table" — Claude runs the SQL directly.

User accounts (authentication)

Supabase has a built-in login system. You don't need to figure out how to securely store passwords or manage sessions — it handles all of that.

  • Email + password — the classic sign-up flow
  • Magic links — user enters email, gets a login link (no password needed)
  • "Sign in with Google/GitHub" — social login with one click
  • Enable any of these in AuthenticationProviders in the dashboard

Connecting Supabase to your code

When you're ready to use Supabase from your app (not just the dashboard), you'll need two things from your project settings: your project URL and your anon key (a safe-to-share key for reading public data).

  • Install the library: npm install @supabase/supabase-js
  • Initialize it: const supabase = createClient(url, anonKey)
  • Read data: const { data } = await supabase.from('notes').select()
  • Write data: await supabase.from('notes').insert({ text: 'Hello!' })
The npm install command is how you add external code libraries to your project. It requires Node.js (see Guide #3, Step 1).
Claude Code can do this for you
Ask Claude Code: "Connect this project to Supabase and add a function to fetch all notes" — it will install the library, set up the client, and write the code for you.

What does it cost?

  • Free tier — 500 MB database, 1 GB file storage, 50,000 monthly active users
  • That's generous enough for most projects and prototypes
  • Paid plans start at $25/month for more storage and features
Try this now

Create a free Supabase project. In the Table Editor, create a "notes" table with a "text" column. Add 3 rows of data. Congratulations — you just built your first database.