Kalau ditanya project apa yang paling sering dibuat saat belajar web development, jawabannya mungkin adalah Todo List, Notes App, atau Weather App. Tidak ada yang salah dengan project-project tersebut, karena memang sangat cocok untuk memahami dasar-dasar pengembangan aplikasi.
Tapi setelah beberapa saat, saya mulai merasa perlu membuat sesuatu yang sedikit lebih menantang. Saya ingin membuat aplikasi yang bukan hanya sekadar latihan coding, tetapi juga bisa digunakan dalam kehidupan sehari-hari. Dari situ akhirnya muncul ide untuk membuat Expense Tracker, sebuah aplikasi sederhana untuk mencatat pemasukan, pengeluaran, dan mengelola saldo dari beberapa rekening.
Project ini saya buat menggunakan Next.js App Router, PostgreSQL, Tailwind CSS, dan JWT Authentication. Selain belajar membangun aplikasi full stack, saya juga ingin memahami bagaimana cara menjaga konsistensi data ketika sebuah transaksi memengaruhi data lainnya. Ternyata, bagian inilah yang paling menarik selama proses development.
Di artikel ini saya akan membahas bagaimana aplikasi ini dibuat, alasan memilih teknologi yang digunakan, fitur-fitur yang ada, serta beberapa tantangan yang saya temui selama proses pengembangan.
Kenapa Membuat Expense Tracker?
Kalau diperhatikan, sebenarnya banyak orang yang masih mencatat keuangan secara manual. Ada yang menggunakan buku catatan, spreadsheet, aplikasi Notes di HP, atau bahkan hanya mengandalkan ingatan.
Masalahnya, cara seperti itu cukup mudah membuat kita kehilangan jejak pengeluaran. Kadang kita merasa uang cepat habis, tetapi tidak tahu sebenarnya habis untuk apa.
Saya sendiri juga pernah mengalami situasi seperti itu. Rasanya baru saja menerima pemasukan, tetapi beberapa hari kemudian saldo sudah jauh berkurang. Ketika mencoba mengingat satu per satu pengeluaran yang sudah dilakukan, ternyata cukup sulit.
Dari situlah saya berpikir, kenapa tidak sekalian membuat aplikasi yang bisa membantu mencatat semuanya secara otomatis?
Awalnya memang hanya project latihan. Namun semakin dikerjakan, saya mulai menambahkan berbagai fitur agar aplikasinya terasa seperti aplikasi sungguhan.
Gambaran Singkat Aplikasi
Expense Tracker adalah aplikasi web yang memungkinkan pengguna mencatat seluruh aktivitas keuangan dalam satu tempat.
Pengguna bisa membuat beberapa rekening, misalnya rekening bank, dompet tunai, atau e-wallet. Setelah itu setiap transaksi akan dikaitkan dengan salah satu rekening tersebut.
Misalnya saya memiliki rekening seperti berikut.
- BCA
- Mandiri
- Dana
- OVO
- Dompet Tunai
Masing-masing rekening memiliki saldo yang berbeda.
Ketika saya menerima gaji sebesar Rp5.000.000 ke rekening BCA, maka saldo BCA akan bertambah secara otomatis.
Sebaliknya, ketika saya membayar makan menggunakan Dana, saldo Dana akan langsung berkurang sesuai nominal transaksi.
Dengan konsep seperti ini, pengguna tidak hanya mengetahui total uang yang dimiliki, tetapi juga tahu uang tersebut berada di rekening yang mana.
Bukan Sekadar CRUD Biasa
Kalau hanya membuat fitur tambah, edit, dan hapus data, sebenarnya project ini tidak terlalu sulit.
Yang membuat project ini lebih menarik adalah adanya hubungan antar data.
Misalnya ketika pengguna menambahkan transaksi pengeluaran sebesar Rp100.000.
Yang terjadi bukan hanya menyimpan data transaksi ke database.
Sistem juga harus:
- Mengecek apakah saldo rekening mencukupi.
- Mengurangi saldo rekening.
- Menyimpan transaksi.
- Memastikan kedua proses tersebut berhasil.
Kalau salah satu proses gagal, semuanya harus dibatalkan.
Di sinilah saya mulai belajar menggunakan transaksi database agar data tetap konsisten.
Walaupun aplikasi ini terlihat sederhana dari sisi tampilan, ternyata logika di belakangnya cukup banyak.
Fitur yang Saya Buat
Supaya aplikasi benar-benar terasa seperti aplikasi keuangan, saya menambahkan beberapa fitur utama.
Dashboard
Halaman pertama setelah login adalah dashboard.
Di halaman ini pengguna bisa langsung melihat ringkasan kondisi keuangannya.
Informasi yang ditampilkan antara lain:
- Total saldo dari seluruh rekening.
- Total pemasukan.
- Total pengeluaran.
- Daftar rekening beserta saldo masing-masing.
Saya sengaja membuat dashboard sesederhana mungkin agar informasi penting bisa langsung terlihat tanpa harus membuka banyak halaman.
Menurut saya, dashboard adalah bagian yang paling sering dilihat pengguna. Jadi tampilannya harus bersih dan mudah dipahami.
Manajemen Rekening
Fitur berikutnya adalah pengelolaan rekening.
Di sini pengguna bebas membuat rekening sesuai kebutuhannya.
Contohnya:
- Bank BCA
- Bank Mandiri
- BNI
- BRI
- Dana
- OVO
- GoPay
- ShopeePay
- Dompet Tunai
Setiap rekening memiliki saldo masing-masing.
Jadi ketika melakukan transaksi, pengguna tinggal memilih rekening mana yang digunakan.
Konsep ini jauh lebih fleksibel dibanding hanya memiliki satu saldo utama.
Manajemen Transaksi
Inilah fitur utama dari aplikasi.
Pengguna bisa mencatat dua jenis transaksi.
Pemasukan
Semua uang yang masuk akan dicatat sebagai pemasukan.
Contohnya:
- Gaji
- Bonus
- Pendapatan freelance
- Penjualan produk
- Cashback
Begitu transaksi disimpan, saldo rekening akan bertambah secara otomatis.
Pengeluaran
Untuk pengeluaran konsepnya juga sama.
Misalnya:
- Makan
- Belanja
- Transportasi
- Internet
- Listrik
- Hiburan
Saat transaksi berhasil disimpan, saldo rekening akan langsung berkurang.
Pengguna tidak perlu menghitung saldo secara manual karena semuanya dilakukan oleh sistem.
Validasi yang Menurut Saya Wajib Ada
Salah satu hal yang sejak awal ingin saya terapkan adalah validasi saldo.
Bayangkan kalau saldo rekening hanya Rp50.000.
Lalu pengguna mencoba mencatat pengeluaran sebesar Rp300.000.
Kalau sistem tetap mengizinkan transaksi tersebut, maka saldo akan menjadi minus.
Dalam dunia nyata mungkin hal seperti itu bisa saja terjadi, misalnya karena kartu kredit atau fasilitas overdraft. Namun untuk aplikasi ini saya ingin aturannya lebih sederhana.
Karena itu, setiap kali pengguna membuat transaksi pengeluaran, sistem akan mengecek saldo rekening terlebih dahulu.
Kalau saldo tidak mencukupi, transaksi langsung ditolak dan pengguna akan mendapatkan informasi bahwa saldo tidak cukup.
Dengan begitu data yang tersimpan akan tetap masuk akal.
Menurut saya, validasi sederhana seperti ini justru menjadi salah satu bagian terpenting dari aplikasi keuangan.
Mulai Belajar Tentang Konsistensi Data
Sebelum membuat project ini, saya mengira update saldo hanyalah proses menambah atau mengurangi angka di database.
Ternyata kenyataannya tidak sesederhana itu.
Misalnya pengguna mengedit transaksi.
Awalnya transaksi adalah:
Pengeluaran Rp100.000
Kemudian diubah menjadi:
Pengeluaran Rp250.000
Kalau sistem hanya mengganti nominal transaksi tanpa menghitung ulang saldo, maka hasil akhirnya pasti salah.
Karena itu saya harus membuat logika yang sedikit berbeda.
Saldo dikembalikan terlebih dahulu ke kondisi sebelum transaksi dibuat.
Setelah itu sistem menghitung ulang berdasarkan data terbaru.
Barulah saldo diperbarui lagi.
Awalnya logika ini cukup membingungkan, tetapi setelah berhasil diterapkan saya jadi lebih memahami bagaimana aplikasi keuangan bekerja menjaga konsistensi datanya.
Dan menurut saya, justru proses seperti inilah yang membuat project sederhana berubah menjadi media belajar yang sangat berharga.
Pada bagian berikutnya saya akan membahas lebih dalam tentang bagaimana alur transaksi bekerja di balik layar, mulai dari proses menambah transaksi, mengedit transaksi, menghapus transaksi, sampai bagaimana saya memastikan saldo rekening selalu tetap akurat meskipun data terus berubah.
Link Github : https://github.com/ahmadzipur/expense-tracker.git