Aplikasi Keuangan React

Aplikasi Keuangan React merupakan remake atau pembuatan ulang dari aplikasi keuangan yang sebelumnya sudah saya buat.

Tujuan dari saya buat ulang adalah

• pertama karena project sebelumnya dibuat secara full-stack dimana laravel dan vue jadi satu project yang kurang nyaman untuk saya develop dan deploy ke server
• kedua karena project sebelumnya tidak mendukung offline mode, dimana jika ingin menambah data, harus mengakses aplikasi web
• ketiga karena project sebelumnya melakukan penyimpanan data di local storage dan penyimpanan di local storage terbatas

Karena terlalu banyak yang perlu diubah, saya memutuskan untuk membuat ulang saja daripada di edit.

Tech Stack

Laravel

Laravel saya gunakan sebagai backend. Alasannya karena sudah terbiasa menggunakan Laravel dan sebagian besar project yang saya buat, backend nya menggunakan Laravel.

React JS

React JS saya pakai sebagai frontend web. Project yang saya buat menggunakan ReactJS terbilang masih sedikit sehingga saya memutuskan menggunakan React JS pada project aplikasi keuangan remake ini.

Tailwind

Untuk styling, saya memakai Tailwind CSS. Saya terbilang masih baru dalam menggunakan Tailwind CSS, tetapi saat pertamakali menggunakannya pada project Aplikasi Survey, saya merasa nyaman dan lebih cepat untuk styling. Banyak plugin menarik yang dibuat diatas Tailwind CSS seperti Headless UI yang sudah menyediakan component yang biasa dipakai dalam aplikasi web.

Fitur

Sebagian besar fitur sama dengan aplikasi keuangan laravel vue. Tetapi ada beberapa fitur tambahan untuk memudahkan saya menggunakan aplikasi ini.

IndexedDB

Saya melakukan penyimpanan data local pada IndexedDB. Masalah yang saya temui pada aplikasi keuangan laravel vue yang sudah saya buat adalah limit penyimanan pada local storage yang saya tidak tahu sebelumnya.

CRUD IndexedDB terbilang mudah, apalagi menggunakan Dexie yang sudah membuatkan kita query builder.

Export Import

Penambahan fitur export import bertujuan mencegah permasalahan hilang data pada sisi client yang pernah saya alami saat membuat project Aplikasi Survey. Aplikasi Keuangan menggunakan metode sinkronisasi untuk mengirim semua data yang sudah ditambahkan ke server. Tetapi terkadang ada error yang menyebabkan sinkronisasi gagal dan data yang belum disinkron menjadi hilang. Untuk mengatasinya, saya membuat fitur Export data dan Import Data.

Enkripsi Data

Fitur enkripsi data bertujuan untuk mengamankan data supaya tidak mudah dibaca oleh orang lain. Saya menambahkan enkripsi ketika user melakukan export data. Data keuangan tersebut dienkripsi sehingga jika user membuka file hasil export data, yang muncul hanya data berupa base64.

Screenshot