Cara Situs Ini Dibuat

ShinyQ HQ dibangun secara terbuka, satu pull request demi satu, oleh AI coding agent yang bekerja dari spec dan rencana tertulis, sementara Kurniadi me-review dan me-merge pekerjaannya. Halaman ini mengikuti pembangunannya dari cetak biru sampai gate yang menjaganya tetap jujur.

Snapshot per 17 Okt 2026, commit b24b3ac

Kode sumber di GitHub (terbuka di tab baru)

Cetak Biru

Seluruh sistem dalam satu peta: siapa yang menulis kode, ke mana kode dikirim, dan apa yang berjalan saat pengunjung membuka situs.

Cara kerjanya

1
Setiap halaman di-render lebih dulu sebagai HTML statis, sehingga situs klasik berjalan tanpa WebGL atau server.
2
Menara 3D dipasang di sisi klien di atas halaman-halaman itu dan tidak pernah menggantikan isinya.
3
Pages Functions melayani asisten Ask the HQ dan beacon kecil untuk performa dan kunjungan.
4
Sebuah Cron Worker merangkum statistik kunjungan publik ke KV sesuai jadwal, sehingga situs tidak pernah menampilkan log mentah.
5
Deploy produksi hanya berasal dari workflow manual yang memakai ulang satu run CI hijau yang lengkap.

Lini Masa Pembangunan

Putaran pull request yang di-merge, dari fondasi pertama sampai halaman ini. Jumlah dan tanggalnya berasal dari riwayat repositori.

Nomor pull request terbuka di GitHub pada tab baru.

Ronde 19 Okt 2026 hingga 10 Okt 2026
Fondasi dan Lima Lantai
Dataset konten, misi, infrastruktur peluncuran, kerangka menara, rover, dan lima lantai pertama mulai terbentuk.
15 pull request di-merge
- #1
- #2
- #3
- #4
- #5
- #6
- #7
- #8
- #9
- #10
- #11
- #12
- #13
- #14
- #15
Ronde 210 Okt 2026 hingga 11 Okt 2026
Pemuatan Game-First, Situs Klasik, dan Ask the HQ
Situs klasik dirombak, boot cover 3D dan pipeline CI cepat hadir, pekerjaan klien dipindah ke label sektor, dan asisten Ask the HQ diluncurkan, bersama lantai pertama yang bisa dijelajahi, penampil CV, dan perbaikan performa.
30 pull request di-merge
- #16
- #17
- #18
- #19
- #20
- #21
- #22
- #23
- #24
- #25
- #26
- #27
- #28
- #32
- #34
- #35
- #36
- #37
- #38
- #39
- #40
- #41
- #42
- #43
- #44
- #45
- #46
- #47
- #49
- #50
Sebelum
Sesudah
Beranda situs klasik, dari mockup desain sampai halaman yang dibangun.
Ronde 312 Okt 2026
Title Case, Call Pad, dan Lantai Tulisan
Judul beralih ke Title Case dengan satu urutan proyek, call pad elevator dan hero landing baru hadir, dan lantai Tulisan serta roof deck dibangun.
6 pull request di-merge
- #52
- #53
- #54
- #55
- #56
- #58
Sebelum
Sesudah
Hero landing, dari mockup desain sampai halaman yang dibangun.
Ronde 412 Okt 2026
Point-and-Go, Onboarding, dan Aula Sorotan
Perspektif, tautan langsung, dan proyek ticketing bergabung ke konten, lalu gerakan point-and-go, PDF makalah, dialog Rover, onboarding, dan Aula Sorotan ditambahkan.
7 pull request di-merge
- #59
- #60
- #61
- #62
- #63
- #64
- #65
Ronde 512 Okt 2026 hingga 13 Okt 2026
Performa, Kamera, dan Tontonan
Kartu share dan SEO hadir, elevator dan kamera menjadi lebih mulus dan bebas, perbaikan GPU, CPU, dan memori menetapkan gate performa, lalu pengaturan Motion dan papan melayang tiba.
20 pull request di-merge
- #66
- #67
- #68
- #70
- #71
- #72
- #73
- #74
- #75
- #77
- #78
- #79
- #81
- #82
- #83
- #84
- #85
- #86
- #87
- #88
Ronde 613 Okt 2026 hingga 15 Okt 2026
Statistik Kunjungan, Ruang Ops, Data dan ML, Keamanan
Statistik kunjungan publik, Tech Reactor, Ops Control Room, pod Data dan ML, dan Topic Constellation dibangun, disusul audit keamanan, jawaban Ask tentang cara situs dibuat, dan desain ulang README.
43 pull request di-merge
- #89
- #90
- #91
- #92
- #93
- #94
- #95
- #96
- #97
- #98
- #99
- #100
- #102
- #103
- #104
- #107
- #110
- #111
- #112
- #113
- #116
- #121
- #122
- #123
- #125
- #126
- #127
- #128
- #130
- #131
- #132
- #133
- #135
- #136
- #137
- #138
- #139
- #140
- #141
- #142
- #143
- #144
- #145
Ronde 715 Okt 2026 hingga 16 Okt 2026
Uptime, CSP, dan Chunk Lantai
Peringatan uptime per jam dan hash CSP per halaman hadir, paket ditingkatkan, lantai dimuat sebagai chunk terpisah, dan lantai Labs dibagi menjadi tiga papan proyek terpisah.
22 pull request di-merge
- #146
- #147
- #149
- #151
- #153
- #154
- #155
- #157
- #158
- #159
- #160
- #161
- #162
- #163
- #164
- #165
- #166
- #167
- #168
- #169
- #170
- #171
Sebelum
Sesudah
Lantai Labs sebelum dan sesudah tiga papan terpisah.
Ronde 816 Okt 2026 hingga 17 Okt 2026
Diagram, Musik, Siang dan Malam
Diagram arsitektur, musik ambient, tautan Situs klasik yang bisa dibagikan, dan smart CI ditambahkan, bersama langit siang dan malam, HUD Corners dengan minimap, dan kedatangan ala L3 di setiap lantai.
11 pull request di-merge
- #172
- #173
- #174
- #175
- #176
- #181
- #182
- #183
- #184
- #185
- #186
Ronde 917 Okt 2026Sedang berjalan
Poles Kamera dan Ruang Mesin
Perbaikan kamera dan fly-in pembuka datang lebih dulu, lalu kisah pembangunan ini dan lantai rahasia B1 Engine Room yang akan menceritakannya.
4 pull request di-merge
- #187
- #188
- #189
- #190

Bekerja dengan AI Agent

Agent menulis kode; manusia memegang keputusan. Setiap perubahan mengikuti loop yang sama, dengan plan dan spec tersimpan di repositori.

Setiap perubahan, langkah demi langkah

1
Spec
Brainstorm bersama agent berakhir pada design spec tertulis yang menyatakan apa yang dibangun dan mengapa, dengan keputusan konten pemilik sebagai penentu akhir.
2
Rencana
Spec menjadi rencana langkah demi langkah di repositori: task kecil, file yang tepat, test ditulis lebih dulu, dan perintah yang membuktikan setiap langkah.
3
Task Agent
Workflow superpowers menjalankan rencana sebagai task berbasis subagent: satu agent baru per task, masing-masing mengembalikan laporan beserta bukti test.
4
Review
Setiap task di-review sebelum task berikutnya dimulai. Perubahan tampilan lantai juga melewati visual gate lokal yang menjaga tampilan (scripts/visual-gate.ts) dan membandingkan screenshot di berbagai perangkat dan pose kamera.
5
CI
Pull request harus lulus check wajib: test, build, shard end-to-end, Lighthouse, dan gate performa 3D.
6
Deploy
Pemilik me-merge pull request. Push ke main tidak pernah men-deploy: produksi hanya dirilis lewat workflow deploy, secara manual atau setelah pembaruan live-facts mingguan, dan workflow itu memakai ulang satu run CI hijau yang lengkap.

Agent yang dipakai

GitHub Copilot
Claude Code

Dari rencana sungguhanBaca rencana lengkapnya di GitHub

### Task 5: Bundle gate with per-floor chunk caps

**Files:**
- Modify: `e2e/budgets.ts` (`BYTES_3D_BUDGET.floors`)
- Modify: `e2e/perf/bytes-3d.spec.ts`
- Modify: `scripts/perf-report.ts` (`bytes3d` entry `floors?`, summary line)
- Test: `tests/unit/perf-report.test.ts`

**Interfaces:**
- Consumes: `window.__hq.floorChunks.load(id)` and `?prefetch=off` (Tasks 1 and 4).
- Produces: `BYTES_3D_BUDGET.floors: { L3: 20 * 1024, L4: 16 * 1024, RF: 8 * 1024 }`; perf entry `{ kind: "bytes3d"; tier; js; other; floors?: Partial<Record<"L3" | "L4" | "RF", number>> }`.

Gerbang Kualitas

Pemeriksaan otomatis yang menentukan apakah sebuah perubahan boleh di-merge. Masing-masing menyatakan apa yang diperiksa dan angka yang ditegakkan.

Gerbang Kualitas
Gate	Yang diperiksa dan batasnya
Tipe, Lint, dan Unit TestBlokir merge	TypeScript strict, linter, dan suite Vitest, termasuk test konten dan keamanan publik.Batas Nol error tipe, error lint, dan test yang gagal
Pemindaian RahasiaBlokir merge	Memindai riwayat repositori untuk kredensial yang ter-commit, karena repositori ini publik.Batas Nol rahasia ditemukan
Pemindaian Keamanan PublikBlokir merge	Memindai setiap file teks hasil build terhadap blocklist privat.Batas Nol istilah dalam blocklist pada hasil export
Hash CSP untuk Setiap HalamanBlokir merge	Meng-hash setiap inline script di setiap halaman dan menggagalkan build bila ada yang tanpa hash.Batas Tidak ada inline script tanpa hash
Shard End-to-EndBlokir merge	Playwright menjalankan situs hasil build dalam beberapa shard yang seimbang durasinya, menunggu state dan tidak pernah menunggu waktu.Batas Setiap spec lulus di setiap shard
Ukuran Unduhan 3DBlokir merge	Mengukur JavaScript gzip yang diunduh pengalaman 3D sebelum frame pertama, untuk tier lite dan full.Batas Di bawah 450 KB gzip pada jalur frame pertama
Render dan Memori 3DBlokir merge	Menghitung draw call dan segitiga di setiap lantai, lalu menaiki elevator bolak-balik dan memeriksa bahwa tidak ada yang bocor.Batas Di bawah 150 draw call scene dan 30 ribu segitiga; nol pertumbuhan objek GPU dan pertumbuhan heap di bawah 2 MB
Kecepatan Situs KlasikBlokir merge	Lighthouse CI memuat halaman klasik dan menggagalkan check bila paint lambat, layout bergeser, waktu blocking tinggi, atau script terlalu berat.Batas LCP 2 detik, CLS 0,01, TBT 200 ms, dan JS 240 KB pada halaman klasik
Rencana Smart CIBlokir merge	Membaca path yang berubah dalam pull request dan hanya menjalankan job berat yang dibutuhkan. Jika perencana gagal, semuanya dijalankan.Batas Push ke main selalu menjalankan semua job

Dasbor

Angka yang diukur dari repositori saat situs dibangun: commit, pull request yang di-merge, test, spec, plan, dan budget.

158
Pull request di-merge
172
Commit sejak 9 Okt 2026
320
File unit test
591
Test end-to-end
13
Dokumen spec
73
Rencana tertulis
5
Lantai di menara 3D
450 KB
Batas JavaScript 3D sebelum frame pertama (gzip)
150
Batas draw call per frame
30.000
Batas segitiga per frame
Per jam
Pemeriksaan uptime situs live

Segera Hadir

Bagian lain dari kisah pembangunan ini sedang disiapkan.

Segera hadir
Otak Rover
Cara Ask the HQ menemukan, mendasari, dan memeriksa jawabannya.
Segera hadir
Desain yang Ditolak
Ide yang dicoba lalu dibuang, beserta alasannya.

Cetak Biru

Cara kerjanya

Lini Masa Pembangunan

Fondasi dan Lima Lantai

Pemuatan Game-First, Situs Klasik, dan Ask the HQ

Title Case, Call Pad, dan Lantai Tulisan

Point-and-Go, Onboarding, dan Aula Sorotan

Performa, Kamera, dan Tontonan

Statistik Kunjungan, Ruang Ops, Data dan ML, Keamanan

Uptime, CSP, dan Chunk Lantai

Diagram, Musik, Siang dan Malam

Poles Kamera dan Ruang Mesin