Flow end-to-end

Ikuti alur end-to-end utama KilatKoding, dari signup dan checkout sampai webhook, avatar, waitlist, dan AI.

Halaman ini menjelaskan bagaimana satu aksi user bergerak melewati halaman, route API, service pihak ketiga, dan tabel database. Cocok untuk developer, operator, dan pembaca non-tech yang ingin paham gambaran prosesnya.

​

Peta flow utama

Flow	Dimulai dari	Menyentuh apa saja
Auth dan onboarding dasar	halaman auth	Supabase Auth, auth.users, profiles, subscriptions, user_roles
Checkout dan aktivasi subscription	dashboard billing	POST /api/payments, provider payment, webhook, payments, subscriptions, webhook_events, audit_logs
Edit profil dan avatar	dashboard settings	POST /api/profile/avatar, Supabase Storage, POST /api/profile, profiles, audit_logs
Waitlist dan contact	halaman publik	POST /api/waitlist atau POST /api/contact, Supabase atau Resend, rate limit
AI request	UI AI produk	POST /api/ai/chat atau POST /api/ai/generate, provider AI, ai_usage, rate limit

​

Flow auth dan onboarding dasar

1. User daftar atau login

   User masuk lewat halaman auth seperti /auth/login atau /auth/sign-up.

2. Supabase membuat atau memverifikasi session

   Session disimpan dalam alur auth Supabase. Callback seperti OTP dan OAuth masuk ke /auth/confirm.

3. Trigger database membuat data dasar user

   Saat user baru dibuat di auth.users, migration juga menyiapkan record default di profiles, subscriptions, dan user_roles.

4. Area login-aware membaca klaim session

   Dashboard, billing, settings, dan admin membaca klaim auth untuk menentukan akses.

Kalau flow ini gagal, titik cek pertama biasanya:

• Supabase public env,
• redirect URL,
• callback /auth/confirm,
• kebijakan access control admin di user_roles.

​

Flow checkout sampai subscription aktif

1. User memilih plan di dashboard billing

   UI membaca katalog plan dari config/subscriptions.ts.

2. Client memanggil POST /api/payments

   Route memvalidasi body request, memastikan user login, lalu membuat record payments dengan status PENDING.

3. Server membuat sesi checkout provider

   Midtrans mengembalikan Snap token. Doku mengembalikan checkout URL.

4. User menyelesaikan pembayaran di provider

   Setelah itu user biasanya kembali ke /order/[id] atau fallback /payment/callback.

5. Provider memanggil webhook

   Webhook Midtrans atau Doku memverifikasi signature, mencatat event ke webhook_events, lalu memperbarui status payment.

6. Subscription diaktifkan

   Kalau payment menjadi PAID, route webhook mengaktifkan atau memperbarui subscriptions. Audit log juga ikut dicatat.

Tabel yang terlibat:

• payments
• subscriptions
• webhook_events
• audit_logs

​

Flow edit profil dan avatar

1. User membuka dashboard settings

   Halaman settings membaca profile, role, dan avatar yang ada.

2. Client meminta signed upload URL

   POST /api/profile/avatar menerima fileSize dan fileType, lalu mengembalikan token upload kalau valid.

3. Browser upload file ke bucket avatars

   File disimpan ke path ${userId}/avatar di Supabase Storage.

4. Client menyimpan referensi avatar ke profile

   POST /api/profile memperbarui full_name, avatar_path, dan avatar_url.

5. Avatar lama dibersihkan

   Kalau user mengganti avatar, object lama akan dicoba untuk dibersihkan. Audit log juga dibuat.

Penyebab gagal yang paling umum:

• auth belum aktif,
• SUPABASE_SERVICE_ROLE_KEY belum siap untuk write tertentu,
• file terlalu besar,
• MIME type tidak didukung.

​

Flow waitlist dan contact

Waitlist

Alurnya:

• user submit email di /waitlist,
• POST /api/waitlist melewati rate limit berbasis IP,
• payload divalidasi,
• data masuk ke tabel waitlist,
• duplikat email mengembalikan error yang bisa ditangani UI.

Contact form

Alurnya:

• user submit nama, email, dan pesan di /contact,
• POST /api/contact melewati rate limit berbasis IP,
• payload divalidasi,
• server mengirim email lewat Resend,
• inbox tujuan diambil dari CONTACT_EMAIL atau fallback EMAIL_FROM.

​

Flow AI request

1. Client memanggil route AI

   UI produk memanggil POST /api/ai/chat atau POST /api/ai/generate.

2. Server melakukan authorization

   Route memeriksa provider, auth user, subscription plan, dan monthly usage limit.

3. Rate limit dihitung

   Limit request per 5 menit disesuaikan dengan plan user.

4. Request diteruskan ke model

   Server memilih model dari provider aktif lalu mengirim request.

5. Usage dicatat

   Setelah selesai, token usage disimpan ke ai_usage.

Perilaku yang perlu dipahami:

• 401 berarti user belum terautentikasi,
• 429 bisa berarti rate limit request atau monthly usage limit,
• 503 biasanya berarti provider belum dikonfigurasi.

Kalau kamu butuh kontrak endpoint yang lebih spesifik, lanjutkan ke API reference.