Web Systems

Portal Layanan Digital Bapenda Kabupaten Batu Bara

Portal terintegrasi untuk mengakses aplikasi pajak, administrasi, dan monitoring Bapenda Kabupaten Batu Bara secara cepat melalui pencarian dan filter kategori.


About the Project

Portal Layanan Digital Bapenda Kabupaten Batu Bara dikembangkan sebagai pusat akses untuk berbagai aplikasi yang sebelumnya tersebar pada domain berbeda. Portal ini membantu pegawai, petugas, dan pengguna layanan menemukan aplikasi yang dibutuhkan tanpa harus mengingat atau mencari alamat situs secara manual. Portal menyajikan 12 aplikasi dalam kategori Pajak & Retribusi, Administrasi, serta Monitoring & Data. Pengguna dapat melakukan pencarian real-time berdasarkan nama, fungsi, kategori, atau domain aplikasi. Setiap aplikasi ditampilkan melalui kartu informatif yang memuat ikon kontekstual, nama, deskripsi, kategori, domain, dan tautan langsung. Antarmuka dirancang responsif untuk desktop, tablet, dan perangkat seluler. Identitas visual Bapenda dan Pemerintah Kabupaten Batu Bara diterapkan melalui logo resmi, warna institusi, tipografi yang konsisten, serta pola interaksi yang sederhana dan mudah dipahami.

Challenge

Tantangan utama proyek ini adalah menyatukan berbagai aplikasi dengan fungsi dan domain berbeda ke dalam satu pengalaman pengguna yang konsisten. Informasi harus mudah dipindai, tetapi tetap memberikan konteks yang cukup agar pengguna tidak salah memilih aplikasi. Dari sisi teknis, portal perlu tetap ringan, responsif, dan mudah dipelihara tanpa ketergantungan framework atau backend. Pencarian dan filter juga harus berjalan secara real-time tanpa memuat ulang halaman, serta tetap nyaman digunakan pada berbagai ukuran layar.

Solution

Saya membangun portal sebagai aplikasi web statis menggunakan HTML5, CSS3, dan Vanilla JavaScript. Data aplikasi dikelola dalam struktur objek JavaScript yang menjadi sumber utama untuk proses rendering, pencarian, pengelompokan kategori, serta pembuatan tautan layanan. CSS Grid digunakan untuk menghasilkan layout empat kolom yang adaptif, sedangkan media query mengoptimalkan tampilan pada tablet dan perangkat seluler. Pencarian dan filter diproses langsung di browser untuk memberikan respons instan. Inline SVG digunakan agar setiap aplikasi memiliki ikon yang relevan tanpa menambah dependensi eksternal. Pendekatan tanpa framework dipilih karena kebutuhan portal relatif terfokus, tidak memerlukan backend, dan mengutamakan performa serta kemudahan deployment. Portal dapat dipublikasikan melalui web server statis tanpa proses build tambahan.

Impact & Outcome

📈

Portal ini menyederhanakan akses ke 12 aplikasi Bapenda melalui satu halaman terpusat. Pengguna dapat menemukan layanan berdasarkan nama atau kategori dalam beberapa interaksi, mengurangi kebutuhan mengingat alamat domain, dan meminimalkan risiko membuka aplikasi yang tidak sesuai. Implementasi statis juga menjaga waktu muat tetap ringan serta memudahkan pemeliharaan dan deployment.

Tech Stack

Technologies and tools used in this project:

HTML5CSS3Vanilla JavaScriptCSS GridInline SVGGoogle Fonts