💰 WilCash — Simpel Money Manager
🚀 Framework & Teknologi Utama
WilCash dibangun menggunakan arsitektur modern berstandar industri dengan susunan teknologi (Tech Stack) berikut:
- Core Engine & UI Framework: React 19 — Menawarkan siklus rendering super-cepat dengan struktur berbasis komponen fungsional modern.
- Module Bundler: Vite 6 — Menyediakan lingkungan pengembangan yang instan, ringan, dan hasil kompilasi produksi yang sangat teroptimasi.
- Type Safety: TypeScript — Menjamin integritas data transaksi dan konfigurasi pengguna melalui sistem pengetikan statis yang ketat.
- Styling & Visual Design: Tailwind CSS v4 — Memanfaatkan utilitas kelas terbaru untuk mewujudkan visual antarmuka bertema gelap (Dark Mode) yang teduh di mata dengan estetika kaca (Glassmorphic borders & glows).
- Micro-Animations: Framer Motion — Menghidupkan interaksi UI melalui transisi halus, efek spring yang membal alami, dan transisi layar fade-in-out yang mulus.
- Analytical Graphics: Recharts — Digunakan untuk menyajikan visualisasi data interaktif, mencakup bagan alur kas bulanan dan alokasi kategori pengeluaran secara responsif.
- Icons & Glyphs: Lucide React — Ikon bergaya minimalis dan konsisten yang menghiasi seluruh aksi navigasi dalam aplikasi.
📌 Penjelasan Singkat & Alur Aplikasi
Aplikasi WilCash dirancang dengan filosofi offline-first yang dilengkapi sinkronisasi awan opsional. Saat pertama kali dijalankan, sistem akan memuat data keuangan lokal secara aman dan instan tanpa bergantung pada internet.
👁️ Representasi Visual Utama (Logo Aplikasi)
📱 POV Pengguna (Point of View & Alur Penggunaan)
- Splash Loading Screen (WilCash AppLoader):
Saat membuka aplikasi, Anda akan disambut dengan logo piksel-art futuristik yang menyala dengan efek denyut nadi ring orbital (orbital pulse rings) berputar lambat, menginisialisasi basis data lokal Anda dengan transisi memikat.
- Sesi Personal (Login Screen):
Masuk menggunakan nama Anda (misal: Wilden Widya) yang dikombinasikan dengan pin pengaman jika diaktifkan. Panel ini memberikan kesan eksklusif dan ramah.
- Dasbor Finansial Terpadu (The Master Command Center):
Begitu masuk, Anda langsung melihat ringkasan visual saldo bersih Anda saat ini, total pemasukan, dan total pengeluaran dalam skema warna Emerald (pemasukan) dan Rose (pengeluaran).
- Kontrol Batas Pengeluaran & Target Tabungan:
Di dasbor, sebuah indikator visual bar dinamis menunjukkan seberapa dekat Anda dengan batas anggaran bulanan yang Anda tetapkan. Jika pengeluaran Anda menyentuh 80%, sistem secara cerdas akan menyalakan peringatan neon amber redup sebagai pengingat.
⚡ Fitur-Fitur Unggulan
- ✨ Estetika Glassmorphism Modern: Antarmuka gelap yang berkelas, memanfaatkan transparansi blur, efek cahaya tepi, dan gradien kontras tinggi untuk kenyamanan mata saat digunakan malam hari.
- 📊 Analisis Grafik Interaktif: Pantau tren finansial Anda melalui diagram batang terintegrasi dan grafik alokasi kategori untuk memudahkan pemetaan pos pengeluaran terbesar Anda.
- 🔀 Sinkronisasi Google Sheets Ganda: Hubungkan langsung aplikasi Anda ke lembar kerja Google Sheets pribadi melalui Google Apps Script. Kirim, cadangkan, atau pulihkan data Anda kapan pun Anda mau tanpa kehilangan status lokal.
- 🔔 Pengelola Batas Anggaran & Target Tabungan: Tetapkan batas anggaran bulanan serta target tabungan secara dinamis. Lihat visualisasi persentase pencapaian secara langsung di dasbor utama.
- 📝 Input Transaksi Instan: Tambahkan transaksi pemasukan atau pengeluaran secara kilat lengkap dengan kategori kustom, catatan transaksi detail, serta penanggalan yang fleksibel.
- ⚡ Mode Offline Handal: Bekerja 100% tanpa jaringan internet. Seluruh data disimpan langsung di penyimpanan lokal terenkripsi (LocalStorage) peramban Anda.
💻 Cara Kloning & Menjalankan secara Lokal
Ikuti panduan langkah-demi-langkah di bawah ini untuk menduplikasi proyek ini dan menjalankannya di lingkungan lokal Anda menggunakan Visual Studio Code:
📋 Prasyarat
Sebelum memulai, pastikan perangkat Anda telah terpasang:
🛠️ Langkah-Langkah Instalasi
1. Kloning Repositori
Buka terminal Anda (Git Bash, Command Prompt, atau Terminal macOS/Linux) dan jalankan perintah berikut untuk mengunduh kode sumber:
git clone https://github.com/wilden-business/wilcash-money-manager.git
(Ganti tautan di atas dengan URL repositori GitHub Anda yang sebenarnya).
2. Masuk ke Direktori Proyek
Pindah ke folder proyek yang baru saja diunduh:
cd wilcash-money-manager
3. Buka di Visual Studio Code
Gunakan perintah singkat ini untuk langsung membuka proyek di jendela VS Code:
code .
4. Instalasi Paket Dependensi
Buka terminal terintegrasi di VS Code (Ctrl + ~ atau Cmd + ~ di Mac) lalu pasang seluruh modul dependensi yang dibutuhkan:
npm install
5. Jalankan Server Pengembangan (Local Dev Server)
Setelah instalasi selesai, jalankan server pengembangan lokal dengan perintah:
npm run dev
6. Akses Aplikasi
Buka peramban (browser) favorit Anda dan akses alamat lokal berikut untuk mencoba aplikasi:
http://localhost:3000
📥 Link Unduhan Aplikasi
Aplikasi WilCash Money Manager dapat Anda unduh langsung sebagai aplikasi desktop/ponsel mandiri (atau diinstal langsung melalui fitur PWA di peramban Anda):
Catatan: Untuk mengunduh versi APK Android terbaru, silakan periksa rilis terbaru pada tab Releases di repositori GitHub ini.
🛡️ Hak Cipta & Lisensi Pembuat
Seluruh kode sumber, desain aset grafis, dan merek WilCash dilindungi hak cipta: