Supabase dashboard overview - Mini Project: Build & Apply

Supabase dashboard overview

📖 Scenario: You just created a new Supabase project and need to set up your first table, connect from JavaScript, and verify the API works. You'll use both the SQL Editor and the client library.

🎯 Goal: Initialize a Supabase client, create a table via SQL, insert data, and query it from the client to verify the full setup.

📋 What You'll Learn

Initialize the Supabase client with project credentials

Create a table using SQL

Insert sample data

Query data using the Supabase client

💡 Why This Matters

🌍 Real World

Every Supabase project starts with the dashboard. Understanding how dashboard sections map to client operations is the foundation for building full-stack applications.

💼 Career

Full-stack developers use the Supabase dashboard daily to manage databases, configure auth, and debug API issues.

1

Initialize the Supabase client

Import createClient from '@supabase/supabase-js' and create a supabase client using createClient() with your project URL 'https://myproject.supabase.co' and anon key 'my-anon-key'.

Supabase

// Import createClient and initialize the client
// Your code here

Hint

Use createClient(url, anonKey) with the values from Settings → API in the dashboard.

2

Create a table via SQL Editor

Write SQL to create a public.todos table with columns: id as BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY, task as TEXT NOT NULL, and is_done as BOOLEAN DEFAULT false. Then enable Row Level Security on it.

Supabase

-- Create the todos table and enable RLS
-- Your code here

Hint

Use BIGINT GENERATED BY DEFAULT AS IDENTITY for the primary key — this is Supabase's default pattern.

3

Insert sample data

Use the Supabase client to insert two todos using supabase.from('todos').insert(). Insert an array with { task: 'Learn Supabase' } and { task: 'Build an app' }.

Supabase

import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://myproject.supabase.co', 'my-anon-key')

// Insert two todos
// Your code here

Hint

Use .from('todos').insert([array]) to insert multiple rows at once.

4

Query data using the client

Use the Supabase client to select all rows from todos where is_done is false, ordered by id ascending. Use .from('todos').select('*').eq('is_done', false).order('id', { ascending: true }).

Supabase

// Select all incomplete todos ordered by id
// Your code here

Hint

Chain .select(), .eq(), and .order() to filter and sort results.

Practice

1. What is the main purpose of the Supabase dashboard?

easy

A. To create graphic designs for marketing

B. To manage projects, databases, and monitor usage in one place

C. To design mobile app interfaces

D. To write complex SQL queries only

Solution

1. Step 1: Understand the dashboard role

   The Supabase dashboard is described as a control center for managing projects and data.

2. Step 2: Identify main functions

   It helps manage databases, authentication, storage, and monitor usage, all in one place.

3. Final Answer:

   To manage projects, databases, and monitor usage in one place -> Option B

4. Quick Check:

   Dashboard = Manage projects and data [OK]

Hint: Dashboard = control center for projects and data [OK]

Common Mistakes:

• Thinking dashboard is only for SQL queries
• Confusing dashboard with design tools
• Assuming it is for marketing tasks

2. Which section would you NOT expect to find in the Supabase dashboard?

easy

A. Storage file browser

B. Database table editor

C. Video editing studio

D. Authentication management

Solution

1. Step 1: List dashboard features

   The dashboard includes authentication, database, and storage management.

2. Step 2: Identify unrelated feature

   Video editing is unrelated to database or project management in Supabase.

3. Final Answer:

   Video editing studio -> Option C

4. Quick Check:

   Dashboard excludes video editing [OK]

Hint: Dashboard manages data, not video editing [OK]

Common Mistakes:

• Confusing storage with media editing
• Assuming all tools are included
• Mixing dashboard with external apps

3. Given this Supabase dashboard snippet showing usage stats:

{"active_users": 120, "db_size_mb": 500, "storage_used_mb": 300}

What does the db_size_mb value represent?

medium

A. The size of the database in megabytes

B. The amount of storage used for files

C. The number of active users currently logged in

D. The number of tables in the database

Solution

1. Step 1: Analyze the JSON keys

   The key db_size_mb suggests a size measurement in megabytes related to the database.

2. Step 2: Match key to meaning

   It represents the database size, not user count or storage files.

3. Final Answer:

   The size of the database in megabytes -> Option A

4. Quick Check:

   db_size_mb = database size [OK]

Hint: Look for '_size_mb' to find storage size info [OK]

Common Mistakes:

• Confusing db_size_mb with active users
• Mixing storage used with database size
• Assuming it counts tables

4. You see this error in the Supabase dashboard when trying to view database tables:

"Error: Permission denied for relation users"

What is the most likely cause?

medium

A. You do not have permission to access the users table

B. The users table does not exist

C. The dashboard is offline

D. Your internet connection is lost

Solution

1. Step 1: Interpret the error message

   The message says "Permission denied" which means access rights are missing.

2. Step 2: Identify cause

   Permission issues mean the user lacks rights to read the users table, not that it is missing or offline.

3. Final Answer:

   You do not have permission to access the users table -> Option A

4. Quick Check:

   Permission denied = access rights missing [OK]

Hint: Permission denied means access rights missing [OK]

Common Mistakes:

• Assuming table is missing
• Blaming internet connection
• Thinking dashboard is offline

5. You want to monitor your Supabase project's database size growth over time using the dashboard. Which approach is best?

hard

A. Ignore dashboard metrics and guess usage

B. Only check the active users count daily

C. Delete old tables to reduce size without monitoring

D. Regularly check the database size metric and export data for trend analysis

Solution

1. Step 1: Understand monitoring goal

   You want to track database size growth, so you need size data over time.

2. Step 2: Choose best method

   Regularly checking the size metric and exporting data allows you to analyze trends accurately.

3. Step 3: Eliminate wrong options

   Checking only users or deleting tables without monitoring won't track growth properly.

4. Final Answer:

   Regularly check the database size metric and export data for trend analysis -> Option D

5. Quick Check:

   Monitor size metric regularly for trends [OK]

Hint: Track size metric regularly for growth trends [OK]

Common Mistakes:

• Ignoring size data
• Confusing user count with size
• Deleting data without analysis