Vote - Aplikasi Pemilihan Ketua Himpunan

Aplikasi mobile untuk pemilihan Ketua Himpunan Mahasiswa menggunakan React Native dan Expo. Aplikasi ini memungkinkan mahasiswa untuk melakukan voting kandidat secara digital dengan sistem autentikasi Firebase.

Tech Stack

• Framework: React Native dengan Expo SDK 54
• Bahasa: TypeScript
• Backend: Firebase (Authentication dan Firestore)
• Routing: Expo Router (file-based routing)
• State Management: React Hooks
• Storage: AsyncStorage untuk session persistence

Fitur

Autentikasi

• Login dengan email dan password
• Registrasi akun baru dengan nama, email, dan password
• Session persistence menggunakan AsyncStorage
• Logout

Voting

• Menampilkan daftar kandidat dengan foto, nama, visi, dan misi
• Validasi NIM sebelum melakukan vote
• Mencegah voting ganda berdasarkan NIM
• Konfirmasi sebelum submit vote
• Menampilkan jumlah vote dan persentase per kandidat
• Pull-to-refresh untuk memperbarui data

Data Pemilih

• Menampilkan daftar mahasiswa yang sudah voting
• Informasi waktu vote

Struktur Folder

app/                    # Screen dan routing (Expo Router)
  (tabs)/               # Tab navigation
    _layout.tsx         # Konfigurasi tab
    vote.tsx            # Screen voting
    mahasiswa.tsx       # Screen daftar pemilih
  _layout.tsx           # Root layout
  index.tsx             # Entry point
  login.tsx             # Screen login/register
  splash.tsx            # Splash screen
components/             # Komponen reusable
config/
  firebase.ts           # Konfigurasi Firebase
constants/
  theme.ts              # Konfigurasi tema dan warna
hooks/                  # Custom hooks
services/
  auth.service.ts       # Service autentikasi
  vote.service.ts       # Service voting dan kandidat
  storage.ts            # Utility AsyncStorage
types/
  kandidat.types.ts     # TypeScript interfaces
scripts/
  seed-kandidat.js      # Script seed data kandidat
  reset-db.js           # Script reset database

Instalasi

Prasyarat

• Node.js versi 18 atau lebih baru
• npm atau yarn
• Expo CLI
• Firebase project dengan Firestore dan Authentication aktif

Langkah Instalasi

1. Clone repository

git clone https://github.com/kdandy/Vote-ReactNative.git
cd Vote-ReactNative

2. Install dependencies

npm install

3. Konfigurasi environment variables

Buat file .env di root folder dengan isi:

EXPO_PUBLIC_FIREBASE_API_KEY=AIzaSyAlgHOwt7uPxK1dVqlMl65OGFSGXkPpzbw
EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN=test-mobile-aad6e.firebaseapp.com
EXPO_PUBLIC_FIREBASE_PROJECT_ID=test-mobile-aad6e
EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET=test-mobile-aad6e.firebasestorage.app
EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=539074616267
EXPO_PUBLIC_FIREBASE_APP_ID=1:539074616267:android:9a861d2586be354d72f44e

4. Setup Firebase

• Buat project di Firebase Console
• Aktifkan Authentication dengan Email/Password
• Aktifkan Firestore Database
• Salin konfigurasi Firebase ke file .env

5. Seed data kandidat (opsional)

npm run seed

Menjalankan Aplikasi

Development Build (direkomendasikan)

# Android
npm run android

# iOS
npm run ios

Expo Go (terbatas)

npm start

Catatan: Beberapa fitur native mungkin tidak berfungsi di Expo Go.

Script Tersedia

Script	Deskripsi
npm start	Menjalankan Expo development server
npm run android	Build dan jalankan di Android
npm run ios	Build dan jalankan di iOS
npm run web	Jalankan versi web
npm run lint	Menjalankan ESLint
npm run seed	Menambahkan data kandidat ke Firestore
npm run reset-db	Menghapus data kandidat dan vote records

Struktur Database Firestore

Collection: kandidat

{
  nim: string,
  nama: string,
  visi: string,
  misi: string,
  foto: string,
  jurusan: string,
  votes: number,
  createdAt: Timestamp,
  updatedAt: Timestamp
}

Collection: vote_records

{
  voterNim: string,
  voterName: string,
  voterEmail: string,
  kandidatId: string,
  kandidatNama: string,
  timestamp: Timestamp
}

Collection: users

{
  uid: string,
  email: string,
  displayName: string,
  createdAt: Timestamp,
  updatedAt: Timestamp
}

Lisensi

MIT License