Supabase architecture (Postgres, Auth, Storage, Realtime, Edge Functions) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize the Supabase client with the correct URL.

Supabase

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

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

Ahttps://storage.supabase.co

Bhttp://localhost:5432

Chttps://api.supabase.io

Dhttps://xyzcompany.supabase.co

Attempts:

3 left

💡 Hint

Common Mistakes

Using localhost URL instead of the project URL

Using storage or API URLs incorrectly

The Supabase client needs the project URL to connect to your backend services.

2fill in blank

medium

Complete the code to sign up a user with email and password using Supabase Auth.

Supabase

const { data, error } = await supabase.auth.[1]({ email, password })

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

AsignUp

Blogin

Cregister

Dauthenticate

Attempts:

3 left

💡 Hint

Common Mistakes

Using login instead of signUp

Using register which is not a Supabase method

The method to create a new user with email and password is signUp.

3fill in blank

hard

Fix the error in the code to upload a file to Supabase Storage bucket named 'avatars'.

Supabase

const { data, error } = await supabase.storage.from('avatars').[1]('profile.png', file)

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

Adownload

Bupload

CgetPublicUrl

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Using download instead of upload

Using getPublicUrl which only gets URLs

The correct method to upload a file is upload.

4fill in blank

hard

Fill both blanks to subscribe to realtime changes on the 'messages' table.

Supabase

const subscription = supabase.[1]('messages').on('INSERT', payload => {
  console.log('New message:', [2])
}).subscribe()

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

Afrom

Bpayload.new

Cpayload.old

Dchannel

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'channel' instead of 'from'

Using 'payload.old' for new inserts

You use from to specify the table and payload.new to get the inserted row.

5fill in blank

hard

Fill all three blanks to define and deploy an Edge Function named 'hello'.

Supabase

import { serve } from '@supabase/functions'

serve(async (req) => {
  return new Response('[1]', { status: [2], headers: { '[3]': 'text/plain' } })
})

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

A"Hello from Supabase Edge Function!"

B200

CContent-Type

D404

Attempts:

3 left

💡 Hint

Common Mistakes

Using 404 status instead of 200

Wrong header key or missing quotes

The response body is a greeting string, status is 200 for success, and header key is 'Content-Type'.