LABIRYNTH Logo
LABIRYNTH
Web Application / Sistem Informasi , School Management System, Full Stack Web Development

SIMPKL

Aplikasi web manajemen dan monitoring siswa Praktik Kerja Lapangan (PKL/magang) berbasis Next.js dan Supabase, dengan fitur absensi face recognition, jurnal harian, dan dashboard multi-role (Siswa, Admin, Super Admin).

SIMPKL

Tangkapan Layar & Galeri

SIMPKL screenshot 1
SIMPKL screenshot 2
SIMPKL screenshot 3
SIMPKL screenshot 4
SIMPKL screenshot 5
SIMPKL screenshot 6
SIMPKL screenshot 7
SIMPKL screenshot 8
SIMPKL screenshot 9
SIMPKL screenshot 10
SIMPKL screenshot 11

Konteks & Solusi Teknis

SIMPKL adalah sistem informasi terintegrasi untuk mengelola kegiatan Praktik Kerja Lapangan (PKL) siswa sekolah menengah kejuruan (SMK). Aplikasi ini menghadirkan tiga tingkatan akses (Siswa, Admin/Guru Pembimbing, dan Super Admin) yang masing-masing memiliki dashboard khusus sesuai kebutuhan perannya. Untuk siswa, sistem menyediakan fitur absensi digital (check-in/check-out) yang diverifikasi menggunakan pengenalan wajah (face recognition) berbasis TensorFlow.js, dilengkapi validasi lokasi (geolocation) agar siswa hanya bisa absen dari lokasi tempat PKL yang telah ditentukan. Siswa juga dapat menulis jurnal kegiatan harian sebagai laporan progres PKL. Untuk Admin (guru pembimbing), tersedia dashboard rekap absensi, monitoring jurnal siswa, manajemen lokasi PKL (dengan peta interaktif berbasis Leaflet), manajemen periode PKL, template jurnal, dan data siswa bimbingan. Untuk Super Admin, tersedia kontrol penuh atas data guru, siswa, jurusan/departemen, lokasi, kalender akademik (hari libur), serta pengaturan sistem secara menyeluruh. Salah satu aspek teknis menarik dari project ini adalah optimasi performa dan biaya (cost engineering): foto absensi awalnya disimpan sebagai Base64 di database (menyebabkan pemborosan bandwidth/egress Supabase), lalu dirombak total dengan memindahkan penyimpanan foto ke ImageKit.io (CDN), menerapkan pagination, query count-only untuk statistik dashboard, lazy-load foto on-demand, serta local caching foto berbasis localStorage dengan masa berlaku 24 jam — sehingga bandwidth Supabase bisa dihemat secara signifikan.

Fitur yang Dibangun

  • Autentikasi & manajemen role (Siswa ;Admin;Super Admin) dengan middleware protection
  • Absensi check-in/check-out dengan verifikasi Face Recognition
  • Validasi lokasi absensi (geofencing) dengan peta interaktif (Leaflet)
  • Jurnal kegiatan harian siswa (create; edit; riwayat; draft)
  • Dashboard rekap & monitoring kehadiran serta jurnal siswa
  • Manajemen periode PKL; kalender hari libur; dan cuti/izin
  • Manajemen data guru; siswa; jurusan; dan lokasi PKL
  • Penyimpanan & optimasi foto absensi via ImageKit CDN (thumbnail; kompresi otomatis)
  • Optimasi bandwidth: count-only query;lazy-load foto; local cache 24 jam
  • Dark/Light mode (theme toggle)
  • Mode maintenance sistem
  • Cron job otomatis (auto-alpha/absen otomatis jika siswa tidak check-in)

Teknologi yang Digunakan

Next.js 16 (App Router) + React 19 + TypeScriptTailwind CSS 4 + shadcn/ui (Radix UI primitives)Lucide React (icons)Recharts (grafik)React Hook Form + Zod (validasi form)Supabase (PostgreSQLAuthRow Level Security/RLS)Next.js API Routes & Server ActionsVercel Cron Jobs

Punya kebutuhan proyek serupa?

Ceritakan rencana usaha Anda, saya bantu siapkan website atau modul sistem web yang rapi, cepat dibuka, dan mudah dikelola.

Diskusi via WhatsApp →