ngoding suka-suka
Ngoding apa saja. Menceritakan perjalanannya.
Halo, saya Tangkas Risdianto, Full Stack Developer. Di sini saya menceritakan perjalanan ngoding saya: apa yang saya buat, kenapa saya membuatnya, dan apa yang saya pelajari di tengah jalan. Bahasa apa pun, bikin apa pun, suka-suka.
Full Stack Developer
SLOT 01 / 06|MyPocket
Pilih:
6 Proyek Unggulan
SLOT #[01] // MYPOCKET★ Sistem Utama
10 Bab•8 Modul Fitur•10 Stack
Loncat ke:
MyPocket
Aplikasi manajemen keuangan pribadi dan tabungan kolaboratif dengan pelacakan arus kas, anggaran, portofolio investasi, serta autentikasi biometrik Passkey.
MyPocket memisahkan pencatatan uang ke dalam berbagai kantong tabungan (Pribadi, Pertumbuhan, Bersama) yang bisa dikelola sendiri maupun bersama anggota lain lewat sistem undangan. Setiap kantong merangkum transaksi pemasukan dan pengeluaran, mengawasi batas anggaran bulanan, menghitung harga rata-rata tertimbang (HPP) portofolio investasi, hingga menjalankan transaksi berulang otomatis lewat penjadwal harian. Di balik layar, aplikasi ini dibangun di atas Next.js 16, MySQL connection pool tanpa ORM, autentikasi berlapis JWT + OTP email + WebAuthn Passkey, serta Service Worker mandiri berbasis Workbox.
Apa yang bisa dilakukannya
- Mengelola banyak kantong tabungan (Pribadi, Pertumbuhan, Bersama) dengan target nominal, indikator progres pencapaian, dan kolaborasi anggota (Owner & Member) melalui undangan email
- Masuk dengan keamanan berlapis menggunakan verifikasi OTP dua langkah via email atau login biometrik instan tanpa password dan tanpa ketik email (WebAuthn Discoverable Passkey)
- Mencatat pemasukan dan pengeluaran harian lengkap dengan autofill harga/nominal otomatis dari rencana anggaran serta filter periode bulanan dan tahunan
- Menyusun anggaran pengeluaran dan target sumber pendapatan bulanan dengan pelacakan realisasi real-time serta peringatan visual otomatis saat over-budget
- Menjadwalkan transaksi pemasukan dan pengeluaran berulang (harian/bulanan) yang dieksekusi otomatis oleh worker terjadwal beserta pengingat email harian kontekstual
- Melacak portofolio 7 jenis instrumen investasi (Saham, Reksa Dana, Emas, Kripto, Obligasi, Deposito, Lainnya) dengan perhitungan HPP Moving Average, laba/rugi (P/L) penjualan, dan sinkronisasi otomatis ke arus kas
- Menganalisis kesehatan finansial dengan filter rentang bulan-tahun, grafik tren arus kas 6 bulan, distribusi porsi kategori, dan peringkat pengeluaran terbesar
- Merekam jejak audit (activity log) dan pusat notifikasi terstruktur yang menampilkan rincian perubahan nilai lama ke nilai baru (before-after diff) di setiap operasi
- Mengekspor laporan keuangan terfilter ke dalam format CSV, JSON Backup, dan dokumen laporan PDF siap cetak, serta menyediakan pusat panduan (Knowledge Base) responsif dan dukungan PWA offline
Teknologi yang dipakai
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
- MySQL (mysql2)
- SWR
- Jose (JWT)
- SimpleWebAuthn (Passkey)
- Workbox (PWA)
- Nodemailer
Fitur & Arsitektur
Modul Inti MyPocket
Ringkasan modul teknis dan fitur utama yang dibangun untuk memastikan performa tinggi, keamanan berlapis, dan kemudahan pengguna.
8 Modul Unggulan
MODUL #01
/webauthn-discoverable-passkeyMasuk Cepat dengan Sidik Jari & Sensor Wajah
Pengguna bisa langsung masuk ke aplikasi hanya dengan menempelkan sidik jari atau pindai wajah di ponsel dan laptop, tanpa perlu repot mengetik email maupun mengingat kata sandi.
@simplewebauthn/server@simplewebauthn/browserNext.js 16+2 lainnya
Eksplorasi DetailSelengkapnya
MODUL #02
/two-step-otp-session-gatekeeperVerifikasi Masuk 2 Langkah via Kode Email
Lapisan keamanan ekstra yang mengirimkan kode rahasia 6 digit ke email setiap kali ada yang mencoba masuk, memastikan hanya pemilik akun asli yang bisa mengakses data keuangan.
Jose (JWT)Bcrypt.jsNodemailer+2 lainnya
Eksplorasi DetailSelengkapnya
MODUL #03
/multi-pocket-collaborative-savingBanyak Kantong Tabungan & Menabung Bersama
Memisahkan uang ke berbagai pos tabungan seperti dana darurat, liburan, atau tabungan bersama pasangan dan keluarga yang bisa dipantau bersama lewat undangan email.
MySQL (mysql2)SWRNext.js 16+2 lainnya
Eksplorasi DetailSelengkapnya
MODUL #04
/investment-moving-average-enginePencatatan Investasi & Hitung Untung-Rugi Otomatis
Mencatat berbagai aset investasi (saham, reksa dana, emas, kripto) dan menghitung otomatis harga modal rata-rata serta estimasi keuntungan atau kerugian saat aset dijual.
MySQL (mysql2)Next.js Route HandlersSWR+2 lainnya
Eksplorasi DetailSelengkapnya
MODUL #05
/smart-budget-cashflow-syncRencana Anggaran Bulanan & Peringatan Otomatis
Membantu menetapkan batas pengeluaran bulanan dan memberi peringatan otomatis saat belanja sudah mendekati atau melewati batas yang direncanakan.
MySQL (mysql2)SWRReact Context+2 lainnya
Eksplorasi DetailSelengkapnya
MODUL #06
/timezone-safe-recurring-schedulerPencatatan Transaksi Rutin & Pengingat Harian
Mencatat tagihan rutin bulanan seperti listrik atau langganan secara otomatis sesuai jadwal, disertai pengingat lewat email agar tidak ada pembayaran yang terlewat.
Next.js 16Intl.DateTimeFormatNodemailer+2 lainnya
Eksplorasi DetailSelengkapnya
MODUL #07
/structured-diff-audit-trailRiwayat Perubahan Data Sebelum & Sesudah
Menampilkan catatan jelas siapa yang mengubah data, kapan diubah, serta perbandingan nilai lama dan nilai baru agar pencatatan keuangan tetap transparan.
TypeScriptMySQLReact 19+2 lainnya
Eksplorasi DetailSelengkapnya
MODUL #08
/self-hosted-pwa-and-report-exporterAplikasi Siap Pasang di HP & Unduh Laporan PDF
Bisa dipasang langsung di layar utama ponsel seperti aplikasi biasa tanpa lewat Play Store, serta mempermudah mengunduh laporan keuangan rapi dalam format PDF atau Excel.
Workbox BuildService Worker APINext.js 16+2 lainnya
Eksplorasi DetailSelengkapnya
Perjalanannya
Sepuluh bagian yang membentuknya
Bab 1
Gerbang Proxy & Rewriting Rute
Apa itu. Lapisan penjaga di tingkat jaringan (Next.js Proxy) yang memvalidasi sesi JWT, mengatur hak akses halaman, dan menyamarkan struktur folder internal lewat URL rewrites.
Cara saya memakainya. Semua request melewati lapisan proxy untuk memeriksa cookie sesi dan menyuntikkan security headers, sementara next.config.ts memetakan URL bersih seperti /dashboard ke struktur layout internal.
Yang bikin penasaran: Pengguna yang baru lolos password tapi belum memasukkan OTP diberi status sesi 'pending' di dalam token agar tetap tertahan di gerbang proxy dan tidak bisa melompat langsung ke dashboard.
Baca bab ini
Bab 2
Autentikasi Dua Langkah & Sesi Pending OTP
Apa itu. Mekanisme login dua tahap yang menggabungkan verifikasi password, pembatas percobaan login (rate limiter), pengiriman kode OTP ke email, dan penerbitan token bertahap.
Cara saya memakainya. Endpoint login memvalidasi password dengan bcrypt, membatasi laju percobaan login, mengirim OTP via Nodemailer, lalu menaruh token sementara berstatus 'pending' hingga kode OTP terverifikasi.
Yang bikin penasaran: Menyimpan status tahap verifikasi di dalam payload JWT yang ditandatangani membuat alur OTP tetap stateless tanpa perlu tabel sesi sementara di database.
Baca bab ini
Bab 3
Login Biometrik Tanpa Email (WebAuthn Passkey)
Apa itu. Implementasi autentikasi kriptografi kunci publik berbasis standar FIDO2/WebAuthn yang memungkinkan pengguna masuk hanya dengan sidik jari atau wajah tanpa mengetik email maupun password.
Cara saya memakainya. Menggunakan @simplewebauthn dengan mode Discoverable Credentials (residentKey: required) sehingga browser langsung menampilkan daftar passkey perangkat dan server mengenali pengguna dari ID kredensial.
Yang bikin penasaran: Setiap kali login biometrik berhasil, nilai counter di database wajib diperbarui dari authenticator untuk menangkal serangan kloning kredensial (replay attack).
Baca bab ini
Bab 4
Koneksi Raw SQL Pool & Normalisasi Parameter
Apa itu. Lapisan eksekusi query database langsung menggunakan connection pool mysql2/promise tanpa ORM, dilengkapi fungsi normalisasi tipe parameter otomatis.
Cara saya memakainya. Seluruh endpoint API memanggil helper query() dan queryOne() yang membungkus pool.execute() serta menormalisasi parameter angka dari URL sebelum dikirim ke prepared statement MySQL.
Yang bikin penasaran: Tanpa normalisasi tipe parameter, prepared statement MySQL kerap gagal saat menerima nilai paginasi (LIMIT dan OFFSET) yang terbaca sebagai string dari URL query params.
Baca bab ini
Bab 5
Kantong Tabungan Kolaboratif & Kontrol Akses
Apa itu. Arsitektur multi-kantong tabungan (multi-tenant) yang memisahkan saldo, anggaran, dan transaksi per kantong serta mendukung kolaborasi antar-pengguna lewat undangan.
Cara saya memakainya. Relasi antara pengguna dan kantong dijembatani oleh tabel akses berbasis peran ('owner' atau 'member') dan tabel undangan, lengkap dengan agregasi subquery untuk menghitung ringkasan saldo bulanan dan total.
Yang bikin penasaran: Aksi sensitif seperti mengubah target, menghapus tabungan, atau mengeluarkan anggota dikunci ketat di level query hanya untuk pemilik ('owner') dengan proteksi agar tidak bisa menghapus dirinya sendiri.
Baca bab ini
Bab 6
Sinkronisasi Arus Kas, Anggaran, & Autofill Cerdas
Apa itu. Integrasi langsung antara rencana anggaran (planning) dan transaksi riil (cashflow) yang menghitung pemakaian anggaran secara real-time di SQL sekaligus mempercepat input form di sisi klien.
Cara saya memakainya. Query perencanaan menyertakan correlated subquery untuk menghitung kolom pemakaian (spent) dan realisasi (realized) sesuai filter periode, sementara hook SWR di klien mengubah data rencana menjadi peta harga otomatis.
Yang bikin penasaran: Begitu pengguna memilih kategori saat mencatat pengeluaran, harga satuan langsung terisi otomatis dari rencana anggaran tanpa perlu mengetik ulang nominal rutin.
Baca bab ini
Bab 7
Mesin Portofolio Investasi & HPP Moving Average
Apa itu. Modul manajemen aset investasi yang menghitung harga pokok pembelian rata-rata tertimbang (Moving Average), laba/rugi penjualan, dan menyinkronkan setiap transaksi beli/jual ke arus kas.
Cara saya memakainya. Pembelian dan top-up aset otomatis memotong saldo melalui tabel pengeluaran serta memperbarui avg_price, sedangkan penjualan aset menghitung selisih terhadap HPP dan mencatat uang masuk ke tabel pendapatan.
Yang bikin penasaran: Transaksi investasi dijaga oleh guardrail: sistem menolak pembelian (HTTP 422) jika kantong belum memiliki anggaran kategori 'Investasi' dan menolak penjualan jika belum ada sumber pendapatan 'Investasi'.
Baca bab ini
Bab 8
Penjadwalan Otomatis & Solusi Bug Timezone H-1
Apa itu. Worker terjadwal yang mengeksekusi transaksi harian/bulanan otomatis dan mengirimkan email pengingat harian kepada pengguna aktif.
Cara saya memakainya. Mengecek seluruh jadwal berulang, membandingkan tanggal eksekusi terakhir (lastgenerated), menyisipkan transaksi baru ke arus kas, lalu mengecek aktivitas hari ini untuk mengirim email pengingat via Nodemailer.
Yang bikin penasaran: Menggunakan Intl.DateTimeFormat dengan locale 'en-CA' dan timezone 'Asia/Jakarta' untuk menghasilkan format YYYY-MM-DD yang kebal terhadap jebakan pergeseran tanggal UTC (bug H-1).
Baca bab ini
Bab 9
Jejak Audit Terstruktur dengan Deteksi Diff
Apa itu. Sistem pencatatan riwayat aktivitas (audit log) yang menyimpan rincian perubahan data dalam format JSON terstruktur lengkap dengan perbandingan nilai lama dan nilai baru.
Cara saya memakainya. Setiap operasi tambah, ubah, dan hapus memanggil helper buildLog() untuk menyusun payload JSON, yang kemudian di-render oleh komponen LogDetailView menjadi badge berwarna dan tampilan pergeseran nilai (old → new).
Yang bikin penasaran: Pada operasi hapus tabungan, pencatatan log sengaja dieksekusi sebelum perintah DELETE utama dijalankan agar proses penulisan log tidak gagal akibat efek berantai foreign key cascade.
Baca bab ini
Bab 10
PWA Mandiri (Workbox) & Mesin Ekspor Multi-Format
Apa itu. Kombinasi Service Worker yang di-bundle secara lokal untuk ketahanan akses offline dan generator laporan keuangan server-side dalam format CSV, JSON Backup, serta HTML-PDF siap cetak.
Cara saya memakainya. Script build-sw.js membungkus service worker dengan 4 strategi caching Workbox sebelum next build berjalan, sementara endpoint ekspor menyatukan pemasukan dan pengeluaran menjadi file unduhan atau halaman cetak berdesain khusus.
Yang bikin penasaran: Alih-alih membebani server dengan headless browser untuk membuat PDF, fitur ekspor menghasilkan dokumen HTML mandiri lengkap dengan aturan CSS @media print dan print-color-adjust yang ringan serta presisi saat dicetak.
Baca bab ini
// SEQUENTIAL_NAVIGATOR //Navigasi Siklus Proyek • 6 Sistem Terdaftar