HijauKu: Waste Management & Recycling Rewards Portal
Portal front-end responsif dan ringan yang dirancang untuk mendigitalisasi pengelolaan sampah lingkungan. Membantu warga menghitung nilai konversi sampah daur ulang, katalog kategori sampah, serta pengiriman form pengambilan sampah.
Tantangan & Solusi Proyek
Masyarakat sering kali mengalami kesulitan dalam memonitor nilai tukar sampah daur ulang karena pendataan pos sampah yang masih manual dan kurang transparan. Situs web informasi yang ada sebelumnya lambat diakses dari ponsel berspesifikasi rendah serta memiliki navigasi yang rumit.
HijauKu menyederhanakan perhitungan insentif daur ulang sampah. Menggunakan HTML5 semantik dan sistem grid Bootstrap, portal ini menyajikan antarmuka yang sangat ringan dan cepat dimuat. Dilengkapi utilitas JavaScript lokal untuk menghitung estimasi rupiah dari setoran plastik/kertas guna meningkatkan partisipasi pelestarian lingkungan warga.
Membangun Kalkulator Klien yang Ringan & Offline-Ready
Aplikasi harus berjalan optimal pada perangkat berspesifikasi rendah dengan koneksi internet tidak stabil di lokasi pengumpulan sampah tanpa membebani memori ponsel.
Merancang kalkulator konversi sampah daur ulang sepenuhnya di sisi klien menggunakan vanilla JavaScript murni dan animasi transisi CSS3 kustom untuk menghindari overhead library visual tambahan.
- Eksekusi kalkulasi berbasis vanilla JS: Berjalan instan tanpa dependensi framework berat.
- Optimasi transisi CSS murni: Menjaga rendering visual tetap mulus di smartphone kelas menengah ke bawah.
- Mekanisme cache lokal: Menyimpan sesi entri data sementara untuk menghindari data hilang saat koneksi terputus.
Workflow Architecture
Urutan eksekusi transaksi, validasi sesi autentikasi, dan pipeline sinkronisasi data real-time pada arsitektur sistem.
Category Selection
User navigates to dynamic calculator and chooses scrap type (PET, Paper, Metals).
Weight Input & Calculate
User inputs weight in kilograms; vanilla JS processes metrics using predefined price rates.
Pickup Allocation
Calculated invoice coordinates are formatted into WhatsApp template messages for dispatch routing.
Form Submission
Local storage caches user session data to speed up subsequent booking requests.
Tech Stack
Rasional pemilihan fondasi teknologi, bahasa pemrograman, database, dan protokol integrasi eksternal.
HTML5 Semantic Markup
Menyusun kerangka halaman web edukasi lingkungan dengan hierarki heading yang terstruktur rapi, atribut aksesibilitas formulir, dan struktur data yang mudah diindeks peramban.
CSS3 & Custom Animations
Menerapkan tata letak visual berbasis flexbox/grid, efek transisi hover interaktif pada katalog kategori sampah, dan styling kartu edukasi tanpa menambah beban library pihak ketiga.
Bootstrap 5
Mengatur grid layout yang adaptif agar formulir pendaftaran jemput sampah dan tabel perbandingan nilai rupiah tampil rapi dan mudah dioperasikan di layar smartphone warga.
Vanilla JavaScript (ES6+)
Mengeksekusi logika kalkulator konversi daur ulang secara instan di browser; menghitung bobot per kilogram dan mengalikan rasio rupiah secara real-time tanpa perlu memicu request jaringan ke server.
GitHub Pages (Edge CDN)
Infrastruktur hosting web statis berkecepatan tinggi dengan latensi rendah (<250ms) dan waktu aktif (uptime) tinggi melalui jaringan distribusi global untuk kemudahan akses warga.
Core Capabilities
Rincian fitur fungsional utama, kemampuan penanganan transaksi, dan mekanisme keandalan sistem.
Kalkulator Daur Ulang
Kalkulator client-side yang secara instan mengonversi bobot sampah plastik/kertas (kg) menjadi estimasi poin rupiah.
Form Pengajuan Setor
Formulir pengajuan pengambilan sampah tervalidasi untuk memudahkan penjadwalan dengan petugas pengumpul sampah.
Katalog Jenis Sampah
Panduan klasifikasi jenis sampah plastik (PET, HDPE, dll) beserta ketentuan harga konversi per kilogram.
Mobile-First Interface
Tata letak responsif berbasis Bootstrap yang disesuaikan untuk kenyamanan akses petugas lapangan di luar ruangan.
Promoting Green Communities
Interactive client-side calculator running entirely on vanilla JavaScript.
Halaman Utama & Edukasi
Tampilan beranda edukatif dengan pengenalan program daur ulang sampah dan ajakan menjaga kelestarian lingkungan.
Tampilan beranda edukatif dengan pengenalan program daur ulang sampah dan ajakan menjaga kelestarian lingkungan.
FutsalPro
Platform digital end-to-end yang mempermudah pemain futsal melakukan booking lapangan secara instan dengan integrasi pembayaran Midtrans, serta membantu pemilik venue mengelola jadwal, pendapatan, dan turnamen futsal secara efisien.
