DEV Community

Dhairya Bhargava
Dhairya Bhargava

Posted on

How to Set Up a Free Cloud Database and Add Your First Table with Supabase

Setting up a backend database traditionally meant provisioning virtual machines, managing port forwarding, and writing manual SQL schemas before writing a single line of application logic. Supabase removes this friction by delivering a managed, cloud-hosted PostgreSQL database in minutes, manageable entirely through an intuitive browser interface.

This guide walks through creating a Supabase project, building a structured data table visually, inserting records, and accessing client connection configurations

Prerequisites

To complete this walkthrough, you only need:

  • A modern web browser
  • A free GitHub account or personal email address

Step 1: Create a New Supabase Project

  1. Navigate to supabase.com and select Start your project.
  2. Sign in with GitHub or your email credentials.
  3. Select New project from your organization dashboard.
  4. Set the Project name to Task Manager DB.
  5. Click Generate a password to generate a secure database password, and store it safely.
  6. Choose the Region closest to your target audience (e.g., Asia-Pacific).
  7. Confirm the project is on the Free tier and click Create new project.

Supabase new project creation form

Supabase will provision your isolated PostgreSQL database instance in the background.

Step 2: Build a Table Using the Visual Editor

Once provisioning completes, you can construct relational tables without writing raw DDL statements:

  1. Click the Table Editor icon (the grid icon) on the left sidebar.
  2. Select Create a table (or + New table).
  3. Set the Name to Tasks and add an optional description: A list of daily tasks to track.
  4. Keep the default columns:
    • id (int8, primary key)
    • created_at (timestamptz, default: now())
  5. Click Add column twice to append your application attributes:
    • Column 3: Name: title | Type: text | Default: empty
    • Column 4: Name: is_completed | Type: bool | Default: false
  6. Keep Enable Row Level Security (RLS) selected to safeguard public access policies.

Configuring columns in the Supabase Table Editor

  1. Click Save in the bottom-right corner to commit the table schema.

Step 3: Insert Sample Records

With the schema live, populate sample rows directly through the dashboard interface:

  1. Click Insert in the top action bar, then choose Insert row.
  2. Leave id and created_at empty; the database populates both values automatically.
  3. In the title field, type: Write my first technical article.
  4. Leave is_completed set to false, then click Save.
  5. Repeat the process to add a second record: Pitch my sample guide to clients.

Tasks table showing inserted sample records

Your data will instantly appear in the spreadsheet viewer, complete with primary keys and timestamps.

Step 4: Access Client Connection Snippets

Supabase automatically generates context-aware snippets and client configs based on your active schema:

  1. Click the green Connect button in the top navigation bar.
  2. Under the Framework tab, select your environment (such as Next.js with the App Router).
  3. Copy the package install command:

npm install @supabase/supabase-js @supabase/ssr
Enter fullscreen mode Exit fullscreen mode

Review the ready-to-use .env.local snippet containing your project URL and public publishable key

Supabase connection modal with client configuration

Conclusion

In under ten minutes, you have provisioned a cloud PostgreSQL instance, created a structured table with appropriate data types, populated records visually, and retrieved ready-to-use client initialization credentials. From here, you can query this data directly from any web or mobile front-end using the @supabase/supabase-js software development kit.

Top comments (0)