GerakDana

Gambaran Umum

Aplikasi ini adalah platform crowdfunding end-to-end yang menghubungkan pemilik campaign dengan para pendukung/funder. Sistem ini dirancang untuk memudahkan proses penggalangan dana, mulai dari publikasi campaign, pendanaan oleh user, verifikasi transaksi, hingga manajemen campaign oleh owner melalui dashboard. Selain backend API, aplikasi juga memiliki frontend user-facing dan admin/dashboard flow untuk operasional harian.

Masalah Yang Diselesaikan

Sebelum proyek ini ditata ulang, aplikasi memiliki beberapa kendala klasik pada proyek legacy:

• Versi teknologi sudah lama sehingga sulit dijalankan di environment modern.
• Integrasi frontend-backend belum stabil (auth session, CORS, state setelah refresh).
• Alur transaksi funding belum tervalidasi end-to-end (proof upload, approval owner, status transisi).
• UX dashboard dan halaman campaign belum cukup jelas untuk memonitor progress dan aktivitas transaksi.

Proyek ini hadir untuk membuat platform kembali berjalan stabil, modern, dan lebih mudah dikembangkan ke depan.

Peran Saya

Kontribusi spesifik yang saya kerjakan dalam proyek ini:

• Melakukan revival proyek legacy agar kembali runnable di stack modern.
• Menata ulang integrasi frontend (Nuxt) dan backend (Go API) agar auth, data fetching, dan state persistence konsisten.
• Membangun dan menstabilkan flow transaksi crowdfunding: create funding, upload bukti bayar, verifikasi owner (approve/reject), serta sinkronisasi status.
• Menambahkan fitur produk yang meningkatkan experience pengguna: multi-image campaign, preview upload, custom confirmation modal, empty state, formatting nominal, dan perbaikan komponen UI utama.
• Menangani bug kritis di produksi lokal seperti 401 saat pindah tab/refresh, CORS preflight issue, binding multipart form, serta mismatch route/ID payload.
• Menambahkan fitur baru “Doa & Dukungan Funder”, opsi anonim saat funding, serta perbaikan ordering dan count transaksi.

Solusi & Fitur Utama

Fitur yang dibangun dan disempurnakan:

• Authentication & Session
  • Login/register API integration.
  • Token handling stabil saat refresh, pindah halaman, dan load awal aplikasi.
• Campaign Management
  • Create/edit campaign.
  • Multi-image upload, preview, remove, set primary image.
  • Delete campaign dengan guard (hanya jika belum ada transaksi).
• Funding & Transaction Flow
  • User membuat funding beserta komentar/doa.
  • Opsi tampilkan nama asli atau anonim.
  • Upload bukti pembayaran (multipart) dengan preview.
  • Owner campaign melakukan approve/reject dengan alasan reject.
  • Status lifecycle transaksi lebih jelas: pending, waiting confirmation, paid, rejected.
• Dashboard & UX Improvement
  • Empty state untuk list penting.
  • Count transaksi + sorting terbaru di atas.
  • Progress dan dana terkumpul ditampilkan lebih jelas.
  • Toast/feedback flow dan modal konfirmasi custom.
• Public Campaign Detail Enhancement
  • Menampilkan “Doa & Dukungan Funder” (hanya transaksi paid).
  • Informasi fund terkumpul, target, backer, dan progress.

Tech Stack & Arsitektur

• Backend
  • Go (Gin) untuk REST API.
  • GORM untuk akses database dan auto-migration.
  • MySQL sebagai penyimpanan data.
  • JWT-based authentication middleware.
• Frontend
  • Nuxt.js 2 (Vue 2) untuk web app.
  • Axios service layer untuk integrasi API.
  • Store-based state management (Nuxt/Vuex pattern).
• Arsitektur Aplikasi
  • Layered backend: handler -> service -> repository.
  • Frontend modular: pages + service API + centralized store.
  • API-first workflow untuk sinkronisasi data campaign, user, dan transaksi.

Tantangan & Solusi Teknis

Tantangan utama yang ditemui beserta penyelesaiannya:

• Legacy dependency mismatch (Node/webpack/nuxt versi lama).
  • Solusi: penyesuaian runtime/dependency agar kompatibel dengan environment saat ini.
• Auth state hilang saat refresh/pindah tab.
  • Solusi: perbaikan strategy token resolution + refetch flow berbasis user context.
• CORS & Authorization preflight error.
  • Solusi: update konfigurasi CORS backend (Authorization di allow headers/methods/origin).
• Multipart bind error pada submit payment proof.
  • Solusi: parse field form secara eksplisit (PostForm) dan validasi manual yang aman.
• Data transaksi menumpuk saat request gagal di tengah proses.
  • Solusi: rollback/hard cleanup transaksi baru ketika payment URL generation gagal.
• Ketidaksesuaian route wildcard di Gin.
  • Solusi: refactor path parameter agar tidak konflik antar endpoint.

Hasil / Value Project

Dampak positif dari pengembangan proyek ini:

• Aplikasi legacy berhasil hidup kembali dan dapat dijalankan end-to-end.
• Flow crowdfunding menjadi lebih reliable dan operasional (dari funding hingga verifikasi owner).
• Stabilitas meningkat pada area kritis: auth, CORS, multipart upload, dan state persistence.
• UX dashboard/public page lebih informatif sehingga user dan owner lebih mudah memantau performa campaign.
• Fondasi kode lebih maintainable untuk iterasi fitur berikutnya (arsitektur service layer + API modular frontend).