# ✅ Setup Supabase - Quick Checklist

Ikuti langkah ini satu per satu. Centang setiap item setelah selesai.

---

## 📍 PHASE 1: Persiapan (5 menit)

- [ ] **Baca ulang** dokumentasi ini
- [ ] **Siapkan** sticky notes atau notes app untuk simpan credentials
- [ ] **Pastikan** ada koneksi internet stabil

---

## 🌐 PHASE 2: Buat Akun Supabase (5 menit)

### Step 2.1: Daftar Akun
- [ ] Buka https://supabase.com
- [ ] Klik **"Start your project"** atau **"Sign Up"**
- [ ] Pilih metode: **GitHub / Google / Email**
- [ ] Isi data dan verifikasi email

**Status:** ✅ Sudah punya akun Supabase

### Step 2.2: Masuk ke Dashboard
- [ ] Login ke https://app.supabase.com
- [ ] Anda sekarang di **Dashboard Supabase**

**Status:** ✅ Sudah login ke dashboard

---

## 🏗️ PHASE 3: Buat Project (3 menit)

### Step 3.1: Klik "New Project"
- [ ] Di sidebar kiri atau main area, cari tombol **"New Project"**
- [ ] Klik tombol tersebut

### Step 3.2: Isi Form Project
- [ ] **Project Name:** Ketik `ecolearn_db`
- [ ] **Region:** Pilih `Singapore` (atau terdekat dengan Anda)
- [ ] **Pricing Plan:** Pilih `Free` (gratis)

### Step 3.3: Salin Database Password
- [ ] Akan ada password yang di-generate otomatis
- [ ] **COPY & SIMPAN PASSWORD INI** di notepad
  ```
  Password: [password yang sangat panjang]
  ```
- [ ] Klik **"Create new project"**

### Step 3.4: Tunggu Loading
- [ ] Ada loading bar ~ 2-3 menit
- [ ] Tunggu sampai muncul dashboard project

**Status:** ✅ Project dibuat, tunggu sampe selesai

---

## 🔑 PHASE 4: Copy API Credentials (5 menit)

### Step 4.1: Buka Project Settings
- [ ] Klik **⚙️ Project Settings** (di sidebar kiri, paling bawah)

### Step 4.2: Buka Tab "API"
- [ ] Di main area, pilih tab **"API"**
- [ ] Atau cari di sidebar **"Configuration"** → **"API"**

### Step 4.3: Lihat Credentials
Akan tampil seperti ini:

```
┌─────────────────────────────────────────┐
│ Project Settings > API                  │
├─────────────────────────────────────────┤
│                                         │
│ Project URL:                            │
│ https://xxxxxxxxxxxxx.supabase.co      │
│ [Copy] ← Klik ini                       │
│                                         │
│ Project API Keys:                       │
│ › anon key                              │
│   eyJhbGciOiJIUzI1NiIs... [Copy]       │
│ › service_role key                      │
│   eyJhbGciOiJIUzI1NiIs... [Copy]       │
│                                         │
└─────────────────────────────────────────┘
```

### Step 4.4: Copy 3 Credentials
- [ ] **Copy URL** → Simpan di notepad sebagai `URL`
- [ ] **Copy anon key** → Simpan di notepad sebagai `ANON_KEY`
- [ ] **Copy service_role key** → Simpan di notepad sebagai `SERVICE_ROLE_KEY`

**Contoh notepad Anda:**
```
URL: https://aaabbbcccdddeeefffggg.supabase.co
ANON_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
SERVICE_ROLE_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
```

**Status:** ✅ Credentials sudah tersimpan

---

## 📝 PHASE 5: Update .env.local (3 menit)

### Step 5.1: Buka File `.env.local`

**Path:** `Website-Pemilahan-Sampah/.env.local`

**Di VS Code:**
- [ ] Buka folder `Website-Pemilahan-Sampah`
- [ ] Klik file `.env.local` (atau Ctrl+P ketik `.env.local`)

### Step 5.2: Ganti Placeholder

**SEBELUM:**
```dotenv
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key_here
```

**SESUDAH** (paste credentials dari notepad):
```dotenv
NEXT_PUBLIC_SUPABASE_URL=https://aaabbbcccdddeeefffggg.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
```

- [ ] **URL sudah paste?** ✓
- [ ] **ANON_KEY sudah paste?** ✓
- [ ] **SERVICE_ROLE_KEY sudah paste?** ✓

### Step 5.3: Save File
- [ ] **Ctrl+S** (Windows) atau **Cmd+S** (Mac)

**Status:** ✅ .env.local sudah update

---

## 🗄️ PHASE 6: Jalankan SQL Schema (5 menit)

### Step 6.1: Buka Supabase SQL Editor
- [ ] Buka Supabase dashboard: https://app.supabase.com
- [ ] Pilih project: `ecolearn_db`
- [ ] Di sidebar kiri, klik **"SQL Editor"** (atau icon `<>`)

### Step 6.2: Buat Query Baru
- [ ] Klik tombol **"New Query"**
- [ ] Atau klik **"+"** untuk tab baru

### Step 6.3: Copy-Paste SQL Schema
- [ ] Buka file: `Website-Pemilahan-Sampah/SQL_SCHEMA_SETUP.sql`
- [ ] **Select All** (Ctrl+A)
- [ ] **Copy** (Ctrl+C)
- [ ] Ke SQL Editor, **Paste** (Ctrl+V)

### Step 6.4: Jalankan Query
- [ ] Klik tombol **"Run"** (atau Ctrl+Enter)
- [ ] Atau cari icon **"▶️ Execute"**

### Step 6.5: Tunggu Selesai
- [ ] Ada loading indicator
- [ ] Tunggu sampai muncul pesan "Success" atau ✓
- [ ] **Jangan reload/tutup window**

**Status:** ✅ Schema sudah dijalankan

---

## ✔️ PHASE 7: Verifikasi Schema (3 menit)

### Step 7.1: Lihat Table List
- [ ] Di sidebar Supabase, klik **"Database"**
- [ ] Pilih **"Tables"**

### Step 7.2: Pastikan Table Ada
Cek apakah ada tabel ini:

- [ ] `profiles`
- [ ] `videos`
- [ ] `video_progress`
- [ ] `quizzes`
- [ ] `quiz_questions`
- [ ] `quiz_options`
- [ ] `quiz_attempts`
- [ ] `quiz_answers`
- [ ] `game_sessions`
- [ ] `learning_modules`
- [ ] `learning_progress`
- [ ] `badges`
- [ ] `user_badges`

**Jika semua ada:** ✅ Schema berhasil!

**Jika ada yang kurang:**
1. Buka SQL Editor lagi
2. Klik **"New Query"**
3. Jalankan ulang seluruh SQL schema
4. Cek error message

---

## 🚀 PHASE 8: Restart Next.js Server (3 menit)

### Step 8.1: Buka Terminal
- [ ] Di VS Code, buka Terminal (Ctrl+`)
- [ ] Atau buka Command Prompt / PowerShell

### Step 8.2: Masuk ke Folder Project
- [ ] Ketik:
  ```bash
  cd Website-Pemilahan-Sampah
  ```

### Step 8.3: Stop Server Lama
- [ ] Jika sudah ada server running, tekan **Ctrl+C**
- [ ] Tunggu sampai stop

### Step 8.4: Jalankan Server Baru
- [ ] Ketik:
  ```bash
  npm run dev
  ```
- [ ] Tunggu sampai muncul:
  ```
  ▲ Next.js 14.x.x
  ✓ Ready in 1.2s
  ✓ Listening on http://localhost:3000
  ```

- [ ] **Ctrl+Click** link untuk buka browser

**Status:** ✅ Server running tanpa error

---

## 🧪 PHASE 9: Test Signup (5 menit)

### Step 9.1: Buka Browser
- [ ] Buka: `http://localhost:3000`
- [ ] Atau klik link dari terminal

### Step 9.2: Klik "Daftar" / "Sign Up"
- [ ] Di homepage, cari tombol **"Daftar"** atau **"Sign Up"**

### Step 9.3: Isi Form Signup
- [ ] **Email:** `test@example.com` (atau email real Anda)
- [ ] **Password:** `TestPassword123!` (atau password Anda)
- [ ] Klik **"Daftar"**

### Step 9.4: Cek Email Verifikasi
- [ ] Buka inbox email Anda
- [ ] Cari email dari Supabase
- [ ] Klik link verifikasi

**Status:** ✅ Signup berhasil

---

## 🔍 PHASE 10: Verifikasi Data di Database (3 menit)

### Step 10.1: Buka Supabase Dashboard
- [ ] Buka: https://app.supabase.com
- [ ] Pilih project: `ecolearn_db`

### Step 10.2: Lihat Profiles Table
- [ ] Klik **"Database"** → **"Tables"**
- [ ] Klik table **"profiles"**
- [ ] Buka tab **"Data"**

### Step 10.3: Cek Data User
- [ ] Harus ada 1 row dengan email yang Anda gunakan
- [ ] Data kurang lebih seperti:
  ```
  id:          [UUID panjang]
  email:       test@example.com
  username:    user_xxxxxxxx
  total_points: 0
  created_at:  [timestamp]
  ...
  ```

- [ ] **Data ada?** ✅ Database connected!

---

## 📊 PHASE 11: Test Login (3 menit)

### Step 11.1: Logout dari Aplikasi
- [ ] Kembali ke browser app: `http://localhost:3000/game`
- [ ] Cari tombol **"Logout"** di dashboard
- [ ] Atau buka tab baru, buka `http://localhost:3000`

### Step 11.2: Klik "Login"
- [ ] Di homepage, klik **"Login"**

### Step 11.3: Isi Form Login
- [ ] **Email:** `test@example.com` (sama seperti signup)
- [ ] **Password:** `TestPassword123!` (sama seperti signup)
- [ ] Klik **"Login"**

### Step 11.4: Verifikasi Redirect
- [ ] Seharusnya redirect ke `/dashboard`
- [ ] Atau lihat warning banner hilang (jika sebelumnya belum login)
- [ ] **Login berhasil?** ✅

---

## 🎮 PHASE 12: Test Points System (5 menit)

### Step 12.1: Buka Game Page
- [ ] Setelah login, buka: `http://localhost:3000/game`

### Step 12.2: Cari "Simulasi Bermain"
- [ ] Scroll down, cari button **"Simulasi Bermain & Dapatkan Poin"**

### Step 12.3: Klik Button
- [ ] Klik tombol tersebut
- [ ] Lihat poin naik (misalnya 0 → 25)

### Step 12.4: Refresh Halaman
- [ ] Tekan **F5** atau **Ctrl+R**
- [ ] **Poin masih ada?** ✅ System sudah save!

---

## 🎉 PHASE 13: Final Checklist

**Sebelum melanjutkan ke Week 2, pastikan semua ini sudah selesai:**

- [ ] Akun Supabase sudah dibuat
- [ ] Project `ecolearn_db` sudah dibuat
- [ ] Credentials sudah disimpan di `.env.local`
- [ ] Schema SQL sudah dijalankan
- [ ] Semua 13 tables ada di database
- [ ] Next.js server running tanpa error
- [ ] Signup test berhasil
- [ ] User data muncul di `profiles` table
- [ ] Login test berhasil
- [ ] Points system test berhasil
- [ ] Dokumentasi sudah dibaca (SUPABASE_SETUP_GUIDE.md)

**Jika semua checkmark di atas ada:** 

## ✅ **SUPABASE SETUP SELESAI!**

---

## 🐛 Troubleshooting Quick Links

**Error saat startup?**
- → Lihat "Error 1" di SUPABASE_SETUP_GUIDE.md

**Schema tidak jalan?**
- → Lihat "Error 2" di SUPABASE_SETUP_GUIDE.md

**Signup tidak bisa?**
- → Lihat "Error 3 & 4" di SUPABASE_SETUP_GUIDE.md

**Lainnya?**
- → Cari di: https://supabase.com/docs/guides/resources/troubleshooting

---

**Total Time:** ~40-50 menit  
**Difficulty:** ⭐ Pemula (step-by-step)  
**Next:** Week 2 - Implement API Endpoints

**Good luck! 🚀**