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
- Navigate to supabase.com and select Start your project.
- Sign in with GitHub or your email credentials.
- Select New project from your organization dashboard.
- Set the Project name to
Task Manager DB. - Click Generate a password to generate a secure database password, and store it safely.
- Choose the Region closest to your target audience (e.g.,
Asia-Pacific). - Confirm the project is on the Free tier and click Create new project.
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:
- Click the Table Editor icon (the grid icon) on the left sidebar.
- Select Create a table (or + New table).
- Set the Name to
Tasksand add an optional description:A list of daily tasks to track. - Keep the default columns:
-
id(int8, primary key) -
created_at(timestamptz, default:now())
-
- 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
-
Column 3: Name:
- Keep Enable Row Level Security (RLS) selected to safeguard public access policies.
- 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:
- Click Insert in the top action bar, then choose Insert row.
- Leave
idandcreated_atempty; the database populates both values automatically. - In the
titlefield, type:Write my first technical article. - Leave
is_completedset tofalse, then click Save. - Repeat the process to add a second record:
Pitch my sample guide to clients.
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:
- Click the green Connect button in the top navigation bar.
- Under the Framework tab, select your environment (such as
Next.jswith theApp Router). - Copy the package install command:
npm install @supabase/supabase-js @supabase/ssr
Review the ready-to-use .env.local snippet containing your project URL and public publishable key
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)