Setting up a Supabase project - Try It Yourself

Setting up a Supabase project

📖 Scenario: You want to create a simple backend using Supabase to store and manage user data for a small app.

🎯 Goal: Build a Supabase project with a table called users that stores user id, email, and created_at timestamp.

📋 What You'll Learn

Create a Supabase project configuration object

Add a table schema for users with specified columns

Write a query to insert a new user record

Write a query to select all users ordered by creation date

💡 Why This Matters

🌍 Real World

Supabase is a backend-as-a-service platform that helps developers quickly build and manage databases and APIs for their apps without managing servers.

💼 Career

Knowing how to set up and query Supabase projects is useful for backend developers, full-stack developers, and cloud engineers working with modern serverless databases.

1

Create Supabase client configuration

Create a constant called supabaseUrl with the value "https://xyzcompany.supabase.co" and a constant called supabaseKey with the value "public-anonymous-key". Then create a variable called supabase by calling createClient(supabaseUrl, supabaseKey).

Supabase

# Your code here

Need a hint?

Use const to declare constants and call createClient with the URL and key.

2

Define the users table schema

Create a JavaScript object called usersTable that defines the table name as "users" and columns as an array with objects for id (type uuid, primary key), email (type text, unique), and created_at (type timestamp, default to now()).

Supabase

const supabaseUrl = "https://xyzcompany.supabase.co";
const supabaseKey = "public-anonymous-key";
const supabase = createClient(supabaseUrl, supabaseKey);

# Your code here

Need a hint?

Use an object with name and columns keys. Columns is an array of objects with the specified properties.

3

Write a query to insert a new user

Write an async function called addUser that takes an email parameter and uses supabase.from('users').insert([{ email }]) to add a new user. Assign the result to a variable called result.

Supabase

const supabaseUrl = "https://xyzcompany.supabase.co";
const supabaseKey = "public-anonymous-key";
const supabase = createClient(supabaseUrl, supabaseKey);

const usersTable = {
  name: "users",
  columns: [
    { name: "id", type: "uuid", primaryKey: true },
    { name: "email", type: "text", unique: true },
    { name: "created_at", type: "timestamp", default: "now()" }
  ]
};

# Your code here

Need a hint?

Define an async function and use await with supabase.from('users').insert([{ email }]).

4

Write a query to select all users ordered by creation date

Write an async function called getUsers that queries supabase.from('users').select('*').order('created_at', { ascending: true }) and assigns the result to a variable called data.

Supabase

const supabaseUrl = "https://xyzcompany.supabase.co";
const supabaseKey = "public-anonymous-key";
const supabase = createClient(supabaseUrl, supabaseKey);

const usersTable = {
  name: "users",
  columns: [
    { name: "id", type: "uuid", primaryKey: true },
    { name: "email", type: "text", unique: true },
    { name: "created_at", type: "timestamp", default: "now()" }
  ]
};

async function addUser(email) {
  const result = await supabase.from('users').insert([{ email }]);
}

# Your code here

Need a hint?

Define an async function and use await with supabase.from('users').select('*').order('created_at', { ascending: true }).