All Projects

February 14, 2023

IASPEM VOTE

IASPEM VOTE adalah sistem pemungutan suara digital untuk komunitas alumni SMK yang membutuhkan transparansi dan monitoring real-time pada proses voting.

Dalam proyek ini, saya mengembangkan Web Admin Dashboard untuk pemantauan proses voting: mengelola daftar pemilih, mendaftarkan calon, memonitor hasil real-time, dan menyiapkan export audit. Tanggung jawab saya terbatas pada sisi front-end dashboard dan integrasinya ke API yang disediakan tim backend.

IASPEM VOTE
Next.js 13Ant DesignAxiosWebSocketChart.jsCSV Export

Role

Frontend Developer

Duration

3 Day

Team

Solo

Project Gallery

Swipe or hover to explore

Project Overview

IASPEM VOTE adalah sistem pemungutan suara digital untuk komunitas alumni SMK yang membutuhkan transparansi dan monitoring real-time pada proses voting.

Dalam proyek ini, saya mengembangkan Web Admin Dashboard untuk pemantauan proses voting: mengelola daftar pemilih, mendaftarkan calon, memonitor hasil real-time, dan menyiapkan export audit. Tanggung jawab saya terbatas pada sisi front-end dashboard dan integrasinya ke API yang disediakan tim backend.

Problem

Pemungutan suara alumni sebelumnya dikelola manual atau via mekanisme tidak terpusat sehingga sulit dipantau, dan transparansi hasil menjadi tantangan bagi panitia.

Goal

Menyediakan dashboard admin yang memungkinkan panitia menyiapkan daftar pemilih, mendaftarkan calon, memantau voting secara langsung, dan mengekspor hasil untuk pengauditan.

Solution

Dashboard front-end terintegrasi dengan API backend: fitur import CSV dengan preview-validasi, candidate management UI, websocket-based live tally, chart visualisasi hasil, dan opsi export hasil/audit. Fokus pada keandalan UI dan pencegahan operasi yang tidak disengaja melalui confirmation flows.

Admin Features

  • Import & validasi daftar pemilih (CSV)
  • Candidate CRUD dengan manajemen aset gambar
  • Monitoring real-time hasil voting
  • Export hasil dan audit logs

Technical Highlights

  • WebSocket untuk live tally updates
  • axios + centralized error handling
  • Chart.js untuk visualisasi suara
  • Client-side CSV parsing & preview sebelum submit