Mutiara Islam App adalah sistem PPDB (penerimaan siswa baru) yang dibuat untuk Raudhatul Athfal Mutiara Islam Kendari, lahir dari rasa bahwa Google Form generik saja kurang memadai dan sama sekali tidak membawa branding sekolah. Sistem ini menggantikan proses manual sebelumnya, yang mengandalkan Google Forms dan spreadsheet untuk tracking, dengan formulir pendaftaran terpusat untuk orang tua dan admin dashboard lengkap untuk sekolah. Keduanya berjalan dari satu codebase Next.js yang sama, cuma dipisah lewat dua subdomain berbeda.
Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.
Desktop
Mobile
Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.
Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.
Tinjauan lebih dekat soal apa yang ditawarkan produk jadinya, hambatan di sepanjang jalan, dan hasil akhirnya.
Merutekan Dua Subdomain Dari Satu Codebase
Formulir pendaftaran publik dan admin dashboard harus berada di dua subdomain berbeda, tapi tetap berbagi satu deployment Next.js. Diselesaikan dengan routing layer yang menulis ulang request berdasarkan host header yang masuk.
Dropdown yang Ter-render Gelap di Dalam Halaman Terang
Select dropdown di-render lewat portal di luar konteks styling halamannya sendiri, jadi defaultnya jatuh ke tema gelap meski halamannya sendiri light-mode. Diperbaiki dengan meng-override class warnanya secara eksplisit per konteks.
Autofill Browser Meng-override Warna Field
Memilih nilai tersimpan dari saran autofill browser ternyata melewati styling field form biasa, jadi butuh aturan CSS khusus yang mencakup state autofill spesifik WebKit maupun standar, plus state active-nya.
Email Tidak Terkirim Sebelum Function Freeze
Platform hosting bisa membekukan server function sebelum notifikasi email selesai terkirim. Diperbaiki dengan membungkusnya dalam background task yang tetap berjalan meski respons sudah terkirim duluan.
Menyesuaikan Diri dengan Rename Framework di Tengah Pengembangan
Upgrade versi major framework di tengah proyek mengganti nama konvensi routing inti dan mengubah API cache invalidation. Logic routing dan caching pun harus disesuaikan dengan konvensi barunya.
Bagaimana proyek ini mengubah keadaan bagi bisnis dan penggunanya setelah rilis.
Sistem pendaftaran terpusat
Gambar di bawah 200KB
PageSpeed hijau di keempat kategori
Follow-up WhatsApp satu klik
Toggle pendaftaran satu klik
Biaya infrastruktur nol
Sebelum
Pendaftaran berjalan lewat Google Form generik dan spreadsheet, tanpa branding sendiri dan butuh kerja manual untuk melacak status, follow-up ke orang tua, dan menjaga catatan tetap rapi.
Sesudah
Sistem terpusat sekarang menangani pendaftaran, tracking status, dan alur kerja admin di satu tempat, menghilangkan pemeliharaan spreadsheet manual.
Sebelum
Gambar beresolusi tinggi di seluruh situs, bukan cuma satu bagian, berisiko memperlambat setiap halaman.
Sesudah
Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, menjaga halaman tetap cepat tanpa penurunan kualitas yang terlihat.
Sebelum
Performa awal tidak konsisten di keempat kategori Google PageSpeed.
Sesudah
Optimasi berkelanjutan untuk delivery gambar, JS, dan CSS membawa keempat kategori jadi hijau semua.
Sebelum
Follow-up ke tiap orang tua berarti mencari manual nomor WhatsApp mereka di spreadsheet.
Sesudah
Tombol WhatsApp satu klik dengan template sapaan yang sudah terisi mempercepat follow-up admin langsung dari dashboard.
Sebelum
Proses manual tidak punya cara rapi untuk menandakan pendaftaran sedang ditutup di antara periode penerimaan.
Sesudah
Admin bisa toggle pendaftaran buka atau tutup langsung dari dashboard, otomatis menampilkan pesan tertutup ke pengunjung.
Sebelum
Sistem pendaftaran khusus berisiko menambah biaya hosting atau software berkelanjutan untuk sekolah.
Sesudah
Dibangun sepenuhnya di tingkat gratis, hosting dan Google Sheets sebagai database, menjaga biaya infrastruktur tetap nol.
