How to connect Supabase backend in WeWeb
💡 Supabase Auth: Changes to default email provider : https://github.com/orgs/supabase/disc...
🚀 Connect Supabase to WeWeb for a Dynamic Car Marketplace
Learn how to fetch and display data from Supabase inside WeWeb to build a responsive car marketplace. This step-by-step guide walks you through connecting your database, setting up row-level security, using advanced formulas, and formatting your UI like a pro.
What You’ll Learn
✅ Connect Supabase to WeWeb using the plugin
✅ Enable row-level security and add read policies
✅ Fetch and display data with collection bindings
✅ Use advanced mode to reference related tables
✅ Lookup values from related collections dynamically
✅ Format numbers, currencies, and text in the UI
✅ Bind car images from Supabase CDN
✅ Display marketplace data cleanly and efficiently
Resources
📕 Docs → https://docs.weweb.io/plugins/data-so...
✨ WeWeb → https://www.weweb.io
❤️ Join the Community → https://community.weweb.io
Chapters
00:00 Intro and Use Case Overview
00:21 Add Supabase Plugin in WeWeb
00:38 Paste Project URL and Public API Key
01:03 Enable or Skip Realtime Tables
01:31 Fetch Cars Table from Supabase
02:07 Troubleshoot Missing Data with RLS
03:02 Add Read Policy in Supabase
03:45 Fetch Data After Policy Setup
04:03 Handle Reference Fields: Advanced Mode
06:01 Best Practices for Data Loading
07:22 Guided Mode and Field Selection
08:07 Display Collection in WeWeb Page
08:49 Use Formulas to Concatenate Car Info
09:51 Format Numbers with Custom JS Formula
10:28 Display Price with Currency Styling
12:01 Lookup Reference Fields with Collections
13:17 Update and Refetch Supabase Data
13:36 Lookup Fuel Type from Collection
14:46 Format Fuel Type with Text Casing
15:27 Bind and Display Car Images
16:02 Final Tips on RLS and Data Visibility
#tutorial #supabase #nocode #frontenddevelopment #weweb