Website KBM

Website profil Keluarga Besar Maheswara (KBM) untuk memperkenalkan komunitas, mendokumentasikan momen, dan menghadirkan hiburan interaktif. Konten dikelola melalui kode TypeScript dan aset lokal.

Fitur dan status

Halaman	Rute	Status saat audit 9 November 2026
Beranda	/	Cerita KBM, aktivitas, catatan, intro, reveal saat scroll, dan buku delapan pendiri
Galeri	/galeri	Empat foto, profil delapan karakter, dan fighting desktop melawan CPU, lokal, serta online kode room
Kutipan	/kutipan	Coming Soon
Pameran Proyek	/pameran-proyek	Coming Soon
Gaming	/gaming	Coming Soon
Playlist	/playlist	Coming Soon
Pameran Aib	/pameran-aib	Coming Soon
Kritik Kami	/kritik-kami	Konten utama kosong; belum ada formulir atau pengiriman kritik/saran

Header desktop dan mobile menyediakan Beranda, Galeri, Kutipan, serta Pameran yang langsung menuju /pameran-proyek. Header tidak dirender pada Gaming, Playlist, dan Pameran Aib; footer tetap tersedia. Semua halaman publik. Mode online memakai sesi tamu otomatis dan room Supabase; konten komunitas tetap tanpa CMS atau formulir pengiriman.

Teknologi

Versi berikut berasal dari package.json: Next.js 16.2.4, React/React DOM 19.2.4, TypeScript ^5, Tailwind CSS ^4, Lucide React ^1.14.0, ESLint ^9, Supabase JS 2.119.0, dan runner uji tsx 4.23.15. Pengembangan menggunakan Node.js dan npm. Node.js minimal 22 diperlukan oleh Supabase JS; minor runtime belum dipatok.

Cara menjalankan

Siapkan Node.js 22 atau lebih baru dan npm, lalu jalankan:

git clone git@github.com:franzxml/website-kbm.git
cd website-kbm
npm install
npm run dev

Buka server lokal.

Perintah	Kegunaan
npm run dev	Menjalankan server pengembangan
npm run build	Membuat build produksi dan memeriksa tipe melalui Next.js
npm run start	Menjalankan hasil build produksi
npm run lint	Memeriksa kode dengan ESLint

Gunakan npm dan package-lock.json untuk perubahan ini; bun.lock lama tetap tersedia tetapi tidak diperbarui oleh instalasi npm.

Memainkan KBM Fighter

Buka Galeri → Select Your Fighter → pilih karakter/mode → FIGHT! → pilih CPU, lokal, atau online. Profil karakter tetap dapat dibuka melalui Enter/Space pada pemilih lama. Pertandingan memakai HP 100, 60 detik per ronde, dan dua kemenangan. CPU/lokal dapat dimainkan tanpa Supabase.

Gameplay memerlukan desktop, viewport minimal 1024px, pointer presisi, dan keyboard. Ponsel tetap menampilkan Galeri/pratinjau serta keterangan bermain di desktop. Kontrol pemain 1 dan semua pemain online: A/D bergerak, W lompat, S blok, F/G/H pukul/tendang/spesial. Pemain 2 lokal memakai panah dan J/K/L. Klik arena untuk fokus; Escape menjeda offline atau membuka menu online tanpa menjeda sepihak.

Konfigurasi online

Proyek Supabase: website-kbm (hirwsktqrqxwhjvwbvqt), Singapura, organisasi franzxml's projects. URL dan publishable key lokal disimpan dalam .env.local yang diabaikan Git. Untuk lingkungan lain, isi variabel berikut sebelum build:

NEXT_PUBLIC_SUPABASE_URL=https://<project-ref>.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<publishable-key>

Jangan memakai secret/service-role key pada variabel publik. Aktifkan Anonymous Sign-Ins, gunakan channel Realtime privat saja, dan terapkan migrasi SQL dalam supabase/migrations/ secara berurutan pada proyek tujuan. Proyek yang dibuat dalam pekerjaan ini sudah dikonfigurasi. Push ke GitHub tidak menyertakan .env.local. Pastikan kedua variabel publik tersebut tersedia di lingkungan build hosting agar mode online aktif; CPU dan lokal tetap berfungsi jika konfigurasi online belum tersedia. Pengaturan deployment otomatis tidak diverifikasi dalam pekerjaan ini.

Room memiliki kode enam karakter heksadesimal, dua slot, dan tombol Siap. Host memulai setelah keduanya siap; rematch membutuhkan kedua pemain. Room menunggu berlaku 10 menit, sesi maksimal 30 menit, serta maksimal dua pertandingan online bersamaan. Putus koneksi atau tab disembunyikan memberi 15 detik untuk pulih sebelum pertandingan dibatalkan. Simulasi dijalankan host, sesuai permainan santai tanpa leaderboard kompetitif.

Pengujian

• npm test: pengujian engine dan validasi pesan tanpa jaringan.
• npm run test:online: pengujian nyata terhadap Supabase yang dikonfigurasi dalam .env.local; membuat tiga sesi tamu dan satu room uji lalu menutupnya. Jalankan pada proyek pengembangan, bukan database yang tidak terkait.
• npm run lint dan npm run build: pemeriksaan kode serta build produksi.

Pengujian browser dilakukan melalui Playwright CLI; hasil dan batas verifikasi dicatat di Knowledge.

Struktur direktori

website-kbm/
├── README.md
├── AGENTS.md
├── docs/                # Lima dokumen kanonis pendamping
├── app/
│   ├── _components/     # common, home, dan site
│   ├── _data/           # home, founders, dan galeri
│   ├── galeri/          # Pratinjau, grid foto, audio, dan fighting/
│   ├── <rute>/page.tsx  # Halaman publik lainnya
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── supabase/migrations/ # Schema room, RPC, RLS, dan pembersihan
├── tests/               # Unit engine/protokol dan integrasi online
├── public/              # backgrounds, beranda, brand, characters,
│                        # footer, founders, dan gallery
├── package.json
├── package-lock.json
├── bun.lock
└── ...                  # Konfigurasi Next.js, TypeScript, ESLint, PostCSS, dan Git

Dokumentasi

Dokumentasi proyek terdiri tepat dari tujuh berkas. README ini menjadi pintu masuk; enam lainnya adalah:

Dokumen	Tanggung jawab
AGENTS	Aturan kontribusi dan pemeliharaan dokumentasi
Architecture	Struktur teknis, alur eksekusi, dan dependensi
Design	Tampilan, navigasi, interaksi, dan catatan aksesibilitas
Schema	Struktur konten, state pertarungan, room Supabase, relasi, dan validasi
PRD	Tujuan, pengguna, kebutuhan, dan status fitur
Knowledge	Knowledge Graph: entitas, relasi, sumber bukti, keputusan, riwayat tugas, backlog dan pertanyaan

Ketujuh dokumen dilacak Git bersama kode, pengujian, dan migrasi. Dokumentasi mencatat implementasi, hasil verifikasi, serta keputusan pengguna; kebutuhan produk masa depan dipisahkan dan hal yang belum diketahui ditandai TODO beserta pertanyaannya. .env.local, credential, cache, dan hasil build tetap lokal.

Domain dan kontributor

Domain yang tercatat pada README sebelumnya adalah Website KBM. Ketersediaan deployment tidak diuji dalam audit dokumentasi ini.

Kontributor yang tercatat pada README sebelumnya: @franzxml, @Blackpa77, dan @syidmen. Repositori ditautkan dari footer melalui GitHub Website KBM.