AJ.

SYSTEM INITIALIZING...
Personal Finance Web AppCASE STUDY

UangKu

Web app personal mobile-first untuk mencatat pengeluaran, pemasukan, anggaran kategori belanja, serta target tabungan secara aman.

uangku.mp4video
uangku-dashboard.png
uangku-history.png
AI Generated
Catatan Presentasi Video: Video demo di atas dihasilkan menggunakan bantuan teknologi AI sebagai alat bantu visualisasi alur sistem (dikarenakan keterbatasan dalam proses video editing manual). Meskipun presentasi video menggunakan AI, seluruh implementasi kode program, arsitektur database, dan fungsionalitas sistem backend yang ditunjukkan sepenuhnya nyata dan dikembangkan secara mandiri.

Ringkasan Proyek (Overview)

UangKu adalah aplikasi web pelacak keuangan pribadi mobile yang dirancang untuk mengelola anggaran harian, pencatatan transaksi secara instan , menetapkan target keuangan (saving goals), serta mengontrol batas anggaran belanja bulanan per kategori. Terintegrasi langsung dengan Supabase Auth dan Postgres RLS untuk privasi data penuh.

Tantangan & Masalah (The Problem)

1. Pencatatan pengeluaran harian dan musiman yang tidak teratur, membuat sisa uang habis tanpa disadari.

2. Kesulitan membatasi pengeluaran per kategori belanja tertentu karena tidak adanya notifikasi peringatan jika melebihi batas anggaran.

3. Kekhawatiran akan privasi data keuangan jika disimpan pada sistem pihak ketiga yang tidak mengisolasi basis data antar pengguna.

Solusi Teknis (The Solution)

Membangun aplikasi pelacak keuangan mobile-first yang responsif menggunakan Next.js App Router dan Tailwind CSS, didukung oleh Supabase untuk manajemen autentikasi & basis data PostgreSQL dengan aturan Row Level Security (RLS) untuk menjamin isolasi data pengguna secara mutlak. Sistem ini juga mengimplementasikan visualisasi statistik chart dengan Recharts serta fitur ekspor CSV dan ekspor/impor cadangan data JSON lokal.

Fitur Utama Sistem (Key Features)

Catatan Keuangan & Filter

Mencatat transaksi masuk dan keluar secara instan, lengkap dengan filter tipe, kategori, dan pencarian kata kunci.

Target Saldo (Goal)

Menetapkan target saldo keuangan/tabungan dengan visualisasi persentase progres yang otomatis terhitung dari sisa saldo.

Anggaran Kategori

Membatasi pengeluaran per kategori belanja (makanan, transportasi, dll.) dengan notifikasi peringatan jika melampaui batas.

Backup & Restore Mandiri

Fitur untuk mengunduh semua data transaksi dalam format file JSON lokal atau memulihkannya kembali secara instan.

PROJECT DETAILS

METADATA

Timeline:3 Minggu (Maret 2026)
Role:Full-Stack Dev
Project Type:Personal Finance Web App
TECH STACK
Next.js
Tailwind CSS
Supabase
SYSTEM WORKFLOW
1Autentikasi & RLS Session
↓ (Prisma Schema Query / Client Fetch)
2Pencatatan Transaksi
↓ (Recharts & Statistics Aggregator)
3Pemantauan Anggaran & Goal
↓ (Visual Dashboard Render)
4Statistik & Backup Data
* Arahkan kursor ke tiap langkah alur di atas untuk penjelasan detail sistem.
INFORMASI PROYEK

Proyek ini adalah bagian dari portofolio unggulan Azzam Jawas yang mendemonstrasikan keahlian di bidang pengembangan web modern, arsitektur backend tepercaya, dan integrasi otomatisasi tingkat lanjut.