Voting Node — Aplikasi Voting Online dengan Next.js & MongoDB

Latar Belakang

Di era digital yang terus bergerak cepat, kebutuhan akan sistem pemungutan suara yang transparan, efisien, dan dapat diakses dari mana saja semakin mendesak. Bayangkan sebuah organisasi mahasiswa yang harus menggelar pemilihan ketua BEM, atau sebuah perusahaan rintisan yang ingin menghimpun pendapat tim soal fitur produk berikutnya — mereka semua menghadapi masalah yang sama: tidak ada platform voting yang cukup sederhana untuk di-deploy sendiri, namun cukup kuat untuk diandalkan dalam kondisi nyata.

Banyak developer junior maupun tim kecil yang akhirnya memilih jalan pintas: menggunakan Google Form atau layanan polling pihak ketiga yang tidak bisa dikustomisasi, tidak ada kontrol data, dan sering kali menampilkan branding orang lain. Pain point ini nyata — dan sering diabaikan karena membangun sistem voting dari nol dianggap terlalu kompleks untuk proyek skala kecil-menengah.

Momentum pasar pun mendukung. Dengan meningkatnya kebutuhan digitalisasi proses demokrasi internal di organisasi, komunitas, hingga korporasi, permintaan terhadap solusi voting self-hosted terus tumbuh. Voting Node hadir sebagai jawaban: sebuah aplikasi voting berbasis web yang dibangun di atas Next.js 14 dan MongoDB, dirancang untuk dapat berjalan mandiri, aman, dan mudah dikembangkan lebih lanjut oleh siapa pun yang familiar dengan JavaScript modern.

Solusi yang Ditawarkan

Voting Node mengambil pendekatan yang pragmatis namun solid secara teknis. Alih-alih membangun sistem yang overcomplicated, produk ini berfokus pada apa yang benar-benar dibutuhkan: autentikasi yang aman, mekanisme pencatatan suara yang rapi, dan antarmuka yang responsif. Dibangun di atas Next.js 14 dengan paradigma App Router, aplikasi ini memanfaatkan server-side rendering untuk performa optimal sekaligus kemudahan pengelolaan state di sisi klien.

Di balik layar, MongoDB via Mongoose dipilih sebagai database utama karena fleksibilitasnya dalam menangani skema data voting yang bisa bervariasi — dari voting pilihan tunggal hingga kandidat majemuk. Autentikasi dibangun dengan kombinasi bcryptjs untuk hashing password dan JSON Web Token (JWT) via library jose yang ringan namun compliant dengan standar modern. Hasilnya adalah sebuah sistem yang tidak hanya fungsional, tapi juga dapat dijadikan fondasi bagi pengembangan lebih lanjut: integrasi notifikasi, ekspor hasil, atau bahkan sistem audit trail.

Filosofi desain produk ini sederhana: codebase yang bersih lebih berharga daripada fitur yang berlimpah tapi membingungkan. Setiap bagian dari Voting Node ditulis dengan mempertimbangkan keterbacaan dan kemudahan modifikasi, sehingga developer yang membeli produk ini bisa langsung memahami struktur dan mulai melakukan kustomisasi dalam hitungan jam — bukan hari.

Akses Demo Live

Kamu bisa mencoba langsung aplikasi Voting Node di link demo berikut:

Role URL Demo Username Password

Admin / User

voting-node.lintascode.com

Lihat halaman demo

Lihat halaman demo

Catatan: Credential lengkap tersedia di halaman demo. Data demo dapat di-reset kapan saja menggunakan script seed bawaan.

Highlight Kemampuan

• Autentikasi Berbasis JWT — Sistem login dibangun dengan JSON Web Token menggunakan library jose yang ringan dan modern. Setiap sesi pengguna diverifikasi secara stateless, mengurangi beban server sekaligus memastikan keamanan akses ke endpoint sensitif.
• Hashing Password dengan bcryptjs — Password pengguna tidak pernah disimpan dalam bentuk plain text. bcryptjs digunakan untuk menghasilkan hash yang kuat dengan salt rounds yang dapat dikonfigurasi, memberikan perlindungan solid terhadap serangan brute-force maupun database leak.
• Database MongoDB dengan Mongoose ODM — Mongoose versi terbaru (8.7.0) digunakan untuk mendefinisikan skema data yang terstruktur di atas MongoDB. Ini memberikan fleksibilitas NoSQL sekaligus keamanan validasi data di layer aplikasi sebelum masuk ke database.
• Script Seed Data Bawaan — Tersedia script seed.js yang dapat dijalankan via npm run seed untuk mengisi database dengan data awal — sangat berguna untuk keperluan demo, staging, maupun pengembangan lokal tanpa perlu input manual.
• Antarmuka Responsif dengan Tailwind CSS — UI dibangun menggunakan Tailwind CSS 3.4, memastikan tampilan yang rapi dan responsif di berbagai ukuran layar — dari desktop hingga smartphone — tanpa memerlukan CSS kustom yang berlebihan.
• Arsitektur Next.js 14 App Router — Memanfaatkan fitur terbaru Next.js 14 termasuk App Router, Server Components, dan API Routes. Ini memungkinkan performa rendering yang optimal dan struktur kode yang lebih modular dibanding pendekatan Pages Router tradisional.
• Konfigurasi Port Kustom — Aplikasi dikonfigurasi untuk berjalan di port 3010 secara default, memudahkan deployment di server yang menjalankan multiple service tanpa konflik port. Konfigurasi ini mudah diubah sesuai kebutuhan infrastruktur.
• Siap untuk Production Build — Dengan script npm run build dan npm run start, aplikasi dapat langsung di-deploy ke environment production menggunakan Node.js standar, tanpa ketergantungan pada platform deployment khusus.

Anatomi Teknis

Arsitektur

Voting Node dibangun di atas Next.js 14 yang menggunakan paradigma App Router — sebuah evolusi signifikan dari arsitektur Next.js sebelumnya. Dengan App Router, setiap segmen route dapat memiliki layout, loading state, dan error boundary tersendiri, menjadikan aplikasi lebih modular dan maintainable. Server Components digunakan untuk rendering data-heavy pages tanpa membebani client bundle, sementara Client Components digunakan hanya di bagian yang memerlukan interaktivitas seperti form voting dan feedback UI. API Routes Next.js berfungsi sebagai backend layer — menangani autentikasi, operasi CRUD voting, dan validasi input — sehingga seluruh aplikasi berjalan dalam satu codebase yang kohesif tanpa perlu server terpisah.

Database

MongoDB dipilih sebagai penyimpanan data utama, diakses melalui Mongoose ODM versi 8.7.0. Mongoose memberikan lapisan abstraksi yang kuat di atas MongoDB driver, termasuk definisi skema, validasi otomatis, middleware (hooks), dan query builder yang ekspresif. Untuk aplikasi voting, skema yang fleksibel sangat penting — kandidat bisa berupa objek sederhana atau dokumen kompleks dengan metadata seperti foto, deskripsi, dan nomor urut. MongoDB menangani ini dengan elegan tanpa memerlukan migrasi skema yang rumit. Koneksi database dikelola melalui connection pooling Mongoose yang efisien, memastikan performa tetap stabil bahkan saat trafik meningkat.

Keamanan

Keamanan diimplementasikan di beberapa lapisan. Pertama, password pengguna di-hash menggunakan bcryptjs dengan algoritma bcrypt yang terbukti tahan terhadap serangan dictionary dan rainbow table. Kedua, sesi pengguna dikelola melalui JWT yang di-sign menggunakan library jose — library yang compliant dengan standar JOSE (JSON Object Signing and Encryption) dan direkomendasikan untuk lingkungan Edge Runtime Next.js. Token JWT dapat dikonfigurasi expiry-nya untuk membatasi window of exposure jika terjadi token leak. Ketiga, validasi input dilakukan di sisi server sebelum data diproses ke database, mencegah injeksi data berbahaya. Dengan kombinasi ini, Voting Node memiliki baseline keamanan yang solid untuk deployment production di lingkungan organisasi maupun komunitas.

Skenario Penggunaan Nyata

Bayangkan kamu adalah koordinator sebuah komunitas developer dengan 200+ anggota yang tersebar di berbagai kota. Setiap kuartal, komunitas perlu memilih agenda acara dan pembicara melalui voting anggota. Dengan Voting Node, kamu cukup deploy aplikasi ke VPS, jalankan script seed untuk membuat akun admin, lalu buat sesi voting baru dalam hitungan menit. Anggota bisa langsung mengakses dari browser mereka tanpa perlu install apapun. Hasilnya tercatat rapi di MongoDB dan bisa kamu export untuk keperluan dokumentasi.

Bayangkan kamu adalah developer freelance yang mendapat proyek dari sebuah sekolah menengah atas untuk membangun sistem pemilihan OSIS digital. Budget terbatas, waktu pengerjaan singkat, tapi klien minta tampilan yang profesional dan proses yang aman. Kamu membeli Voting Node, melakukan branding sederhana dengan mengubah warna Tailwind CSS dan logo, lalu deploy ke server sekolah dalam satu hari kerja. Klien puas, kamu bisa fokus pada kustomisasi minor alih-alih membangun sistem dari nol.

Bayangkan kamu sedang membangun startup yang butuh tools internal untuk pengambilan keputusan tim secara demokratis — misalnya voting fitur produk yang akan dikerjakan di sprint berikutnya. Voting Node bisa kamu integrasikan ke infrastruktur internal dalam waktu singkat, dengan autentikasi JWT yang bisa disambungkan ke sistem SSO yang ada di kemudian hari. Hasilnya, tim bisa memberikan suara secara anonim dan transparan, dan datanya tersimpan aman di database yang kamu kontrol sendiri.

Yang Membedakan

• Self-hosted & Full Data Ownership — Berbeda dari layanan polling SaaS seperti Mentimeter atau Strawpoll, Voting Node berjalan di server kamu sendiri. Data tidak pernah meninggalkan infrastrukturmu, penting untuk organisasi yang memiliki kebijakan privasi data ketat.
• Next.js 14 dengan App Router — Bukan sekedar aplikasi React biasa. Penggunaan App Router Next.js 14 memberikan performa rendering yang superior dan struktur kode yang lebih modern dibanding majority template voting yang masih menggunakan Express + React terpisah.
• Codebase JavaScript Murni, Zero Overhead — Tanpa TypeScript yang bisa membingungkan developer junior, tanpa framework state management eksternal yang berat. Stack yang dipilih sengaja minimal namun powerful — ideal untuk dipelajari, dimodifikasi, dan dikembangkan.
• Script Seed Bawaan untuk Onboarding Cepat — Fitur yang sering diremehkan tapi krusial: script seed yang siap pakai memungkinkan siapa pun untuk setup environment demo atau development dalam satu perintah, tanpa perlu dokumentasi panjang.
• Autentikasi Modern dengan jose — Banyak template voting masih menggunakan library JWT lama yang tidak dioptimasi untuk Edge Runtime. Penggunaan jose memastikan kompatibilitas penuh dengan fitur-fitur Next.js terbaru termasuk Middleware.
• Tailwind CSS untuk Kustomisasi Cepat — Dengan utility-first CSS framework, mengubah tampilan — warna brand, tipografi, layout — bisa dilakukan langsung di markup tanpa perlu menyentuh file CSS terpisah. Ideal untuk freelancer yang perlu white-labeling cepat.
• Harga Terjangkau untuk Nilai yang Ditawarkan — Dibanding menyewa developer untuk membangun sistem serupa dari nol (yang bisa memakan waktu berminggu-minggu dan biaya jutaan rupiah), mendapatkan codebase siap pakai ini adalah investasi yang sangat efisien untuk tim maupun individu.

Peta Menu Aplikasi

Berikut peta lengkap halaman & menu yang tersedia di aplikasi, dipisah per area pengguna berdasarkan analisis struktur dan teknologi yang digunakan:

🛡 Halaman Admin

• Dashboard Admin — Halaman utama administrator yang menampilkan ringkasan statistik voting aktif, jumlah suara yang masuk, dan status sesi voting.
• Kelola Sesi Voting — Membuat, mengedit, dan menutup sesi voting. Admin dapat menentukan kandidat, durasi voting, dan status sesi (aktif/tidak aktif).
• Kelola Kandidat — Manajemen daftar kandidat yang akan dipilih dalam sebuah sesi voting, termasuk penambahan dan penghapusan kandidat.
• Manajemen Pengguna — Daftar akun terdaftar yang berhak memberikan suara, dengan kemampuan mengelola hak akses pengguna.
• Hasil Voting — Halaman rekapitulasi hasil pemungutan suara per sesi, menampilkan perolehan suara masing-masing kandidat.

👤 Halaman User

• Halaman Voting — Halaman inti tempat pengguna yang sudah login dapat melihat sesi voting aktif dan memberikan suara kepada kandidat pilihan mereka.
• Riwayat Suara — Pengguna dapat melihat rekam jejak suara yang pernah mereka berikan, memastikan transparansi dan mencegah double voting.
• Profil Akun — Pengelolaan informasi akun pengguna termasuk data diri dan keamanan akun.

🌐 Halaman Publik

• Halaman Login — Pintu masuk utama aplikasi. Pengguna memasukkan kredensial untuk mendapatkan token JWT dan mengakses fitur voting.
• Halaman Registrasi — Form pendaftaran akun baru bagi pengguna yang belum memiliki akses ke sistem voting.

FAQ

Apakah saya butuh pengalaman programming untuk menggunakan produk ini?

Pemahaman dasar tentang JavaScript dan Node.js sangat disarankan. Kamu perlu bisa menjalankan perintah terminal, menginstal dependencies via npm, dan mengkonfigurasi environment variable. Jika kamu sudah familiar dengan Next.js, proses setup akan terasa sangat mudah.

Database apa yang dibutuhkan dan apakah bisa diganti?

Aplikasi ini menggunakan MongoDB sebagai database utama, diakses via Mongoose. Kamu bisa menggunakan MongoDB Atlas (cloud, gratis tier tersedia) atau instalasi MongoDB lokal. Mengganti ke database lain seperti PostgreSQL membutuhkan refactoring yang signifikan karena seluruh layer data dibangun di atas Mongoose ODM.

Bagaimana cara melakukan deployment ke server production?

Jalankan npm run build untuk membuat production build, lalu npm run start untuk menjalankannya. Untuk deployment yang lebih robust, disarankan menggunakan PM2 sebagai process manager di VPS, atau deploy ke platform seperti Vercel yang mendukung Next.js secara native.

Apakah sistem ini mendukung voting anonim?

Berdasarkan arsitektur yang ada dengan autentikasi JWT, sistem mencatat identitas voter untuk mencegah double voting. Mekanisme anonimisasi hasil (memisahkan identitas voter dari pilihan suara) dapat diimplementasikan sebagai pengembangan lanjutan di layer database.

Bisakah saya mengkustomisasi tampilan dan branding?

Tentu saja. Aplikasi menggunakan Tailwind CSS yang memudahkan kustomisasi visual — dari palet warna, tipografi, hingga layout. Kamu bisa mengubah tema aplikasi cukup dengan memodifikasi konfigurasi Tailwind dan komponen UI yang ada.

Apa yang didapat setelah pembelian?

Kamu mendapatkan akses penuh ke source code lengkap termasuk semua file konfigurasi, script seed, dan dokumentasi penggunaan. Source code bersifat tanpa enkripsi, siap untuk dipelajari, dikembangkan, dan di-deploy sesuai kebutuhan proyekmu.

Apakah ada batasan jumlah voter atau sesi voting?

Tidak ada batasan yang hardcoded di aplikasi. Kapasitas sepenuhnya bergantung pada spesifikasi server dan cluster MongoDB yang kamu gunakan. Untuk ratusan hingga ribuan voter, konfigurasi standar sudah lebih dari cukup.

Roadmap Implementasi

1. Persiapan Environment — Pastikan Node.js (v18+) dan npm sudah terinstal di mesinmu. Siapkan juga akses ke MongoDB, baik lokal maupun via MongoDB Atlas. Buat database baru khusus untuk aplikasi ini.
2. Clone & Install Dependencies — Ekstrak source code yang telah dibeli, masuk ke direktori project via terminal, lalu jalankan npm install untuk menginstal semua dependencies termasuk Next.js, Mongoose, dan bcryptjs.
3. Konfigurasi Environment Variables — Buat file .env.local di root project. Isi dengan nilai-nilai yang dibutuhkan seperti MONGODB_URI, JWT_SECRET, dan konfigurasi lain yang diperlukan aplikasi.
4. Jalankan Script Seed — Eksekusi npm run seed untuk mengisi database dengan data awal termasuk akun admin default. Ini memastikan kamu bisa langsung login dan menjajal semua fitur tanpa perlu input manual.
5. Uji di Development Mode — Jalankan npm run dev dan akses http://localhost:3010. Pastikan login berfungsi, navigasi halaman lancar, dan operasi voting dapat dilakukan tanpa error.
6. Build untuk Production — Setelah pengujian selesai, jalankan npm run build. Proses ini akan mengkompilasi dan mengoptimasi seluruh aplikasi untuk environment production dengan performa maksimal.
7. Deploy ke Server — Upload build ke VPS atau server pilihanmu. Gunakan PM2 (pm2 start npm --name voting-node -- start) untuk menjaga proses tetap berjalan. Konfigurasikan Nginx sebagai reverse proxy yang mengarahkan traffic ke port 3010.
8. Domain & SSL — Arahkan domain kamu ke IP server, lalu setup SSL certificate menggunakan Certbot (Let's Encrypt) untuk mengamankan koneksi HTTPS. Aplikasi voting siap digunakan secara publik! 🎉

Penutup

Di dunia di mana setiap keputusan kolektif membutuhkan media yang adil dan terpercaya, memiliki sistem voting yang kamu kendalikan sendiri adalah keunggulan nyata. Voting Node bukan sekadar template — ia adalah fondasi yang bisa tumbuh bersama kebutuhanmu, dari voting komunitas skala kecil hingga sistem pemilihan internal organisasi yang lebih besar. Dengan stack teknologi yang relevan dan modern, kamu tidak hanya mendapatkan solusi instan, tapi juga kesempatan untuk belajar dan memahami bagaimana aplikasi web full-stack dibangun dengan baik.

Jika kamu sedang mencari titik awal yang solid untuk proyek voting digitalmu — atau ingin mempelajari bagaimana Next.js 14, MongoDB, dan JWT bekerja bersama dalam konteks aplikasi nyata — Voting Node adalah pilihan yang tepat. Lihat dulu demo live-nya, eksplorasi sendiri, dan putuskan. Source code-nya sudah menunggumu. ✨