How to Set Up Supabase from Scratch for Your Project

Introduction

If you need a powerful, open-source alternative to Firebase with a PostgreSQL database, you're in the right place. Supabase offers a comprehensive suite of tools for your backend, including a robust database, authentication, instant APIs, and real-time subscriptions. It handles the heavy lifting so you can focus on building great user experiences.

This guide will get your Supabase project up and running quickly. We'll walk through each essential step. By the end, you'll understand how to use Supabase for your next project.

Let's begin!

Chapter 1: Creating Your Supabase Project

Your journey with Supabase begins with creating a new project. This is where you'll set up your database and get access to all the powerful features Supabase offers. It's a straightforward process, designed to get you up and running in minutes.

Step 1: Sign Up or Log In to Supabase

First things first, head over to the Supabase website and either sign up for a new account or log in if you already have one. You can use your GitHub account for a quick and easy sign-up process. After a successful authentication, you will be prompted to create an organization if you don’t have one.

Step 2: Create a New Project

Once you're logged in, you'll be greeted by the Supabase dashboard. Click on the 'New project' button to start the creation process.

Now, you'll need to fill in some details for your new project:

• Organization: Choose an existing organization or create a new one.

• Name: Give your project a memorable name. This will be used to identify your project in the dashboard.

• Database Password: This is crucial! Create a strong password for your PostgreSQL database. Make sure to save it in a secure place, as you'll need it later.

• Region: Select the region closest to your users for optimal performance.

After filling in all the details, click 'Create new project'. Supabase will then provision your new backend, which might take a few moments. Grab a coffee, you're almost there!

Chapter 2: Your Supabase Dashboard and Database

Once your project is ready, you'll see your project's dashboard. This is your control center for all Supabase features.

Dashboard Overview

The dashboard includes:

• Database: Manage your PostgreSQL database and tables.

• Authentication: Handle user sign-ups and logins.

• Storage: Store and serve files.

• Edge Functions: Deploy serverless functions.

• API Docs: Access auto-generated API documentation.

• and more

Creating Your First Table

Let's create a simple table in your PostgreSQL database:

1. Go to the Database section.

2. Click on Tables.

3. Click + New table.

4. Name your table (e.g., todos).

5. Add columns like id (primary key), created_at (timestamptz), task (text), and is_complete (boolean, default false).

6. Click Save.

You've now created your first database table in Supabase!

Chapter 3: Connecting Your Project to Supabase

Now, connect your application to Supabase. Supabase offers client libraries for various languages.

Step 1: Get Your API Keys

Find your API keys in Project Settings > API Keys. Use the anon public key for client-side apps. Never expose your service_role key client-side!

Step 2: Install the Supabase Client Library

Install the appropriate library for your project. For JavaScript/TypeScript:

npm install @supabase/supabase-js

Step 3: Initialize the Supabase Client

Initialize the client with your project URL and anon key:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

Step 4: Interact with Your Data

Perform CRUD operations on your tables. Examples for the todos table:

Reading Data

async function getTodos() {
  const { data, error } = await supabase.from('todos').select('*')
  if (error) console.error('Error fetching todos:', error.message)
  else console.log('Todos:', data)
}
getTodos()

Inserting Data

async function addTodo(task) {
  const { data, error } = await supabase.from('todos').insert([ { task: task } ])
  if (error) console.error('Error adding todo:', error.message)
  else console.log('Added todo:', data)
}
addTodo('Learn Supabase')

Updating Data

async function updateTodo(id, isComplete) {
  const { data, error } = await supabase.from('todos').update({ is_complete: isComplete }).eq('id', id)
  if (error) console.error('Error updating todo:', error.message)
  else console.log('Updated todo:', data)
}
// updateTodo('your-task-id', true)

Deleting Data

async function deleteTodo(id) {
  const { data, error } = await supabase.from('todos').delete().eq('id', id)
  if (error) console.error('Error deleting todo:', error.message)
  else console.log('Deleted todo:', data)
}
// deleteTodo('your-task-id')

These examples show basic data interaction. Supabase offers more, like real-time subscriptions, authentication, and storage, which you can explore in their docs.

Conclusion

You've successfully set up Supabase for your project! You've learned to create a project, navigate the dashboard, and connect your application for basic data operations.

Supabase is a powerful ecosystem for building scalable applications. Explore its other features like authentication, storage, and real-time capabilities to enhance your projects.

Happy coding!

References

[1] Supabase Official Website

[2] Supabase Documentation - Getting Started