UI/UX Design + Fullstack Development

MTs Yaspisa Attendance & Payroll Progressive Web App

Client

Madrasah Tsanawiyah Yaspisa

My Role

Full Stack Developer

Timeline

4 Weeks (Late 2024)

Tech Stack

PHP Native, Tailwind CSS, MySQL

01 / Challenge

Sekolah Madrasah Tsanawiyah Yaspisa sering kali menghadapi kendala dalam pencatatan absensi guru yang masih manual, berisiko human error, serta perhitungan honorarium yang memakan waktu setiap bulannya.

Tantangannya: Bagaimana membangun sistem yang sangat mudah diakses oleh guru di lapangan (tanpa perlu download aplikasi berat), namun memiliki sistem verifikasi QR Code dan kalkulasi database yang otomatis serta akurat?

02 / The Solution

Dengan pendekatan interdisipliner, saya merancang **Progressive Web App (PWA)** yang menggabungkan kemudahan akses web dengan kapabilitas aplikasi mobile (bisa di-install langsung dari browser).

Desain antarmuka dashboard yang bersih dan intuitif untuk guru dari berbagai tingkat literasi digital.
Fitur QR Code scanning berbasis kamera langsung yang terintegrasi real-time ke sistem database monitoring.
Penerapan teknologiPHP Native untuk keamanan data dan otomasi kalkulasi penggajian admin.

03 / Visual System

Sistem warna dipilih untuk mencerminkan integritas institusi pendidikan (Deep Blue) dipadukan dengan aksen modern (Clean Emerald) untuk status sukses/kehadiran.

#2563EB

Primary Blue

#10B981

Success Green

Mobile Scan Interface

Admin Dashboard Analytics

Next Case Study