# 🚀 Quick Reference Card - Supabase Setup

**Print this and keep nearby!** Bantuan cepat saat setup.

---

## 📍 5 Files Penting

1. **SUPABASE_SETUP_GUIDE.md** ← Baca step-by-step detail
2. **SETUP_CHECKLIST.md** ← Ikuti checklist ini (print!)
3. **SQL_SCHEMA_SETUP.sql** ← Copy ke Supabase SQL Editor
4. **VISUAL_GUIDE.md** ← Lihat diagram flow
5. **.env.local** ← Paste credentials di sini

---

## 🔑 4 Credentials Wajib

```
NEXT_PUBLIC_SUPABASE_URL = 
  (dari: Supabase → Project Settings → API → Project URL)

NEXT_PUBLIC_SUPABASE_ANON_KEY = 
  (dari: Supabase → Project Settings → API → anon key)

SUPABASE_SERVICE_ROLE_KEY = 
  (dari: Supabase → Project Settings → API → service_role key)

DATABASE_PASSWORD = 
  (dari: saat create project - SIMPAN DENGAN AMAN!)
```

---

## ⚡ 10 Steps Cepat (15 min version)

1. Buka https://supabase.com → Sign Up
2. Create project: Name = `ecolearn_db`, Region = `Singapore`
3. Copy 3 credentials (URL, anon key, service role key)
4. Edit `.env.local` → paste credentials
5. Buka Supabase → SQL Editor → New Query
6. Copy `SQL_SCHEMA_SETUP.sql` → Paste → Run
7. Verifikasi: Database → Tables (13 tabel ada?)
8. Terminal: Ctrl+C (stop), `npm run dev`
9. Test: http://localhost:3000 → Signup → Login
10. Test: /game → Click "Simulasi" → Refresh (points persist?)

---

## 🛠️ Terminal Commands

```bash
# Masuk folder project
cd Website-Pemilahan-Sampah

# Jalankan dev server
npm run dev

# Stop server
Ctrl+C

# Check Node version
node --version

# Check npm version
npm --version

# Install dependencies (jika belum)
npm install
```

---

## 🌐 Important URLs

```
Supabase Dashboard:
https://app.supabase.com

Project Settings API:
https://app.supabase.com/project/[project-id]/settings/api

Local App:
http://localhost:3000

Game Page:
http://localhost:3000/game

Dashboard:
http://localhost:3000/dashboard
```

---

## 📋 Checklist Mini (Post-Setup)

- [ ] .env.local updated
- [ ] Schema tables: 13 created
- [ ] Server: running without errors
- [ ] Signup: works, user in DB
- [ ] Login: works, session set
- [ ] Points: increment & persist
- [ ] No warnings in console

**All checked?** ✅ **Siap untuk Week 2!**

---

## 🐛 3 Most Common Errors & Fixes

### Error 1: "Missing Supabase environment variables"
```
Fix:
1. Edit .env.local
2. Check 3 credentials ada
3. Ctrl+C → npm run dev (restart)
```

### Error 2: "Database connection failed"
```
Fix:
1. Verify project status: Active (not Creating)
2. Check credentials in .env.local
3. Verify URL format: https://xxx.supabase.co
```

### Error 3: "Signup fails / 400 Bad Request"
```
Fix:
1. Check email format: test@example.com
2. Check password: min 6 chars
3. Check Supabase Auth settings (should be default)
4. Try in Incognito tab (clear cookies)
```

---

## 🎯 Success Milestones

| Milestone | Status |
|-----------|--------|
| Account Created | ✅ |
| Project Created | ✅ |
| Credentials Copied | ✅ |
| .env.local Updated | ✅ |
| Schema Migrated | ✅ |
| Server Running | ✅ |
| Signup Test | ✅ |
| Login Test | ✅ |
| Points System Test | ✅ |

---

## 💡 Tips & Tricks

```
✓ Troubleshooting: Always restart `npm run dev` setelah ubah .env
✓ Credentials: Salin satu per satu, jangan copy paste langsung
✓ Console: Buka DevTools (F12) untuk lihat error messages
✓ Database: Refresh SQL Editor jika query tidak execute
✓ Auth: Cek email inbox untuk verification link
✓ Points: Lihat Supabase game_sessions table untuk history
```

---

## 📞 Help Resources

**Official Docs:**
- https://supabase.com/docs
- https://supabase.com/docs/guides/auth
- https://supabase.com/docs/guides/database

**Community:**
- Supabase Discord: https://discord.supabase.io
- Stack Overflow: tag `supabase`

**Project Docs:**
- README.md (overview)
- SUPABASE_SETUP_GUIDE.md (detail)
- SCHEMA.md (database design)

---

## ⏱️ Timeline Reminder

| Phase | Time | Task |
|-------|------|------|
| 1 | 2 min | Create account |
| 2 | 5 min | Create project |
| 3 | 3 min | Copy credentials |
| 4 | 2 min | Update .env |
| 5 | 5 min | Run schema |
| 6 | 3 min | Verify |
| 7 | 3 min | Restart server |
| 8 | 5 min | Test |
| | **~40 min** | **Total** |

---

## 🎓 Learning Outcomes

Setelah setup selesai, Anda sudah tahu:

- [ ] Apa itu Supabase
- [ ] Cara setup PostgreSQL database
- [ ] Cara setup authentication (signup/login)
- [ ] Cara jalankan SQL migrations
- [ ] Cara connect Next.js ke Supabase
- [ ] Cara protect data dengan RLS
- [ ] Cara test database connections

---

## 🚀 Next Steps (Week 2)

```
1. Implement API Endpoints
   ├─ POST /api/games (save game score)
   ├─ GET /api/games (get user games)
   ├─ POST /api/quiz (save quiz answers)
   └─ GET /api/leaderboard

2. Implement Features
   ├─ Leaderboard page
   ├─ Profile page (with stats)
   ├─ Video progress tracking
   └─ Badge system

3. Testing & Optimization
   ├─ API testing (Insomnia/Postman)
   ├─ Database query optimization
   ├─ Error handling
   └─ User experience polish
```

---

## 📌 Notes

```
Keep this handy during setup!

Write down your credentials (safely):
─────────────────────────────────────
Project URL: 
Anon Key: 
Service Key: 
─────────────────────────────────────

Test emails used:
─────────────────────────────────────
Email: 
Password: 
─────────────────────────────────────
```

---

**Last Updated:** August 14, 2026  
**Created for:** Complete Beginners  
**Difficulty:** ⭐ Very Easy (Follow Steps)

**Good luck! You've got this! 💪**