Simpul

Platform link-in-bio modern (seperti Linktree) — setiap orang dapat mendaftar, memiliki halaman publik kustom di simpul.app/username, serta mengelola profil dan link lewat dashboard intuitif.

Dibangun menggunakan Next.js (App Router) + Supabase (Auth + Database Postgres + Storage).

---

Fitur Utama

• Login Fleksibel: Masuk menggunakan Email atau Username dalam 1 field input.
• Autentikasi Aman: Signup dengan verifikasi kode OTP & proteksi bot Cloudflare Turnstile CAPTCHA.
• Manajemen Profil: Edit nama tampilan, bio, warna avatar default, ganti username, dan unggah foto profil asli (Supabase Storage).
• Kustomisasi Tema: Pilihan tema halaman publik (Default, Ocean, Rose, Forest) dengan CSS Custom Properties dinamis.
• Manajemen Link: Tambah, hapus, sembunyikan, dan urutkan posisi link publik.
• Statistik Klik: Pelacakan otomatis jumlah klik per link via route handler penelusuran (/api/click/[linkId]).

---

1. Setup Supabase (Gratis)

1. Buat akun & project baru di supabase.com.
2. Di dashboard project, buka SQL Editor → paste seluruh isi file supabase/schema.sql → klik Run. Script ini secara otomatis membuat tabel profiles, links, dan link_clicks, fungsi RPC get_email_by_username, aturan Row Level Security (RLS), bucket storage avatars, serta trigger pembuatan profil otomatis.
3. Buka Project Settings → API. Catat dua nilai ini:
   • Project URL
   • anon public key

Konfigurasi Verifikasi Email (OTP Kode 6-8 Digit)

1. Ubah Email Template:
   • Buka Authentication > Email Templates > Confirm signup.
   • Copy & paste seluruh kode HTML dari file supabase/email-template.html (menggunakan token {{ .Token }} untuk kode OTP 6-8 digit).
2. Aktifkan Konfirmasi Email:
   • Buka Authentication > Sign In / Providers > Email.
   • Pastikan opsi "Confirm email" dalam keadaan ON.
3. Setup Custom SMTP (Sangat Disarankan):
   • Buka Authentication > Settings > SMTP Settings.
   • Konfigurasikan Custom SMTP (seperti Resend, SendGrid, dll.) supaya pengiriman kode OTP tidak terkena rate limit bawaan Supabase (2-4 email/jam).

Konfigurasi Reset Password (Lupa Password)

1. Atur Redirect URL:
   • Buka Supabase Dashboard: Authentication > URL Configuration > Redirect URLs.
   • Tambahkan URL: http://localhost:3000/reset-password (untuk dev) dan https://domain-kamu.com/reset-password (untuk prod).
2. Ubah Template Email Reset Password:
   • Buka Authentication > Email Templates > Reset Password.
   • Copy & paste seluruh kode HTML dari file supabase/reset-password-email-template.html.

Konfigurasi Cloudflare Turnstile (CAPTCHA)

1. Aktifkan Captcha Protection di Supabase:
   • Buka Supabase Dashboard: Authentication > Attack Protection > Enable Captcha protection.
   • Pilih provider Turnstile.
   • Paste Secret Key Turnstile (ambil dari dashboard Cloudflare Turnstile — BUKAN NEXT_PUBLIC_TURNSTILE_SITE_KEY yang ada di .env).

Konfigurasi Supabase Storage (Foto Profil / Avatars)

1. Buat Storage Bucket:
   • Buka Supabase Dashboard > Storage > New bucket.
   • Nama bucket: avatars.
   • Aktifkan opsi Public bucket (public: true).
2. Setup RLS Policy untuk Bucket avatars:
   • Sudah otomatis dikonfigurasikan saat menjalankan supabase/schema.sql.

---

2. Setup Lokal

npm install
cp .env.example .env.local

Isi file .env.local atau .env dengan variabel berikut:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your-turnstile-site-key
TURNSTILE_SECRET_KEY=your-turnstile-secret-key

Jalankan server pengembangan:

npm run dev

Buka http://localhost:3000 di browser.

---

3. Deploy ke Vercel (Gratis)

1. Push repository ini ke GitHub.
2. Buka vercel.com → Add New Project → import repo.
3. Di bagian Environment Variables, tambahkan:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
   • NEXT_PUBLIC_TURNSTILE_SITE_KEY
   • TURNSTILE_SECRET_KEY
4. Klik Deploy.

---

Struktur Halaman & API

• / — Landing page
• /signup — Pendaftaran akun dengan verifikasi OTP 6-8 digit & Turnstile CAPTCHA
• /login — Masuk akun (Email atau Username + Password) & Turnstile CAPTCHA
• /dashboard — Panel kontrol profil, ganti username, foto profil, pilihan tema, dan kelola link/statistik
• /demo — Halaman simulasi live demo profil publik
• /[username] — Halaman profil publik dinamis sesuai tema terpilih
• /api/click/[linkId] — Route Handler pelacak statistik klik link

---

Catatan Keamanan

• Enkripsi Password: Password dikelola sepenuhnya oleh Supabase Auth.
• Row Level Security (RLS): Memastikan pengguna hanya dapat mengedit dan melihat data milik mereka sendiri di tingkat database.
• Anti Bot: Proteksi Cloudflare Turnstile aktif pada Signup dan Login.
• Anti Username Enumeration: Logika login memberikan respon error generik yang sama baik saat username tidak ditemukan maupun password salah.