Mutiara Islam App adalah sistem PPDB (penerimaan siswa baru) untuk Raudhatul Athfal Mutiara Islam Kendari. Sistem ini dibuat karena Google Form generik terasa kurang memadai dan sama sekali tidak membawa branding sekolah. Proses manual sebelumnya, yang mengandalkan Google Forms dan spreadsheet untuk pelacakan, diganti dengan formulir pendaftaran terpusat untuk orang tua dan admin dashboard lengkap untuk sekolah. Keduanya berjalan dari satu codebase Next.js yang sama, hanya dipisah lewat dua subdomain berbeda.
Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.
Desktop
Mobile
Pekerjaan seperti ini biasanya dibagi ke pengembang, desainer UI/UX, desainer grafis, dan pemasar. Di proyek ini, keempat keahlian itu dikuasai satu orang, jadi setiap keputusan datang dari orang yang memahami keseluruhan proyek, bukan hanya bagiannya sendiri.
16
standar yang terpenuhi, dari kode hingga pemasaran.
Dampak bisnis di sini diukur dari 5 area: Kehadiran, Kualitas, Kepercayaan, Konversi dan Pertumbuhan. Semuanya mencakup bagaimana bisnisnya ditemukan, dipersepsikan, dan direspons.
Asal setiap pendaftaran terlihat jelas
Sebelum
Tanpa cara melacaknya, sekolah tidak tahu kanal marketing, iklan, atau tautan mana yang benar-benar membawa orang tua sampai mendaftar, sehingga mustahil mengetahui apa yang sebenarnya berhasil.
Sesudah
Field sumber referral di formulir pendaftaran, ditambah integrasi pelacakan iklan, membuat sekolah bisa langsung melihat kanal mana yang benar-benar mendatangkan pendaftaran.
Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.
Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.
Masalah yang muncul selama membangun proyek ini, dan hasil yang didapat dari menyelesaikannya.
Melayani Dua Subdomain dari Satu Codebase
Formulir pendaftaran publik dan admin dashboard harus berada di dua subdomain berbeda, tetapi tetap berbagi satu deployment Next.js. Solusinya adalah routing layer yang menulis ulang request berdasarkan host header yang masuk.
Dropdown yang Tampil Gelap di Halaman Terang
Dropdown select dirender lewat portal di luar konteks styling halamannya, sehingga secara default memakai tema gelap walau halamannya bertema terang. Masalah ini diperbaiki dengan menimpa class warnanya secara eksplisit di setiap konteks.
Autofill Browser Menimpa Warna Field
Memilih data tersimpan dari saran autofill browser ternyata mengabaikan styling field biasa, jadi dibutuhkan aturan CSS khusus untuk state autofill WebKit maupun standar, termasuk state aktifnya.
Email Gagal Terkirim Sebelum Fungsi Server Dibekukan
Platform hosting bisa membekukan server function sebelum notifikasi email selesai terkirim. Masalah ini diperbaiki dengan menjalankannya sebagai background task yang tetap berjalan walau respons sudah terkirim lebih dulu.
Menyesuaikan Diri dengan Perubahan Nama di Framework Saat Pengembangan
Upgrade versi major framework di tengah proyek mengganti nama konvensi routing utama dan mengubah API cache invalidation, sehingga logic routing dan caching harus disesuaikan dengan konvensi barunya.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Tidak ada notifikasi yang hilang karena fungsi dibekukan
Gambar di bawah 200KB
PageSpeed hijau di keempat kategori
Satu codebase, dua subdomain
Sebelum
Platform hosting bisa membekukan fungsi server yang menangani pendaftaran baru sebelum notifikasi emailnya selesai terkirim, sehingga notifikasi bisa tidak pernah sampai ke tim admin tanpa ada yang sadar.
Sesudah
Pengiriman email dijalankan sebagai background task yang terus berjalan walau respons sudah terkirim, sehingga pendaftaran tidak pernah tertahan menunggu notifikasi, dan notifikasinya tidak berisiko terpotong.
Sebelum
Gambar beresolusi tinggi yang tersebar di seluruh situs, bukan hanya di satu bagian, berisiko memperlambat setiap halaman.
Sesudah
Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, sehingga halaman tetap cepat tanpa penurunan kualitas yang terlihat.
Sebelum
Performa awal tidak konsisten di keempat kategori Google PageSpeed.
Sesudah
Optimasi berkelanjutan untuk pemuatan gambar, JS, dan CSS membuat keempat kategori jadi hijau semua.
Sebelum
Formulir pendaftaran publik dan admin dashboard perlu berjalan di dua subdomain berbeda, tapi membangun dua deployment terpisah berarti menduplikasi codebase dan seluruh dependency-nya.
Sesudah
Routing layer membaca host header dari request yang masuk dan menampilkan halaman yang sesuai dari satu deployment Next.js, tanpa kode yang terduplikasi antara formulir publik dan admin dashboard.
