Kalau ada satu hal yang saya pelajari dari project ini, itu adalah memilih teknologi yang tepat bisa membuat proses development jauh lebih nyaman.
Saya bukan tipe developer yang selalu mengejar teknologi paling baru. Buat saya, yang lebih penting adalah memilih tools yang sesuai dengan kebutuhan project dan nyaman digunakan untuk jangka panjang.
Di Expense Tracker ini, saya menggunakan beberapa teknologi yang menurut saya saling melengkapi. Semuanya punya peran masing-masing, mulai dari frontend, backend, database, sampai proses autentikasi.
Kenapa Saya Memilih Next.js?
Kalau beberapa tahun lalu saya mungkin akan membuat frontend menggunakan React biasa, sekarang pilihan saya hampir selalu jatuh ke Next.js.
Alasannya sederhana.
Framework ini sudah menyediakan banyak hal yang sebelumnya harus dikonfigurasi sendiri.
Routing sudah tersedia.
API juga bisa dibuat langsung di dalam project yang sama.
Proses build lebih mudah.
Struktur project juga lebih rapi.
Jadi saya tidak perlu membuat dua repository terpisah hanya untuk frontend dan backend.
Semuanya bisa dikerjakan dalam satu project.
Untuk aplikasi seperti Expense Tracker, pendekatan ini sangat membantu.
Belajar Menggunakan App Router
Project ini juga menjadi kesempatan saya untuk lebih serius menggunakan App Router.
Awalnya memang agak membingungkan.
Kalau sebelumnya terbiasa menggunakan Pages Router, berpindah ke App Router membutuhkan sedikit penyesuaian.
Terutama soal struktur folder.
Tetapi setelah beberapa hari digunakan, saya mulai merasa App Router justru lebih enak dipakai.
Folder project menjadi lebih terorganisir.
Routing juga terasa lebih natural.
Saya jadi lebih mudah memisahkan halaman dashboard, rekening, login, register, dan transaksi tanpa membuat struktur folder yang rumit.
Tailwind CSS Membuat Proses Styling Jauh Lebih Cepat
Saya masih ingat dulu sering membuat file CSS yang panjang.
Semakin besar project, semakin sulit mencari class yang ingin diubah.
Belum lagi kalau ada style yang ternyata saling bertabrakan.
Karena itu hampir semua project terbaru saya menggunakan Tailwind CSS.
Di Expense Tracker pun saya melakukan hal yang sama.
Sebagian besar styling langsung ditulis pada komponen.
Awalnya memang terasa aneh karena class yang digunakan cukup panjang.
Tetapi setelah terbiasa, ternyata proses development menjadi jauh lebih cepat.
Saya tidak perlu berpindah-pindah antara file JSX dan file CSS hanya untuk mengubah margin atau warna tombol.
Semuanya bisa dilakukan di satu tempat.
Selain itu, proses membuat tampilan yang responsif juga terasa lebih mudah.
Kenapa Menggunakan PostgreSQL?
Untuk project sederhana sebenarnya saya bisa saja menggunakan SQLite.
Bahkan banyak tutorial yang menggunakan database tersebut.
Tetapi saya ingin project ini sedikit lebih realistis.
Karena itu saya memilih PostgreSQL.
Selain cukup populer, PostgreSQL juga terkenal stabil dan memiliki dukungan transaction yang sangat baik.
Dan ternyata keputusan itu memang tepat.
Ketika mulai membuat fitur edit transaksi dan rollback saldo, saya benar-benar merasakan manfaat menggunakan database yang mendukung transaction dengan baik.
Walaupun project ini belum terlalu besar, saya merasa pondasinya sudah cukup siap jika suatu saat ingin dikembangkan lagi.
JWT Authentication yang Sederhana Tapi Efektif
Bagian autentikasi juga menjadi salah satu hal yang cukup menarik.
Saya menggunakan JSON Web Token (JWT) untuk memastikan setiap pengguna hanya bisa mengakses datanya sendiri.
Setelah login berhasil, sistem akan membuat token.
Token tersebut disimpan di cookies.
Setiap kali pengguna membuka halaman yang membutuhkan autentikasi, token akan diperiksa terlebih dahulu.
Kalau valid, pengguna bisa melanjutkan.
Kalau tidak valid atau sudah tidak berlaku, pengguna harus login kembali.
Pendekatan ini cukup sederhana, tetapi sudah lebih dari cukup untuk aplikasi seperti Expense Tracker.
Yang paling penting, setiap data transaksi dan rekening selalu dikaitkan dengan user_id.
Artinya, pengguna A tidak akan pernah melihat data milik pengguna B.
Menjaga Struktur Project Tetap Rapi
Semakin lama mengerjakan project, saya semakin sadar kalau struktur folder sangat berpengaruh terhadap kenyamanan saat coding.
Di awal mungkin semuanya terlihat sederhana.
Tetapi begitu jumlah file mulai bertambah, folder yang berantakan bisa membuat proses development menjadi melelahkan.
Karena itu sejak awal saya mencoba memisahkan setiap bagian berdasarkan fungsinya.
Folder app berisi halaman-halaman utama aplikasi.
Folder components saya gunakan untuk menyimpan komponen yang bisa dipakai berulang kali.
Folder lib berisi berbagai helper, konfigurasi database, dan fungsi-fungsi yang digunakan di banyak tempat.
Sedangkan folder public digunakan untuk aset statis seperti gambar atau ikon.
Mungkin terlihat sepele, tetapi struktur seperti ini sangat membantu ketika project mulai berkembang.
Kalau beberapa bulan lagi saya membuka project ini lagi, saya yakin proses membaca kembali kodenya akan jauh lebih mudah.
Komponen yang Bisa Digunakan Berulang
Saya juga berusaha menghindari menulis kode yang sama berkali-kali.
Kalau ada tampilan yang digunakan di beberapa halaman, saya lebih memilih membuatnya menjadi komponen.
Misalnya tombol, form input, atau card.
Selain membuat kode lebih pendek, cara ini juga memudahkan ketika ingin mengubah desain.
Cukup ubah satu komponen, semua halaman yang menggunakannya akan ikut berubah.
Kebiasaan kecil seperti ini menurut saya sangat membantu ketika ukuran project mulai membesar.
Error Itu Pasti Ada
Kalau ada yang bertanya bagian paling menyenangkan saat membuat project ini, mungkin jawabannya adalah ketika semua fitur akhirnya berjalan.
Tetapi kalau ditanya bagian yang paling sering menghabiskan waktu, jawabannya jelas debugging.
Ada beberapa bug yang cukup membuat saya berpikir cukup lama.
Misalnya saldo yang tidak berubah sesuai harapan.
Ada juga kondisi ketika edit transaksi menghasilkan perhitungan yang salah.
Awalnya saya sempat mengira masalahnya ada di query database.
Ternyata setelah dicek lagi, justru logika perhitungan yang saya buat kurang lengkap.
Hal-hal seperti ini memang cukup menguras waktu.
Tetapi justru dari situlah saya merasa kemampuan problem solving ikut berkembang.
Dokumentasi Sangat Membantu
Salah satu kebiasaan yang mulai saya terapkan adalah lebih sering membaca dokumentasi resmi.
Dulu saya lebih sering mencari jawaban di video tutorial.
Sekarang kalau menemukan masalah, saya biasanya membuka dokumentasi terlebih dahulu.
Untuk project ini, dokumentasi Next.js sangat membantu, terutama ketika mempelajari App Router.
Dokumentasi PostgreSQL juga cukup sering saya buka ketika mulai bermain dengan transaction.
Memang membutuhkan waktu lebih lama dibanding langsung menonton video.
Tetapi pemahaman yang didapat terasa lebih dalam.
Project Kecil, Tapi Banyak Pelajaran
Kalau dilihat dari tampilannya, Expense Tracker memang bukan aplikasi yang terlalu kompleks.
Halamannya juga tidak terlalu banyak.
Tetapi semakin lama saya mengerjakannya, semakin banyak konsep baru yang saya pelajari.
Saya belajar tentang autentikasi.
Belajar menjaga konsistensi data.
Belajar menggunakan transaction di database.
Belajar menyusun struktur project.
Belajar membuat komponen yang reusable.
Belajar memikirkan alur aplikasi dari sudut pandang pengguna.
Dan yang paling penting, saya belajar bahwa aplikasi yang terlihat sederhana belum tentu sederhana di balik layarnya.
Masih Banyak Hal yang Ingin Saya Tambahkan
Walaupun project ini sudah bisa digunakan, menurut saya masih banyak ruang untuk pengembangan.
Misalnya menambahkan kategori transaksi agar pengguna bisa mengetahui pengeluaran terbesar setiap bulan.
Atau membuat grafik sederhana untuk melihat tren pemasukan dan pengeluaran.
Saya juga ingin mencoba membuat fitur export ke PDF atau Excel supaya data transaksi bisa disimpan sebagai laporan.
Bahkan akan menarik kalau suatu saat aplikasi ini bisa mendukung transfer antar rekening, recurring transaction, atau pengingat tagihan otomatis.
Semua ide tersebut masih masuk dalam daftar yang ingin saya coba ketika ada waktu luang.
Dan menurut saya, justru di situlah serunya memiliki project pribadi.
Kita bebas bereksperimen, mencoba teknologi baru, dan terus memperbaiki aplikasi sedikit demi sedikit tanpa tekanan deadline dari klien.
Di bagian terakhir nanti saya akan membahas beberapa rencana pengembangan ke depan, pelajaran terbesar yang saya dapat selama mengerjakan project ini, serta alasan kenapa saya selalu menyarankan membuat project pribadi jika ingin berkembang sebagai seorang web developer. Menurut saya, project seperti inilah yang paling banyak memberikan pengalaman dibanding hanya mengikuti tutorial dari awal sampai akhir.
Link Github : https://github.com/ahmadzipur/expense-tracker.git