Toolstools / supabase

Supabase

Apa ini

Supabase ialah backend platform.

Ia boleh bagi:

Database.
Authentication.
File storage.

Model simple:

Setting

Frontend = apa user nampak
Backend = tempat data hidup

Kenapa penting

Beginner website boleh kekal frontend-only.

App yang simpan user data biasanya perlukan backend. Supabase useful bila project perlukan saved profiles, bookings, dashboards, uploaded files, atau login.

Apa nak buat

Guna Supabase hanya bila project memang ada data need.

Decide perlu atau tidak

Tanya:

Reference

Does this project need to save user data after refresh?

Kalau no, skip Supabase.

Kalau yes, continue.

Create project

Create account di supabase.com.
Create satu project.
Pilih project name yang match app.
Simpan database password dekat tempat private.
Tunggu dashboard siap provisioning.

Visual checkpoint:

Flow

Supabase Dashboard
  Project selected
  Table Editor visible
  SQL Editor visible
  Authentication visible
  Project Settings -> API visible

Create first table

Start dengan satu table sahaja.

Contoh untuk booking/contact project:

Column	Type	Maksud
`id`	uuid	Unique row ID.
`created_at`	timestamp	Bila row created.
`name`	text	Nama customer.
`email`	text	Email customer.
`message`	text	Message atau booking request.

Tanya AI:

Copy prompt

I am a beginner using Supabase.

My app needs to save:
[describe data]

Suggest one first table only.
Explain each column in simple language.
Do not add authentication yet.

Core features

Feature	Maksud	Beginner action
Database	Simpan rows app data	Start dengan satu table.
Table Editor	Database view macam spreadsheet	Guna untuk inspect data.
SQL Editor	Advanced database commands	Guna later dengan tutor guidance.
Auth	User login system	Add hanya bila app betul-betul perlu account.
Storage	Uploaded files	Guna untuk images/files later.
API keys	Connection keys untuk app	Anon key boleh client-side; service role key private.
RLS	Row Level Security	Keep enabled dan create policies sebelum real user data.

Connect ke web app

Untuk Next.js project, install client:

Terminal command

npm install @supabase/supabase-js

Add env variables secara local:

Setting

NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

Lepas tu add variables yang sama dalam Vercel Project Settings sebelum deploy.

Safety rule

Jangan letak service role key dalam frontend code.

Semak ini:

Setting

Anon key = okay untuk browser use
Service role key = server only, never public

Mistake biasa

Tambah Supabase terlalu awal.
Start dengan authentication sebelum faham app.
Create terlalu banyak table.
Copy database code tanpa tahu tempat dia.
Turn off Row Level Security tanpa faham risk.
Letak service role key dalam .env.local kemudian push.
Connect frontend sebelum table design clear.

Next step

Pergi ke Links.