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

Need a 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

Need a 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

Need a 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

Need a hint?

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