> ## Documentation Index
> Fetch the complete documentation index at: https://belajarkoding.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mulai dengan benar

> Siapkan keputusan awal, akun layanan, dan urutan kerja sebelum kamu menjalankan KilatKoding.

## Sebelum menjalankan project

Jangan mulai dari `npm run dev` dulu. Putuskan dulu fitur apa yang benar-benar ingin kamu pakai. KilatKoding memang lengkap, tetapi tidak semua produk butuh semua modul.

## Pilih jalur yang sesuai

### Kalau kamu non-teknis

Gunakan dokumentasi ini untuk:

* memahami halaman dan fitur yang sudah tersedia,
* menyiapkan akun layanan yang dibutuhkan,
* memberi arahan yang jelas ke developer atau AI coding assistant.

### Kalau kamu developer

Gunakan dokumentasi ini untuk:

* memilih fitur yang aktif,
* mengisi `.env.local`,
* menjalankan migrasi Supabase,
* menyesuaikan branding dan pricing,
* memverifikasi build, test, dan deployment.

## Checklist keputusan awal

| Keputusan    | Pilihan                       | Dampak                                                         |
| ------------ | ----------------------------- | -------------------------------------------------------------- |
| Auth         | Aktif atau nonaktif           | Mengontrol login, signup, dashboard, settings, admin           |
| Payments     | Midtrans, Doku, atau nonaktif | Mengontrol billing, checkout, dan webhook                      |
| Contact form | Aktif atau nonaktif           | Menentukan apakah kamu butuh Resend untuk form kontak          |
| Waitlist     | Aktif atau nonaktif           | Menentukan apakah halaman waitlist akan dipakai                |
| AI           | Aktif atau nonaktif           | Menentukan apakah kamu perlu API key OpenAI atau Anthropic     |
| Admin        | Aktif atau nonaktif           | Menentukan apakah panel admin dan role management akan dipakai |

## Akun layanan yang mungkin kamu butuhkan

| Layanan               | Wajib?                            | Dipakai untuk                                                                  |
| --------------------- | --------------------------------- | ------------------------------------------------------------------------------ |
| Supabase              | Ya, jika auth atau data app aktif | Auth, database, profile, subscriptions, payments, waitlist, audit, rate limits |
| Resend                | Opsional                          | Contact form, welcome email, invoice                                           |
| Midtrans              | Opsional                          | Checkout dengan Snap                                                           |
| Doku                  | Opsional                          | Checkout dengan JOKUL                                                          |
| OpenAI atau Anthropic | Opsional                          | Fitur AI                                                                       |

## Playbook setup cepat

Kalau kamu tidak ingin membaca semua halaman dari nol, pakai jalur cepat ini lalu lanjutkan ke halaman detail yang relevan.

| Tujuan                            | Toggle awal yang umum                                                              | Layanan minimum                                                                       | Baca sesudah ini                                                                                                                                                         |
| --------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Validasi ide dengan waitlist dulu | Auth `off`, Waitlist `on`, Contact opsional, Payments `off`, Admin `off`, AI `off` | Supabase, opsional Resend                                                             | [Use case KilatKoding](/kilatkoding/use-cases), [Setup layanan](/kilatkoding/services-setup), [Kustomisasi](/kilatkoding/customization)                                  |
| SaaS berlangganan tanpa AI        | Auth `on`, Payments `on`, Admin `on`, Contact opsional, AI `off`                   | Supabase + Midtrans atau Doku                                                         | [Setup layanan](/kilatkoding/services-setup), [Environment variables](/kilatkoding/environment-variables), [Testing dan deployment](/kilatkoding/testing-and-deployment) |
| SaaS dengan fitur AI              | Auth `on`, Payments opsional, Admin `on`, AI `on`                                  | Supabase + OpenAI atau Anthropic, plus payment provider kalau monetisasi berlangganan | [AI dan tooling](/kilatkoding/ai-and-tooling), [Setup layanan](/kilatkoding/services-setup), [Environment variables](/kilatkoding/environment-variables)                 |
| Portal member atau client         | Auth `on`, Payments opsional, Admin opsional, Contact opsional, AI `off`           | Supabase                                                                              | [Kustomisasi](/kilatkoding/customization), [Komponen dan UI](/kilatkoding/components-and-ui), [Arsitektur](/kilatkoding/architecture)                                    |

`on` dan `off` di atas mengacu ke toggle `NEXT_PUBLIC_ENABLE_*` yang dijelaskan lebih rinci di [Environment variables](/kilatkoding/environment-variables).

Kalau kamu ingin titik mulai yang bisa langsung di-copy ke `.env.local`, buka juga [Resep preset per use case](/kilatkoding/preset-recipes).

## Prompt AI yang bisa langsung kamu pakai

```text theme={null}
Saya ingin menyiapkan KilatKoding untuk produk berikut:

[jelaskan use case, fitur aktif yang diinginkan, payment provider, AI provider, dan siapa yang akan setup]

Tolong bantu saya membuat rencana setup yang rapi:
1. Keputusan awal yang harus saya ambil dulu
2. Service account yang perlu disiapkan
3. Urutan setup paling aman
4. Halaman docs yang harus saya baca setelah ini
5. Checklist verifikasi setelah setup lokal selesai

Pisahkan mana langkah untuk non-tech user dan mana yang butuh developer.
```

## Urutan kerja yang paling aman

<Steps>
  <Step title="Tentukan fitur yang aktif">
    Putuskan modul apa saja yang dipakai. Nanti kamu akan mengatur ini lewat `NEXT_PUBLIC_ENABLE_*` di `.env.local`.
  </Step>

  <Step title="Siapkan akun layanan">
    Buat project Supabase. Tambahkan Resend, Midtrans, Doku, atau AI provider hanya jika memang dipakai.
  </Step>

  <Step title="Jalankan setup lokal">
    Ikuti [Setup lokal](/kilatkoding/local-setup) sesuai sistem operasi kamu.
  </Step>

  <Step title="Isi environment variables">
    Gunakan [Environment variables](/kilatkoding/environment-variables) sebagai referensi utama saat mengisi `.env.local`.
  </Step>

  <Step title="Verifikasi readiness">
    Jalankan `npm run env:check`, lalu cek `GET /api/health` setelah app hidup.
  </Step>
</Steps>

## Hasil yang sebaiknya kamu targetkan

Sebelum kamu mulai kustomisasi besar, pastikan dulu hal-hal ini berjalan:

* landing page bisa dibuka,
* auth flow berjalan atau sengaja dimatikan,
* dashboard bisa dibuka untuk user login,
* payment flow aktif kalau kamu memang menyalakannya,
* `npm run lint`, `npm run typecheck`, dan `npm test` tidak gagal.

<Tip>
  Kalau kamu ingin mengaktifkan hanya sebagian fitur, itu normal. KilatKoding memang didesain agar beberapa area bisa dimatikan lewat toggle dan menampilkan fallback yang jelas.
</Tip>