What is Supabase - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize a Supabase client with your URL and key.

Supabase

const supabase = createClient('[1]', 'your-public-anon-key');

Drag options to blanks, or click blank then click option'

Ahttps://xyzcompany.supabase.co

Bhttps://api.example.com

Clocalhost:5432

Dhttp://127.0.0.1

Attempts:

3 left

💡 Hint

Common Mistakes

Using localhost or local IP instead of the Supabase project URL

Using an incorrect or incomplete URL

You must use your Supabase project URL to connect the client properly.

2fill in blank

medium

Complete the code to fetch data from a Supabase table named 'users'.

Supabase

const { data, error } = await supabase.from('[1]').select('*');

Drag options to blanks, or click blank then click option'

Aprofiles

Baccounts

Cusers

Dmembers

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong table name that does not exist

Misspelling the table name

The table name must match the one you want to query, here 'users'.

3fill in blank

hard

Fix the error in the code to insert a new user into the 'users' table.

Supabase

const { data, error } = await supabase.from('users').[1]({ name: 'Alice', age: 30 });

Drag options to blanks, or click blank then click option'

Ainsert

Bselect

Cupdate

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'update' instead of 'insert' for adding new data

Using 'select' which only reads data

To add new data, use the 'insert' method.

4fill in blank

hard

Fill the blank to filter users older than 25 and order by name ascending.

Supabase

const { data, error } = await supabase.from('users').select('*').[1]('age', 25).order('name', { ascending: true });

Drag options to blanks, or click blank then click option'

Aneq

Bgt

Ceq

Dlt

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'lt' (less than) instead of 'gt' (greater than)

Using 'neq' (not equal) which does not filter properly

'gt' means greater than. Here we want users with age greater than 25.

5fill in blank

hard

Fill both blanks to update the user's email where id equals 5.

Supabase

const { data, error } = await supabase.from('users').[1]({ email: '[e-mail]' }).[2]('id', 5);

Drag options to blanks, or click blank then click option'

Aupdate

Beq

Cfilter

Dselect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'select' instead of 'update' to change data

Using 'neq' instead of 'eq' for filtering

Use 'update' to change data and 'eq' to filter by id equals 5.

Practice

1. What is Supabase primarily used for?

easy

A. Creating graphics and animations

B. Designing user interfaces for websites

C. Providing backend services like database and authentication

D. Managing local computer files

Solution

1. Step 1: Understand Supabase's role

   Supabase offers backend services such as databases and user authentication.

2. Step 2: Compare options

   Options B, C, and D relate to frontend design, graphics, and local files, which are not Supabase's focus.

3. Final Answer:

   Providing backend services like database and authentication -> Option C

4. Quick Check:

   Backend services = A [OK]

Hint: Supabase is backend, not frontend or design [OK]

Common Mistakes:

• Confusing Supabase with frontend tools
• Thinking Supabase manages local files
• Assuming Supabase creates graphics

2. Which of the following is the correct way to connect to Supabase in code?

easy

A. const supabase = createClient('url', 'key');

B. connectSupabase('url', 'key');

C. new SupabaseClient('url', 'key');

D. supabase.connect('url', 'key');

Solution

1. Step 1: Recall Supabase client creation syntax

   The official way is using createClient with URL and key.

2. Step 2: Check other options

   Options A, C, and D use incorrect function or class names not in Supabase docs.

3. Final Answer:

   const supabase = createClient('url', 'key'); -> Option A

4. Quick Check:

   Use createClient() to connect [OK]

Hint: Supabase uses createClient() to connect [OK]

Common Mistakes:

• Using wrong function names
• Trying to instantiate Supabase with new keyword
• Calling connect() method which doesn't exist

3. Given this code snippet, what will be the output?

const { data, error } = await supabase.from('users').select('*').eq('id', 1); console.log(data);

medium

A. An empty array because no users exist

B. An array with user data where id equals 1

C. An error message about invalid syntax

D. A boolean true value

Solution

1. Step 1: Understand the query

   The code selects all columns from 'users' where id equals 1.

2. Step 2: Predict output

   If user with id 1 exists, data will be an array with that user's info; no syntax error or boolean expected.

3. Final Answer:

   An array with user data where id equals 1 -> Option B

4. Quick Check:

   Query returns matching user data array [OK]

Hint: select('*').eq('id', 1) returns matching user array [OK]

Common Mistakes:

• Expecting error due to syntax
• Thinking output is boolean
• Assuming empty array without checking data

4. Identify the error in this Supabase code snippet:

const supabase = createClient('url', 'key')
const { data, error } = supabase.from('profiles').select('*')
console.log(data)

medium

A. Missing await keyword before supabase.from() call

B. Incorrect function name createClient

C. Using console.log instead of return

D. No error, code is correct

Solution

1. Step 1: Check async usage

   supabase.from().select() returns a promise, so await is needed to get data.

2. Step 2: Verify other parts

   createClient is correct, console.log is valid for output, so no error there.

3. Final Answer:

   Missing await keyword before supabase.from() call -> Option A

4. Quick Check:

   Async calls need await [OK]

Hint: Always await async Supabase calls [OK]

Common Mistakes:

• Forgetting await on async calls
• Thinking createClient is wrong
• Confusing console.log with return

5. You want to build an app that stores user files and authenticates users without managing servers. Which Supabase features should you use together?

hard

A. Functions and Realtime services

B. Database and Authentication services

C. Realtime and Database services

D. Storage and Authentication services

Solution

1. Step 1: Identify needed features

   Storing user files requires Storage; authenticating users requires Authentication.

2. Step 2: Match options

   Storage and Authentication services combines Storage and Authentication, fitting the app needs. Database or Realtime alone don't handle file storage.

3. Final Answer:

   Storage and Authentication services -> Option D

4. Quick Check:

   Files + login = Storage + Authentication [OK]

Hint: Files need Storage; login needs Authentication [OK]

Common Mistakes:

• Choosing Database instead of Storage for files
• Confusing Realtime with Authentication
• Ignoring Storage for file management