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 Authentication → Providers 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.