Web App production 100 dilihat

SelfGuidance — Platform Psikoedukasi

Materi, refleksi, latihan, dan evaluasi psikologis tersebar di mana-mana, sehingga Guru BK hanya bisa menebak perkembangan santri. Satu API Laravel melayani dua aplikasi Nuxt terpisah, dengan mesin kuesioner yang bisa diubah admin tanpa deploy.

SelfGuidance — Platform Psikoedukasi

Platform psikoedukasi berbasis web untuk tiga peran: Admin mengelola konten dan pengguna, Guru BK memantau perkembangan, dan santri mengakses materi, melakukan refleksi diri, mengerjakan latihan psikologis, serta mengikuti evaluasi.

Studi Kasus

Peran
Full Stack Developer (Freelance)
Durasi
3 Minggu
Ukuran tim
1 orang

Overview

Seorang mahasiswa membutuhkan platform yang menyatukan materi psikoedukasi, refleksi diri, latihan psikologis, dan evaluasi dalam satu tempat — supaya Guru BK benar-benar bisa mengikuti perkembangan santri, bukan menebaknya.

Sebelum sistem ini ada, keempat hal tersebut berjalan terpisah dan tak meninggalkan jejak yang bisa dibaca sebagai perkembangan seseorang.

Masalah

Dua hal yang saling bertarik.

Pertama, ada dua audiens yang sangat berbeda dalam satu sistem: panel pengelola dan portal santri. Menggabungkan keduanya dalam satu aplikasi berarti setiap santri ikut mengunduh kode milik admin, dan batas hak akses akhirnya cuma bersembunyi di antarmuka — bukan hal yang bisa diandalkan untuk data seperti ini.

Kedua, pertanyaan evaluasi sering berubah. Kalau pertanyaannya ditanam di dalam kode, setiap kali konselor mengubah satu kalimat harus ada deploy ulang. Untuk instrumen yang memang dirancang untuk terus disempurnakan, itu berarti sistemnya akan ditinggalkan.

Solusi

Satu API Laravel 11 melayani dua aplikasi Nuxt 4 yang terpisah: panel admin dan portal santri. Pemisahan itu membuat tiap audiens hanya membawa kodenya sendiri, dan batas hak akses dipaksakan di sisi server lewat Policy — bukan disembunyikan di UI.

Mesin kuesionernya dibuat data-driven. Admin mengubah pertanyaan, urutan, dan skala penilaian langsung dari panel, dan kodenya tidak bergerak sama sekali. Ini keputusan yang paling saya syukuri di proyek ini.

Materi disimpan sebagai blok terstruktur, bukan rich text bebas. Rendering jadi bisa diprediksi, dan permukaan injeksi yang selalu dibuka editor HTML bebas tertutup sejak awal.

Karena datanya sensitif, setiap aksi penting dicatat ke audit log, dan persetujuan pengguna disimpan berversi — sehingga ada catatan siapa menyetujui apa, dan kapan.

Arsitektur

Monorepo berisi satu API Laravel 11 dan dua aplikasi Nuxt 4 (Vue 3 + TypeScript), database MySQL.

Berdasarkan audit source code: sekitar 104 endpoint REST API, 34 controller, 25 model, dan 11 service class. Otorisasi memakai Policy, validasi lewat Form Request, dan logika bisnis diletakkan di service layer agar controller tetap tipis.

Hasil

Sekitar 179 automated test menyertai sistem ini. Sekitar 104 endpoint API melayani dua frontend sekaligus. Selesai dalam waktu sekitar tiga minggu. Admin dapat mengubah instrumen evaluasi sendiri tanpa perlu deplo

Pelajaran

Menulis 179 test dalam tiga minggu terdengar seperti beban tambahan, tapi justru sebaliknya: begitu mesin kuesionernya jadi data-driven, jumlah kemungkinan kombinasi meledak, dan tidak ada cara manual untuk yakin sistemnya masih benar setelah setiap perubahan. Test-nya bukan kemewahan — itu yang membuat saya berani mengubah apa pun sampai hari terakhir.

Yang kedua: memisahkan dua frontend terasa berlebihan di awal untuk proyek sekecil ini. Yang membuat saya yakin bukan soal performa, melainkan soal batas keamanan — begitu batas itu ada di server, saya tak perlu lagi memikirkannya setiap kali menambah halaman.

Galeri

Suryaalghifari

Fullstack developer — Membangun aplikasi web yang menyelesaikan masalah nyata.

Kontak

© 2026 Suryaalghifari. Seluruh hak cipta dilindungi.