Beberapa waktu lalu, saya mendapat kesempatan menarik untuk membangun sebuah aplikasi pencatat keuangan pribadi bernama Fulus. Aplikasi ini dirancang agar mudah digunakan, responsif untuk perangkat mobile, dan tentu saja, menggunakan teknologi web modern yang stabil.
Dalam postingan ini, saya ingin berbagi pengalaman dan detail teknis di balik pengembangan Fulus, dari konsep awal hingga deployment.
Tech Stack Pilihan
Untuk membangun Fulus, saya memilih kombinasi teknologi yang powerful dan efisien:
- Frontend: Vue.js 3 dengan Vite (untuk bundling super cepat). Vue 3 dipilih karena kurva belajarnya yang landai dan performanya yang solid.
- Styling: Tailwind CSS, sebuah utility-first CSS framework yang memungkinkan saya membangun UI yang rapi dan responsif dengan sangat cepat tanpa menulis CSS kustom yang banyak.
- Backend & Database: Supabase, alternatif open-source untuk Firebase yang menawarkan database PostgreSQL, autentikasi pengguna, dan API secara instan. Ini sangat mempercepat pengembangan backend.
- Hosting: Vercel/Netlify (dalam kasus ini, Netlify digunakan), platform deployment tanpa server yang otomatis mengintegrasikan dengan Git.
Fitur-Fitur Utama Fulus
Fulus dirancang dengan fokus pada kemudahan penggunaan, menawarkan fitur-fitur penting seperti:
- Autentikasi Pengguna: Login dan registrasi yang aman dengan email dan password, termasuk fitur lupa password.
- Manajemen Dompet: Kemampuan untuk membuat, mengelola, dan melihat saldo di berbagai dompet (misalnya: Tunai, Bank, E-wallet). Setiap transaksi dapat dikaitkan dengan dompet tertentu.
- Ganti Password: Pengguna dapat dengan mudah mengubah kata sandi mereka melalui halaman profil untuk keamanan akun yang lebih baik.
- Manajemen Transaksi (CRUD): Pengguna dapat dengan mudah menambah, melihat, mengedit, dan menghapus transaksi pemasukan dan pengeluaran.
- Manajemen Kategori: Fleksibilitas untuk membuat, mengedit, dan menghapus kategori transaksi sesuai kebutuhan pribadi.
- Dashboard Interaktif: Menampilkan ringkasan pengeluaran bulanan dan grafik analisis per kategori untuk membantu pengguna memahami pola keuangan mereka.
- Riwayat Transaksi Lengkap: Halaman terpisah untuk melihat semua riwayat transaksi dengan filter tanggal, tipe, dan kategori yang canggih.
- SEO Friendly: Pengelolaan meta tags untuk memastikan halaman publik terindeks dengan baik, sementara halaman privat aman dari mesin pencari.
Tantangan dan Pembelajaran
Salah satu tantangan menarik adalah memastikan konsistensi UI/UX di seluruh aplikasi, terutama saat mengintegrasikan form dalam modal dan memastikan responsivitas. Saya juga belajar banyak tentang konfigurasi deployment untuk SPA di Vercel/Netlify agar fitur history mode Vue Router berfungsi tanpa masalah 404 saat refresh halaman.
Pengelolaan Row Level Security (RLS) di Supabase juga krusial untuk memastikan setiap pengguna hanya dapat mengakses data mereka sendiri, menjaga privasi dan keamanan.
Kesimpulan
Membangun Fulus adalah pengalaman yang sangat memuaskan. Dengan kombinasi Vue 3, Tailwind CSS, dan Supabase, kita dapat membangun aplikasi web fungsional dan modern dengan cepat. Fulus siap membantu siapa saja untuk mulai mengelola keuangan mereka dengan lebih baik.
Anda bisa mencoba aplikasi Fulus di https://fulus-id.netlify.app/