Kelas Instan — Template Website Kelas

Template website kelas siap-pakai bergaya iOS + Pinterest: galeri masonry, blog, profil anggota, pesan anonim, dan dashboard admin lengkap yang bisa mengatur seluruh situs tanpa mengubah kode. Dibuat agar bisa langsung di-publish dan dipakai ulang (cukup ganti isi lewat dashboard).

• Stack: Next.js 16 (App Router) · TypeScript · Tailwind CSS · Supabase (Postgres + Storage)
• Auth owner/admin: username + password, sesi cookie ber-tanda-tangan (JWT/jose), HttpOnly + Secure
• Deploy: Vercel (rekomendasi) — SSR untuk SEO Google

---

Mulai cepat

# 1. Install dependency
npm install

# 2. Siapkan Supabase (buat project, jalankan schema, isi .env.local)
#    Ikuti panduan lengkap: supabase/README.md
cp .env.local.example .env.local   # lalu isi nilainya

# 3. Jalankan
npm run dev

Buka http://localhost:3000. Untuk masuk dashboard: http://localhost:3000/dashboard → karena belum ada owner, kamu otomatis diarahkan ke Setup Owner untuk membuat akun pertama (Nama, username, password). Setelah itu langsung masuk dashboard.

Setup database Supabase dijelaskan langkah demi langkah di supabase/README.md (buat project → ambil kunci → jalankan supabase/schema.sql → isi .env.local).

---

Struktur project (pola "sarang laba-laba")

Satu inti kuat yang dipakai ulang banyak fitur — sesuai aturan di CLAUDE.md.

src/
├─ app/
│  ├─ layout.tsx            # root layout (SEO nanti dari site_settings)
│  ├─ page.tsx              # homepage publik (Pinterest masonry) — WIP
│  └─ dashboard/
│     ├─ setup/             # setup owner pertama kali
│     ├─ login/             # login owner/admin
│     └─ page.tsx           # dashboard (shell lengkap menyusul)
├─ components/
│  ├─ ui/                   # primitives reusable: Button, Input, Field, Card, …
│  └─ dashboard/            # komponen khusus dashboard (form auth, dll)
├─ lib/
│  ├─ supabase/             # client (browser) · server (SSR) · admin (service role)
│  ├─ auth/                 # session (jose) · password (scrypt) · permissions · actions
│  ├─ types/database.ts     # KONTRAK tipe DB — sumber kebenaran tunggal
│  ├─ utils/                # cn() · parsing IP & device
│  └─ constants.ts          # fitur dashboard, bucket, cookie, limit upload
└─ proxy.ts                 # guard /dashboard (Next 16: dulu "middleware")
supabase/
├─ schema.sql               # skema DB + RLS + storage (idempotent)
└─ README.md                # panduan setup Supabase

Model keamanan (ringkas)

• anon key (ada di browser) hanya bisa MEMBACA data publik (media approved, anggota, blog published, notifikasi, pengaturan) — dikunci oleh RLS.
• Semua penulisan (upload, pesan, tracking, aksi admin) lewat server memakai service role yang divalidasi lebih dulu. Jadi meski anon key terekspos (memang publik), data tak bisa diubah sembarangan.
• Sesi owner/admin: JWT HS256 (rahasia AUTH_SECRET) disimpan di cookie HttpOnly, Secure, SameSite=Lax. Password di-hash dengan scrypt.

Status pembangunan

Sudah jadi	Sedang menunggu desain Figma
Scaffold + build config	Homepage Pinterest masonry
Supabase client + tipe DB + util	Profil anggota (perbaikan terpotong)
Skema DB + RLS + storage + panduan	Upload publik + pesan anonim (UI)
Setup owner + login + sesi cookie aman	Dashboard: Stats, Media, Pesan, Anggota, Blog, Pengunjung, Admin, Setting
Primitives UI dasar (Button/Input/Card)

Bagian visual sengaja menunggu Figma terhubung (via /mcp di terminal interaktif) agar desainnya presisi. Fondasi non-visual di atas tidak bergantung pada Figma dan sudah lulus npm run build.

Perintah

npm run dev        # mode pengembangan
npm run build      # build produksi
npm run start      # jalankan hasil build
npm run typecheck  # cek tipe TypeScript
npm run lint       # ESLint