Supabase Database
Build a complete product management application powered by Supabase (hosted PostgreSQL). Connect to your Supabase project with a Publishable Key, then browse, create, update, and delete records through the REST API. The example uses the Database control for reading data and the Inet control for write operations (PostJSON, PatchJSON, DeleteJSON). Includes record navigation, a product list, detail form, and real-time status feedback. Teaches you how to integrate any Supabase table with WebVB Studio in both VB6 and Python.
What You'll Learn
Controls Used
Use Cases
- Supabase-backed product catalogs
- Cloud database management dashboards
- Serverless CRUD applications
- Rapid prototyping with hosted PostgreSQL
Supabase Database Setup
Follow these steps before running the example.
1. Create the Table
This schema includes a primary key, timestamps, and NUMERIC for prices to ensure decimal accuracy.
-- Create a table for Products
CREATE TABLE products (
id SERIAL PRIMARY KEY,
name TEXT NOT NULL,
description TEXT,
price NUMERIC(10, 2) NOT NULL,
stock_quantity INTEGER DEFAULT 0,
category TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
); 2. Insert Sample Data
Once the table is created, populate it with starter items so the app has data to display immediately.
-- Insert some sample products
INSERT INTO products (name, description, price, stock_quantity, category)
VALUES
('Mechanical Keyboard', 'RGB backlit with blue switches', 89.99, 50, 'Electronics'),
('Ergonomic Mouse', 'Wireless optical mouse with 6 buttons', 45.00, 120, 'Electronics'),
('Coffee Mug', 'Ceramic 12oz mug with matte finish', 12.50, 200, 'Home & Kitchen'),
('Leather Notebook', 'Hand-bound A5 ruled notebook', 24.00, 75, 'Stationery'),
('USB-C Hub', '7-in-1 adapter with HDMI and SD ports', 35.95, 30, 'Electronics'); 3. Disable RLS (Quick Start)
The fastest way to get this example running. With RLS disabled, your Publishable Key can read, insert, update, and delete without any policies. This is fine for learning and local testing, but never use this in production — anyone with your Publishable Key would have full access to the table.
-- Disable Row Level Security so the Publishable Key has full access
ALTER TABLE products DISABLE ROW LEVEL SECURITY; 4. Set Up Row Level Security (Production)
Row Level Security (RLS) controls who can do what. The anon role (used by the Publishable Key for unauthenticated visitors) can only read. The authenticated role (logged-in users) can insert, update, and delete. Without these policies, Supabase blocks all access by default once RLS is enabled.
-- 1. Enable Row Level Security (this is the bouncer at the door)
ALTER TABLE products ENABLE ROW LEVEL SECURITY;
-- 2. Anyone with the Publishable Key can VIEW products (Read / GET)
CREATE POLICY "Allow public read"
ON products FOR SELECT
TO anon -- "anon" is the Supabase role used by the Publishable Key
USING (true);
-- 3. Only logged-in users can ADD products (Write / POST)
CREATE POLICY "Allow auth insert"
ON products FOR INSERT
TO authenticated
WITH CHECK (true);
-- 4. Only logged-in users can EDIT products (Update / PATCH)
CREATE POLICY "Allow auth update"
ON products FOR UPDATE
TO authenticated
USING (true);
-- 5. Only logged-in users can DELETE products (Delete / DELETE)
CREATE POLICY "Allow auth delete"
ON products FOR DELETE
TO authenticated
USING (true); 5. Enable Realtime (Optional)
If you want your app to update instantly when a product price or stock changes, tell Supabase to listen to this table. You can also do this from the Supabase Dashboard UI.
ALTER PUBLICATION supabase_realtime ADD TABLE products; Why this schema works well
- ✓ SERIAL — automatically handles ID incrementing so you don't have to provide one
- ✓ NOW() — automatically timestamps when a product is added
- ✓ NUMERIC — better than FLOAT for money because it avoids rounding errors
Code Preview
Here's a taste of the code. Open the full example in WebVB Studio to explore, modify, and run it.
Sub cmdConnect_Click
ApiKey = Trim(txtKey.Text)
BaseUrl = Trim(txtUrl.Text) & "/rest/v1"
Data1.InitREST BaseUrl
Data1.SetHeader "apikey", ApiKey
Data1.SetHeader "Authorization", "Bearer " & ApiKey
Data1.TableName = Trim(txtTable.Text)
Reload
End Sub
Sub cmdSave_Click
Dim url
url = BaseUrl & "/" & Trim(txtTable.Text)
Inet1.PostJSON url, BuildBody(), "OnInserted"
End Sub def cmdConnect_Click():
global api_key, base_url
api_key = txtKey.Text.strip()
base_url = txtUrl.Text.strip() + "/rest/v1"
Data1.InitREST(base_url)
Data1.SetHeader("apikey", api_key)
Data1.SetHeader("Authorization", "Bearer " + api_key)
Data1.TableName = txtTable.Text.strip()
reload_data()
def cmdSave_Click():
body = build_fields()
url = base_url + "/" + txtTable.Text.strip()
Inet1.PostJSON(url, body, "OnInserted") Try the Supabase Database Example
Open this example in WebVB Studio and start experimenting. Modify the code, tweak the controls, and make it your own.
Open in WebVB StudioRelated Examples
Product Database
IntermediatePersistent database with CRUD operations using Database control.
SQLite Database
AdvancedFull SQL support with SQLite - tables, queries, and data management.
REST API Client
IntermediateConnect to REST APIs - fetch, create, update and delete data.