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

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

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

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

Hint

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

Practice

1. What is the first step when setting up a new Supabase project?

easy

A. Choose a project name, password, and region on the Supabase website

B. Write SQL queries to create tables

C. Install Supabase CLI on your computer

D. Connect your project to a third-party API

Solution

1. Step 1: Access the Supabase website

   To start a project, you first go to the Supabase website where you can create a new project.

2. Step 2: Provide project details

   You must enter a project name, set a password, and select a region to host your project.

3. Final Answer:

   Choose a project name, password, and region on the Supabase website -> Option A

4. Quick Check:

   First step = Choose name, password, region [OK]

Hint: Start by naming and securing your project on the website [OK]

Common Mistakes:

• Trying to write SQL before creating the project
• Assuming CLI installation is first
• Skipping region selection

2. Which of the following is the correct way to set the project password during Supabase setup?

easy

A. Enter a strong password with letters, numbers, and symbols

B. Leave it blank to use the default password

C. Use your email address as the password

D. Set the password after project creation only

Solution

1. Step 1: Understand password requirements

   Supabase requires a strong password to secure your database access.

2. Step 2: Choose a secure password

   You should enter a password with a mix of letters, numbers, and symbols during setup.

3. Final Answer:

   Enter a strong password with letters, numbers, and symbols -> Option A

4. Quick Check:

   Password must be strong and set at setup [OK]

Hint: Always use a strong password when creating your project [OK]

Common Mistakes:

• Leaving password blank
• Using weak or guessable passwords
• Trying to set password after creation

3. After creating a Supabase project, what will you see on the dashboard?

medium

A. A list of third-party APIs to connect

B. Only a blank screen with no options

C. Options to manage your database, authentication, and storage

D. A command line interface to type SQL commands

Solution

1. Step 1: Understand the Supabase dashboard purpose

   The dashboard is the control center for your project backend services.

2. Step 2: Identify available management options

   You can manage your database tables, authentication settings, and file storage from the dashboard.

3. Final Answer:

   Options to manage your database, authentication, and storage -> Option C

4. Quick Check:

   Dashboard shows backend management options [OK]

Hint: Dashboard lets you manage database, auth, and storage [OK]

Common Mistakes:

• Expecting a blank or empty dashboard
• Looking for third-party API lists instead
• Confusing dashboard with CLI

4. You tried to create a Supabase project but got an error saying the project name is already taken. What should you do?

medium

A. Delete another user's project with that name

B. Choose a different unique project name

C. Ignore the error and try again

D. Use the same name but change the password

Solution

1. Step 1: Understand project name uniqueness

   Supabase requires each project name to be unique across all users.

2. Step 2: Select a new unique name

   To fix the error, pick a different project name that is not already used.

3. Final Answer:

   Choose a different unique project name -> Option B

4. Quick Check:

   Project names must be unique [OK]

Hint: Pick a unique project name to avoid conflicts [OK]

Common Mistakes:

• Trying to reuse an existing project name
• Changing password instead of name
• Ignoring the error message

5. You want your Supabase project to be fast for users in Europe. What should you do during setup?

hard

A. Set the project password to 'europe123' for speed

B. Choose the default region regardless of user location

C. Create multiple projects in different regions manually

D. Select a hosting region in Europe when creating the project

Solution

1. Step 1: Understand region selection impact

   Choosing a hosting region close to your users reduces latency and improves speed.

2. Step 2: Select the appropriate region during setup

   When creating the project, pick a region in Europe to optimize performance for European users.

3. Final Answer:

   Select a hosting region in Europe when creating the project -> Option D

4. Quick Check:

   Region choice affects speed and latency [OK]

Hint: Pick hosting region near users for best speed [OK]

Common Mistakes:

• Ignoring region selection
• Using weak passwords thinking it affects speed
• Creating multiple projects unnecessarily