Gallery
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
💡 Klik gambar untuk memperbesar
Deskripsi Projek
Projek "SiPeKa" adalah sebuah aplikasi web yang kami bangun untuk mendigitalkan dan menyederhanakan manajemen keuangan di sekolah, dengan fokus utama pada pengelolaan pembayaran SPP. Tujuan kami adalah menggantikan sistem manual yang tidak efisien dengan platform terpusat yang menyediakan data real-time, memudahkan pelacakan tunggakan, dan menyederhanakan pelaporan keuangan bagi staf administrasi.
Tantangan yang Dihadapi
Efisiensi Input Data Massal
Input data siswa satu per satu sangat tidak praktis. Diperlukan alur kerja yang memungkinkan staf administrasi memasukkan data dalam jumlah besar dengan cepat.
Keamanan & Role-Based Access
Aplikasi mengelola data finansial dan pribadi yang sangat sensitif. Diperlukan sistem yang benar-benar aman dengan pembatasan akses sesuai peran pengguna (Admin, Kepala Sekolah, dsb).
Sinkronisasi Tim (Frontend & Backend)
Beberapa kali terjadi ketidakcocokan data antara backend dan frontend yang menyebabkan bug. Diperlukan komunikasi intensif dan kontrak API yang jelas antar tim.
Laporan Keuangan Dinamis
Sekolah membutuhkan berbagai jenis laporan keuangan. Tantangannya adalah membangun fitur yang dapat menghasilkan laporan secara akurat dan cepat.
Solusi yang Diimplementasikan
Impor Data via Excel
Staf dapat mengunggah file Excel berisi data siswa. Backend secara otomatis mem-parsing, memvalidasi, dan memasukkan data ke database — drastis mengurangi waktu administrasi.
JWT + Role-Based Access Control
Sistem autentikasi JWT dengan RBAC — setiap pengguna memiliki peran (Admin / Kepala Sekolah) dengan hak akses yang berbeda. Password di-hash dengan bcrypt.
RESTful API dengan Kontrak Jelas
API dirancang dengan prinsip RESTful untuk menciptakan "kontrak" yang jelas antar tim. Memisahkan logika bisnis (backend) dan tampilan (frontend) membuat debugging jauh lebih mudah.
Arsitektur Aplikasi
Backend (Server-Side)
- ▸ Node.js + Express.js REST API
- ▸ MySQL — data siswa, SPP, laporan
- ▸ JWT + Bcrypt keamanan data
- ▸ Excel Parser (import massal)
Frontend (Client-Side)
- ▸ React + TypeScript SPA
- ▸ Vite — build tool cepat
- ▸ Tailwind CSS + custom CSS
- ▸ Conditional UI per role
Tim & Peran Saya
Projek ini adalah hasil kolaborasi tim yang solid. Saya bangga bekerja bersama rekan-rekan berikut:
Putra Aditya Pratama
UI/UX Designer
Arsya Maulana Fadillah
Lead Full-Stack Developer
Debian Budi Pangarti
Backend Developer
Dalam projek ini, tanggung jawab utama saya adalah merancang arsitektur REST API, mengembangkan seluruh endpoint backend, mengimplementasikan sistem autentikasi JWT dengan RBAC, membuat fitur import Excel, dan mengintegrasikan backend dengan tim frontend untuk memastikan semua bagian bekerja dengan sempurna.
Demo Credentials
Gunakan akun ini untuk mencoba aplikasi secara langsung:
demo@sipeka.id
Password
demo1234
Tech Stack