PTENES
MODULE 2.2

🗃️ Supabase: Your Database

Your site is live, but where does it store information? Sign-ups, messages, products, scores. All of this needs a safe place to live: a database. Here you'll learn to create and use a real database with Supabase, for free.

6
Topics
45
Minutes
Basic
Level
Hands-on
Type
1

What Is a Database

One database is an organized place to store information your application needs to remember. When someone signs up on your site, that signup needs to be saved somewhere so it still exists tomorrow. That place is the database. It stores everything in tables, similar to spreadsheets, and responds quickly when you ask for information.

YOUR APP 💻 website / app select... SUPABASE id name email 1 Ana ana@.. 2 Beto beto@. 3 Caio caio@. table: users cloud database data RESPONSE ✅ 3 users

🧠 Analogy: A Supercharged Spreadsheet

Imagine an Excel spreadsheet: rows, columns, each cell with some information. A database is that spreadsheet, except enhanced. The differences:

  • •It lives in the cloud, not on your computer. It's always online.
  • •Multiple applications consult the same spreadsheet at the same time without getting in each other’s way.
  • •It can handle millions of lines and it still responds in milliseconds.
  • •You ask for what you want with a “question” (a query), and it returns only what matters.

💡 What Supabase is

O Supabase is a free service that provides a database ready to use, without you needing to install anything. Under the hood, it uses PostgreSQL, one of the most respected databases in the world. But you don’t need to know that to get started: Supabase puts a nice visual interface on top, similar to a spreadsheet, and also automatically creates an API for your site to communicate with the database. It’s the fastest way for a beginner to get a real database up and running.

2

Creating Your Supabase Project

Before creating tables, you need a project in Supabase. Think of the project as the "box" that will hold everything: the database, the files, the authentication. Everything in an app lives inside a project. Let's create yours step by step.

1

Create your account

Access supabase.com and click "Start your project." The simplest option is to sign in with your GitHub (the same one you already created in Track 1). One click and you’re in.

2

Create an organization

The first time, Supabase asks for the name of a organization. It’s just a grouping of projects (e.g., "my-studies"). Choose the plan Free: it's free and enough to learn with, and even to run small projects.

3

Configure the project

Now for the project data. Three fields matter:

  • •Name: the project name, e.g.: meu-primeiro-app
  • •Database Password: a strong password for the bank. Save this password, you’ll need it later.
  • •Region: choose the region closest to you (e.g., South America (Sao Paulo)) so the database responds faster.
4

Wait for the database to “wake up”

Click "Create new project." Supabase takes about 1 to 2 minutes setting up your database in the cloud. When it's done, you'll land on the project dashboard. That's it: you now have a real database up and running.

👁 What you’ll see on the screen

When you open the project dashboard, notice the left sidebar. This is where you’ll work on the entire course:

  • 📊Table Editor: your “spreadsheet” for creating and viewing tables.
  • 💻SQL Editor: where you write commands for the database.
  • 🔑Authentication: user registration and login.
  • ⚙️Settings > API: the keys for your site to connect.

⚠️ Common Error

Problem: "I lost the database password (Database Password), and now I don’t know how to connect."
Solution: For most things in the course, you'll use API keys, not this password. But if you need it and have lost it, go to Settings > Database and click "Reset database password" to generate a new one. Next time, save the password in a password manager as soon as you create the project.

3

Tables, Columns, and Types

Inside the database, the data lives in tables. Each table holds a type of thing: a table usuarios, another tarefas, another mensagens. The columns are the details for each item, and each column has a type that specifies what content it accepts.

🧠 Analogy: Table = Sheet, Row = Record, Column = Field

Think of a filing cabinet. The table is a drawer (“Users”). Each line is a person’s record. Each column is a field in the record: "Name," "Email," "Registration date." The type and the field rule: "Age" only accepts numbers, "Registered?" only accepts yes or no.

The types you'll use most often

text

Text: names, emails, messages, any word or phrase.

int (int8)

Integer: age, quantity, score.

bool

True or false: "active?", "completed?". Only accepts true/false.

timestamp

Date and time: when something was created or updated.

🔑 The primary key (Primary Key)

Every table has a special column, usually called id, which is the primary key. It’s the identity number for each row: it never repeats and is never empty. That’s how the database knows that the row "Ana with id 1" is different from another "Ana with id 7". In Supabase, when you create a table, the column id already comes ready as a primary key that fills itself in automatically.

Example: the table tarefas

# Columns and types

id int8 (primary key)

titulo text "Comprar pao"

completed bool false

criada_em timestamp 2026-06-17 10:00

In Table Editor, you put this together by clicking "New table" and naming it tarefas and adding each column with its type.

✓ What TO DO

  • ✓Plural, lowercase table names: usuarios
  • ✓Choosing the right type (number in int, text in text)
  • ✓Leave the column id as an automatic primary key

✗ What NOT to do

  • ✗Store a number in a column text if you're going to do calculations
  • ✗Use accents or spaces in column names
  • ✗Create one giant table for everything (separate it by topic)
4

Insert and Query Data

Table created, now comes the fun part: put data inside e ask for that information back. You can do this in Supabase in two ways: by clicking through the interface (the Table Editor) or by writing SQL commands. Let's look at both, starting with the easiest.

👁 Through the interface: Table Editor

In Table Editor, it’s just like editing a spreadsheet:

  • •Click your table tarefas in the list on the left.
  • •Click "Insert" > "Insert row" to add a new line.
  • •Fill in the fields (leave the id blank, it fills itself in) and save.
  • •The row appears in the table right away. That's it, you inserted a record.

Using SQL: insert (insert data)

Node SQL Editor, you write a command to insert. It reads almost like English: "insert into the tarefas table, in the titulo and concluida columns, the values...".

insert into tarefas (titulo, concluida)

values ('Buy bread', false);

# What the database responds:

Success. 1 row inserted

Using SQL: select (query data)

O select and like asking, "show me the data." The * means “all columns.”

# Get everything from the table

select * from tarefas;

# What the database returns:

id | title | completed

1 | Buy bread | false

# Only tasks that are not yet complete

select titulo from tarefas where concluida = false;

title

Buy bread

💡 Tip: The where is your filter

Most of the time, you don’t want ALL the data, just some of it. The word where is the filter: where concluida = false brings back only the incomplete ones. Without where, you get everything. Always start by testing with select before making changes to the data for real.

⚠️ Common Error

Problem: "I wrote the text without quotation marks and got a syntax error."
Solution: In SQL, every text value (text) goes between single quotes: 'Comprar pao', don't Comprar pao. Numbers (int) and booleans (true/false) go without quotation marks. And don't forget the ; at the end of the command.

5

The Supabase Automatic API

Here’s where the magic happens. As soon as you create a table, Supabase creates an API on its own for your site to talk to the database. You don't need to program any server. Your site on Vercel calls this API and gets the data back. It's as if the database got a "phone" for your app to call.

🧠 Analogy: The Bank Got a Waiter

Imagine the database as a restaurant kitchen. Your website doesn’t go into the kitchen (that would be dangerous). Instead, it talks to a waiter: the API. The website makes the request ("bring me the tasks"), the waiter goes to the kitchen, picks them up, and comes back with the dish. The API is that waiter: organized, secure, and always available.

🔑 Where the URL and key (anon key) are

For your site to connect, it needs two things, which are in Settings > API:

  • •Project URL: your database address, something like https://abc123.supabase.co
  • •anon key: the public key, which the site uses in the browser. It may appear in your front-end code.

A anon key is safe to expose because, on its own, it can only do what you allow (that’s the subject of the next topic). The other key, service_role, and it's secret: never put it in the front end.

Using the Supabase JS client

The most common way to do this on a website is to use the library supabase-js. You connect once with the URL and anon key, then request the data in one line:

// 1. connect to your database

const supabase = createClient(

'https://abc123.supabase.co',

'sua-anon-key-aqui'

)

// 2. request the data (like: select * from tasks)

const { data, error } = await supabase

.from('tasks')

.select('*')

// 3. what comes back in "data":

[ { id: 1, titulo: 'Comprar pao', concluida: false } ]

💡 You can also use it via plain REST

If you don’t use the library, the same API responds with REST (HTTP). A call GET to /rest/v1/tarefas with the anon key in the header returns the same JSON. You’ll explore this further in module 2.3, about APIs. For now, it’s enough to know: table created = API ready, for free.

6

Basic Authentication and RLS

Almost every app needs login: a user creates an account, signs in with an email and password, and sees only their own data. Supabase already provides this in the Authentication. You don't need to store passwords (Supabase handles that securely) or build signup screens from scratch on the server.

Sign up and sign in

With the JS client, creating an account and logging in are two simple calls:

// create a new account (sign up)

await supabase.auth.signUp({

email: 'ana@email.com',

password: 'senha-secreta'

})

// sign in with an existing account (sign in)

await supabase.auth.signInWithPassword({

email: 'ana@email.com',

password: 'senha-secreta'

})

// sign-in response: a logged-in user

{ user: { id: 'uuid...', email: 'ana@email.com' } }

The registered user appears in the list in Authentication > Users in the dashboard.

🔒 RLS in one sentence

RLS (Row Level Security, "row-level security") is the rule that decides who can view and edit each row of the table. Without RLS, either everything is locked down, or anyone with the anon key can read it all. With RLS enabled, you write a rule like "each user can only see their own tasks." It’s the lock that makes the anon key safe in the browser.

✓ What TO DO

  • ✓Enable RLS on Every Table with User Data
  • ✓Use the anon key in the front end (the public one)
  • ✓Let Supabase store your passwords for you

✗ What NOT to do

  • ✗Expose the key service_role on the site
  • ✗Leave a table with sensitive data without RLS
  • ✗Store a password as plain text in one of your columns

⚠️ Common Error

Problem: "I enabled RLS, and now my query comes back empty even though there’s data."
Solution: When you enable RLS, by default everything becomes blocked until you create a policy (rule) that allows it. Go to Authentication > Policies and create a read policy. To test while you're learning, you can create a simple policy to "allow read access for logged-in users."

📚 Module Summary

✓
A database is a souped-up spreadsheet - in the cloud, several apps query it at the same time
✓
Supabase Project - account, organization, region, and database password
✓
Tables, columns, and types - text, int, bool, timestamp, and the primary key id
✓
insert and select - insert and query using the Table Editor or SQL
✓
Automated API and authentication - anon key, JS client, login, and RLS for protection

Next Module:

2.3 - APIs: How Systems Communicate (understand requests, JSON, and how to consume external data)