💸 Zaku — Dompet Digital dengan AI Chat

Track · Control · Thrive

Zaku adalah aplikasi dompet digital yang membantu kamu mengelola keuangan pribadi dengan cara yang mudah, cepat, dan menyenangkan. Dilengkapi dengan AI Chat yang bisa mencatat transaksi hanya dengan mengetik pesan sehari-hari seperti "makan siang 35rb".

Dibangun dengan desain Brutalist — tebal, kontras, dan berani.

✨ Fitur

Fitur	Deskripsi
🔐 Autentikasi	Login, Register, Verifikasi Email, Lupa Password
💰 Cek Saldo	Lihat saldo, pemasukan & pengeluaran bulan ini
📝 Catat Transaksi	Catat pemasukan & pengeluaran dengan mudah
🤖 AI Chat	Ketik transaksi dalam bahasa sehari-hari, AI yang akan mencatat
📊 Riwayat	Lihat semua transaksi dengan filter kategori & bulan
💳 Top Up	Isi saldo dompet
📤 Kirim Uang	Kirim saldo ke pengguna lain
🏦 Tarik Saldo	Cairkan saldo ke rekening bank
👤 Profil	Kelola profil, atur budget bulanan, export data CSV

🎨 Design System

Zaku menggunakan desain Brutalist dengan karakter yang kuat:

Color Palette

Warna	Hex	Penggunaan
🖤 Ink	`#111010`	Background gelap, teks utama
🤍 Paper	`#F5F0E8`	Background terang
🤎 Cream	`#EDE8DC`	Background sekunder
🧡 Punch	`#FF4D00`	CTA, tombol utama
💛 Punch-2	`#FFD600`	Aksen sekunder
💚 Mint	`#00E5A0`	Status sukses
💙 Sky	`#C8F0FF`	Status info

Typography

Font	Kegunaan
Syne	Heading, judul
DM Mono	Angka, label, metadata
Fraunces	Aksen, angka besar

🚀 Tech Stack

Teknologi	Versi	Kegunaan
Laravel	10.x	Backend framework, Blade templating, routing
Alpine.js	3.x	Interaktivitas frontend tanpa React/Vue
Axios	1.x	HTTP client untuk komunikasi API
Vite	5.x	Build tool, bundling CSS/JS
CSS Vanilla	-	Styling custom (Brutalist design)
Heroicons	-	Icon SVG

📋 Prasyarat

Sebelum memulai, pastikan sudah terinstall:

PHP >= 8.1
Composer (manajer package PHP)
Node.js >= 18 & npm
MySQL atau MariaDB (untuk backend API)
Git

Cek instalasi:

php -v
composer --version
node -v
npm -v
git --version

🛠️ Instalasi

1. Clone Repository

git clone https://github.com/dhabyap/zaku-front-end.git
cd zaku-front-end

2. Install Dependencies

composer install
npm install

3. Konfigurasi Environment

cp .env.example .env
php artisan key:generate

Buka file .env dan sesuaikan konfigurasi:

APP_NAME=Zaku
APP_ENV=local
APP_DEBUG=true
APP_URL=http://127.0.0.1:8000

# URL Backend API (WAJIB diisi)
VITE_API_BASE_URL=http://127.0.0.1:8001/api
VITE_API_TIMEOUT=30000

⚠️ PENTING: Zaku membutuhkan Backend API terpisah. Tanpa backend, hanya halaman statis dan AI Chat (dengan parser lokal) yang bisa berjalan.

4. Jalankan Aplikasi

Buka dua terminal terpisah:

Terminal 1 — Laravel Server:

php artisan serve

Akses di: http://127.0.0.1:8000

Terminal 2 — Vite Dev Server:

npm run dev

Tanpa npm run dev, tampilan akan rusak karena CSS & JS tidak termuat.

5. Build untuk Produksi

npm run build

Setelah build, cukup jalankan php artisan serve saja.

🔄 Workflow Update & Deploy ke Shared Hosting

Apakah harus build ulang setiap ada perubahan?

YA. Setiap kali ada perubahan pada file:

resources/js/*.js
resources/css/*.css
resources/views/*.blade.php (jika ada inline JS/CSS)

Maka harus build ulang agar file di public/build/ ter-update.

Step-by-Step Manual Update:

1. Setelah Pull Perubahan dari Git

git pull origin main

2. Build Assets (WAJIB jika ada perubahan JS/CSS)

npm run build

Output akan ter-update di folder public/build/:

public/build/
── manifest.json
├── assets/app-XXXXX.js
├── assets/app-XXXXX.css
└── assets/custom-XXXXX.css

3. Commit & Push ke Repository

git add public/build/
git commit -m "chore: rebuild assets after changes"
git push origin main

4. Deploy ke Production Server

Di server production (shared hosting):

git pull origin main

⚠️ PENTING: Jangan lupa upload folder vendor/ via FTP/cPanel jika ada perubahan composer dependencies.

Quick Command (Semua dalam satu baris):

git pull origin main && npm run build && git add public/build/ && git commit -m "chore: rebuild assets" && git push origin main

Kapan TIDAK perlu build?

Hanya perubahan PHP di folder app/, routes/, config/
Hanya perubahan Blade views tanpa inline JS/CSS
Perubahan .env atau konfigurasi server

Kapan HARUS build?

Perubahan file .js di resources/js/
Perubahan file .css di resources/css/
Perubahan vite.config.js
Update package (axios, alpinejs, dll) via npm install

⚠️ Checklist Setelah Pull Update Terbaru

Setiap kali ada update dari repository, lakukan langkah berikut:

1. Cek `.env.example` vs `.env`

File .env TIDAK otomatis ter-update saat pull dari git karena .env ada di .gitignore.

Cara cek:

diff .env.example .env

Jika ada perubahan di .env.example:

Buka .env.example dan lihat variabel baru apa yang ditambahkan
Tambahkan variabel tersebut ke .env dengan nilai yang sesuai
Contoh: jika .env.example punya VITE_NEW_FEATURE=true, tambahkan ke .env

2. Clear Cache Laravel (WAJIB)

Setiap kali ada perubahan konfigurasi, routes, atau views:

php artisan config:clear
php artisan route:clear
php artisan view:clear
php artisan cache:clear

Atau satu command:

php artisan optimize:clear

3. Cek Migration Baru

Jika ada file migration baru di folder database/migrations/:

php artisan migrate --force

⚠️ PENTING: Pastikan backup database dulu sebelum migrate di production!

4. Cek Composer Dependencies

Jika ada perubahan di composer.json atau composer.lock:

composer install --no-dev --optimize-autoloader

5. Rebuild Assets (Jika Ada Perubahan JS/CSS)

npm run build

6. Restart Server (Jika Pakai PHP Built-in Server)

Jika pakai php artisan serve, restart dengan:

# Tekan Ctrl+C di terminal yang running server
php artisan serve

Quick Checklist:

git pull origin main
diff .env.example .env  # Cek apakah ada variabel baru
php artisan optimize:clear
php artisan migrate --force  # Jika ada migration baru
composer install  # Jika composer.json berubah
npm run build  # Jika JS/CSS berubah

📁 Struktur Folder

dompet-frontend/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── PageController.php        # Render semua halaman
│   │   │   └── Api/
│   │   │       └── ChatController.php    # Proxy AI chat + parser lokal
│   │   └── Middleware/
│   └── Models/
│       └── User.php
├── resources/
│   ├── css/
│   │   └── app.css                       # Semua styling (Brutalist)
│   ├── js/
│   │   ├── app.js                        # Entry point Alpine.js
│   │   ├── api-client.js                 # Axios + JWT interceptor
│   │   ├── auth.js                       # Manajemen token
│   │   └── utils.js                      # Helper (formatRupiah, toast, dll)
│   └── views/
│       ├── layouts/                      # app.blade.php, guest.blade.php
│       ├── auth/                         # Login, Register, Verify, Forgot
│       ├── dashboard/                    # Home, Transaksi, Detail, Profil
│       ├── wallet/                       # Top Up, Kirim, Tarik
│       ├── chat/                         # AI Chat
│       └── components/                   # Navbar, Header, Toast, Modal
├── routes/
│   ├── web.php                           # Route halaman frontend
│   └── api.php                           # Route API internal
├── public/                               # File publik
├── .env                                  # Konfigurasi environment
├── .env.example                          # Template .env
├── composer.json
├── package.json
└── vite.config.js

🗺️ Routes

URL	Halaman	Auth
`/login`	Login	❌
`/register`	Registrasi	❌
`/forgot-password`	Lupa password	❌
`/dashboard`	Beranda	✅
`/transactions`	Riwayat transaksi	✅
`/transactions/{id}`	Detail transaksi	✅
`/wallet/topup`	Top up saldo	✅
`/wallet/withdraw`	Tarik saldo	✅
`/wallet/send`	Kirim uang	✅
`/chat`	AI Chat	✅
`/profile`	Profil & pengaturan	✅

🔧 Troubleshooting

Halaman polos tanpa CSS/JS

npm run dev
# atau untuk production:
npm run build

401 Unauthorized terus-menerus

Pastikan backend API berjalan di VITE_API_BASE_URL
Cek token di localStorage masih valid

Composer install gagal

Pastikan PHP >= 8.1 dan ekstensi berikut aktif: BCMath, Ctype, JSON, Mbstring, OpenSSL, PDO, Tokenizer, XML

npm install gagal

rm -rf node_modules package-lock.json
npm install

📝 Development

Menambahkan Halaman Baru

Buat view di resources/views/
Daftarkan route di routes/web.php
Tambahkan method di PageController.php

Menambahkan Komponen

Buat file baru di resources/views/components/ dan include dengan:

@include('components.nama-komponen')

🤝 Kontribusi

Kontribusi sangat dipersilakan! Berikut cara berkontribusi:

Fork repository ini
Buat branch fitur (git checkout -b fitur/amazing-feature)
Commit perubahan (git commit -m 'feat: tambah amazing feature')
Push ke branch (git push origin fitur/amazing-feature)
Buat Pull Request

📄 Lisensi

📞 Kontak

GitHub: @dhabyap
Repository: https://github.com/dhabyap/zaku-front-end

Dibuat dengan ❤️ menggunakan Laravel + Alpine.js

Name		Name	Last commit message	Last commit date
backend		backend
docs/screenshots		docs/screenshots
dompet-frontend		dompet-frontend
frontend		frontend
PRD-Frontend.md		PRD-Frontend.md
README.md		README.md
TASKS.md		TASKS.md
bash.exe.stackdump		bash.exe.stackdump
create-issues.ps1		create-issues.ps1
dompet-design (3).html		dompet-design (3).html
dompet-design-new2.html		dompet-design-new2.html
e.message)		e.message)
issues.md		issues.md
package-lock.json		package-lock.json
tasks.json		tasks.json
zaku-history.html		zaku-history.html

Latest commit

History

Folders and files

Repository files navigation