Rapi di sisipengguna, kuatdi belakangnya

Konteks

Katalog dan alur pemesanan voila.id harus ringan di ponsel dan tetap rapi di semua ukuran layar, dengan data yang datang dari banyak sumber GraphQL.

Kontribusi & keputusan

• —Membangun halaman katalog dan alur pemesanan dengan TypeScript yang ketat — tipe menjadi dokumentasi hidup antara frontend dan API.
• —Memisah state pemesanan (Zustand) dari data server Apollo, supaya cache GraphQL tidak tercampur dengan state UI.
• —Bekerja dekat dengan desainer: layout diuji dari layar kecil sampai desktop supaya tidak ada komponen yang melompat.

Dampak

Halaman baru lebih cepat dikembangkan tanpa takut merusak bagian lain, dan data GraphQL yang aneh lebih mudah dilacak.

Konteks

Pengadaan end-to-end untuk klien Peruri: dari katalog vendor sampai pengajuan yang harus disetujui bertingkat — satu tahap macet, prosesnya berhenti.

Kontribusi & keputusan

• —Membangun API Laravel untuk data vendor, pengajuan, dan persetujuan bertingkat, termasuk validasi di sisi server.
• —Mengolah UI React: katalog vendor, form pengajuan, dan alur approval yang mengikuti struktur organisasi klien.
• —Menyusun laporan pengadaan yang bisa ditelusuri per tahap, dari pengajuan sampai selesai.

Dampak

Pengajuan sampai persetujuan berjalan dalam satu sistem, mengurangi bolak-balik dokumen antar tahap.

Konteks

Dua sistem internal untuk operasional jamtangan dan voila: banyak tenant dalam satu aplikasi — salah menempatkan data bisa membuatnya tertukar.

Kontribusi & keputusan

• —Mengembangkan modul stok, produk, CMS, pesanan, dan manajemen pengguna di React/Next.js dengan pola yang sama di kedua sistem.
• —Menjaga isolasi data antar tenant di sisi frontend: konteks tenant ikut di setiap permintaan dan tampilan selalu sesuai hak akses.
• —Menyusun tabel, form, dan filter yang seragam supaya tim operasional tidak perlu belajar ulang saat pindah modul.

Dampak

Tim operasional menutup pekerjaan harian di satu tempat, dan modul baru lebih cepat ditiru dari sistem yang sudah jalan.