Gallery
💡 Klik gambar untuk memperbesar
Deskripsi Projek
THebat (TUKAI Hebat) adalah sebuah inovasi platform manajemen edukasi berbasis web yang dirancang untuk mendigitalkan pemantauan akademik dan non-akademik siswa. Menggantikan proses manual dengan ekosistem terpusat yang melibatkan Siswa, Guru, dan Orang Tua secara spesifik. Aplikasi ini menyediakan data real-time untuk absensi, leaderboard poin kebiasaan baik, hingga generasi rapor terotomatisasi.
Tantangan yang Dihadapi
Validasi Akun Multi-Role
Implementasi arsitektur role yang dinamis sangat rentan. Terutama untuk memverifikasi keaslian akun Orang Tua yang mendaftar agar tidak ada pihak luar yang bisa mengakses data siswa sembarangan.
Manajemen Multi-Device (Sesi Paralel)
Akses dari berbagai platform membuat pelacakan sesi (session tracking) menjadi rumit. Jika tidak ditangani, user yang login di HP dan laptop bersamaan bisa berbenturan datanya, atau gagal logout dengan bersih dan memicu celah keamanan.
Beban Pemrosesan Data Excel
Kebutuhan sekolah menuntut adanya rekapitulasi data massal (seperti impor/ekspor absensi dan rapor format .xlsx). Pemrosesan file ratusan baris di server secara sinkron dapat menyebabkan server timeout dan antarmuka freeze.
Kompleksitas UI/UX untuk Berbagai Usia
Mendesain aplikasi untuk Guru yang butuh visualisasi data komprehensif, berbeda total pendekatannya dengan mendesain untuk Siswa (anak-anak) yang butuh elemen visual gamifikasi seperti Leaderboard dan piala yang engaging.
Solusi yang Diimplementasikan
Sistem Parent Code & Verifikasi Email
Membangun alur pendaftaran berjenjang. Orang Tua wajib memasukkan Parent Code unik dari sekolah dan mengonfirmasi token berbasis email sebelum akun bisa aktif meninjau data.
Advanced JWT dengan Tracked Refresh Tokens
Menggunakan arsitektur Dual JWT Auth dan melacak semua Refresh Token di database (PostgreSQL). Menyediakan fitur Logout All Devices untuk mengatasi celah kehilangan device.
Asynchronous Excel Parsing
Menerapkan exceljs dan pemrosesan queue asinkron pada lapisan Node.js agar parsing ribuan baris data Excel tidak memblokir antrean request pengguna lain.
State Management Berbasis Role
Menggunakan Zustand di Frontend untuk memisahkan data store secara tegas. Menyajikan antarmuka Dashboard analitik untuk Guru, dan tampilan Card-sentris nan interaktif untuk menu kebiasaan Siswa.
Arsitektur Aplikasi
Backend (Server-Side)
- ▸ Node.js + Express.js REST API
- ▸ PostgreSQL + Prisma ORM — Integrasi & Skema DB
- ▸ Dual JWT (Access & Refresh) Auth + Bcrypt
- ▸ Logika bisnis kalkulasi poin, Excel Generator, & Email Mailer
Frontend (Client-Side)
- ▸ React 19 + TypeScript SPA
- ▸ Vite — build tool cepat
- ▸ Tailwind CSS — layouting responsif
- ▸ Zustand (Global State), React Hook Form (Validasi)
Peran Saya
Sebagai Full-Stack Developer tunggal dalam proyek ini, saya bertanggung jawab mengerjakan seluruh proses pengembangan aplikasi secara mandiri dari awal (end-to-end). Saya merancang skema database relasional, meracik arsitektur RESTful API yang aman menggunakan Node.js dan Prisma, hingga mengeksekusi integrasi file massal berbasis Excel di backend. Di sisi frontend, saya menerjemahkan ide rancangan menjadi antarmuka UI/UX yang responsif menggunakan React dan Tailwind CSS, serta memastikan pengalaman pengguna (user experience) yang intuitif berjalan mulus untuk ketiga peran sekaligus: Siswa, Guru, maupun Orang Tua.
Demo Credentials
Gunakan akun ini untuk mencoba aplikasi secara langsung:
Role: Guru
guru
password123
Role: Siswa
siswa
password123
Role: Orang Tua
ortu
password123
Catatan: Aplikasi ini masih dalam tahap aktif pengembangan (Beta). Jika Anda mendapati pesan error atau diarahkan ke halaman 404, artinya fitur tersebut sedang dalam tahap pengerjaan.
Tech Stack