Farsight adalah aplikasi keuangan pribadi untuk mencatat pemasukan dan pengeluaran sehari-hari, baik untuk satu orang maupun satu keluarga. Pencatatannya bisa lewat form, foto struk, atau cukup satu kalimat yang diucapkan. Setiap layar tampil dengan gaya Windows XP secara penuh, dari wallpaper Bliss dan title bar biru sampai taskbar dan kotak pesan klasiknya. Catatan disimpan di perangkat lebih dulu, lalu disinkronkan otomatis ke spreadsheet di akun Google milik pemilik, dan seluruh aplikasinya berjalan dengan biaya Rp 0 per bulan.
Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.
Desktop
Mobile
Pekerjaan seperti ini biasanya dibagi ke pengembang, desainer UI/UX, dan desainer grafis. Di proyek ini, ketiga keahlian itu dikuasai satu orang, jadi setiap keputusan datang dari orang yang memahami keseluruhan proyek, bukan hanya bagiannya sendiri.
12
standar yang terpenuhi, dari kode hingga desain.
Dampak bisnis di sini diukur dari 5 area: Kehadiran, Kualitas, Kepercayaan, Konversi dan Pertumbuhan. Semuanya mencakup bagaimana bisnisnya ditemukan, dipersepsikan, dan direspons.
Gambaran jelas untuk setiap hari, bulan, dan tahun
Sebelum
Tanpa catatan yang konsisten, sulit melihat ke mana uang pergi setiap hari, bulan, atau tahun, dan pengeluaran biasanya baru disadari setelah menumpuk.
Sesudah
Pengeluaran hari ini langsung tampil di Beranda, sementara Riwayat serta Rekap tahunan dan bulanan menunjukkan ke mana uang pergi, lengkap dengan rincian per kategori.
Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.
Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.
Masalah yang muncul selama membangun proyek ini, dan hasil yang didapat dari menyelesaikannya.
Pengenalan Suara yang Tidak Berjalan di Semua Perangkat
Pengenal suara bawaan browser diblokir di aplikasi terinstal pada iPhone dan tidak pernah merespons di sebagian ponsel Android lama. Solusinya, audio direkam bersamaan dan baru dikirim untuk ditranskripsi bila browser tidak memberi hasil, dan perangkat yang tidak merespons diingat supaya selanjutnya langsung memakai rekaman.
Model Vision Kecil Salah Membaca Tata Letak Struk
Meminta AI langsung memilih total sering menghasilkan angka yang salah. Karena itu model sekarang hanya menyalin teks struk baris per baris, lalu total, toko, dan tanggal dipilih dengan aturan tetap di kode yang bisa diuji.
Menjaga Catatan Offline Tetap Aman Sampai Tersinkron
Catatan yang dibuat tanpa internet harus tetap ada sampai koneksi kembali. Semua catatan disimpan di perangkat lebih dulu lalu disinkronkan otomatis, perubahan di perangkat selalu didahulukan atas data yang ditarik dari Sheet, dan hanya satu sinkronisasi yang berjalan dalam satu waktu, termasuk antar tab.
Baris Bergeser ke Kolom yang Salah
Perintah append standar di Sheets pernah salah menebak letak tabel, sehingga data bergeser ke kolom B. Sekarang setiap baris baru disisipkan tepat di bawah ID terakhir, lalu ditulis ke rentang kolom yang pasti.
Belajar TanStack Start Langsung di Proyek Nyata
Ini proyek pertama dengan TanStack Start, jadi ada perilaku yang tidak langsung terlihat. Misalnya, rute bertingkat wajib punya file induk. Tanpa file itu, halamannya tampil Not Found, dan pengecekan tipe tidak menangkap kesalahan ini.
Tanggal Berbeda antara Server dan Perangkat
Server berjalan dengan zona waktu UTC, jadi tanggal yang dihitung saat render di server bisa berbeda dengan tanggal di perangkat menjelang tengah malam. Solusinya, tanggal hari ini selalu dibaca di perangkat.
Celah di Bawah Taskbar pada Aplikasi Terinstal di iPhone
Di iOS 26 dengan status bar transparan, aplikasi terinstal menghitung tinggi layar terlalu pendek dan membaca area aman bawah sebagai nol, sehingga ada pita kosong di bawah taskbar. Solusinya, tinggi aplikasi mengikuti tinggi viewport besar dan ruang home indicator dihitung sendiri di perangkat.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Catatan tetap aman sampai tersinkron
Akses khusus pemilik, hanya di server
Foto 3 sampai 8 MB jadi beberapa ratus KB
Paling banyak sekitar 500 KB saat pertama dibuka di ponsel
Pembacaan struk berbasis aturan yang bisa diuji
Scrollbar XP yang sama di setiap perangkat
Sebelum
Aplikasi yang langsung menulis ke spreadsheet di server kehilangan setiap catatan yang dibuat tanpa internet, dan request yang gagal bisa membuang data tanpa terlihat.
Sesudah
Setiap perubahan ditulis ke IndexedDB lebih dulu dengan status menunggu, lalu disinkronkan otomatis saat aplikasi dimuat, saat koneksi kembali, saat aplikasi dibuka lagi dari latar belakang, dan dua detik setelah setiap perubahan. Sinkronisasi yang gagal dicoba ulang di kesempatan berikutnya, dan Web Locks memastikan hanya satu sinkronisasi berjalan di semua tab.
Sebelum
Memanggil Google API atau binding AI dari kode browser akan membuka token OAuth dan membuat siapa pun bisa menghabiskan jatah AI gratis.
Sesudah
Setiap panggilan ke Sheets dan Workers AI berjalan lewat server function TanStack Start yang memeriksa sesi pemilik lebih dulu, dan kode khusus server ditempatkan di file yang ditolak framework untuk masuk ke bundle browser. Akses Google juga dibatasi ke scope drive.file, sehingga aplikasi hanya bisa menyentuh file yang dibuatnya sendiri.
Sebelum
Mengirim foto ponsel ukuran penuh membuang waktu unggah dan membuat struk termal yang pudar lebih sulit dibaca model.
Sesudah
Foto digambar ulang di canvas pada browser, dibatasi 1200px, dan diubah menjadi JPEG hitam putih berkontras tinggi. Hasilnya, foto kamera 3 sampai 8 MB menjadi beberapa ratus kilobyte, sekaligus membuang metadata lokasi sebelum apa pun dikirim.
Sebelum
Memuat satu wallpaper berukuran besar di setiap layar, file font lengkap, dan library chart menambah beban yang membuat aplikasi lebih lambat di ponsel.
Sesudah
Ponsel hanya memuat wallpaper potret, sementara tablet dan desktop mendapat versi lanskap 2560px, font DejaVu Sans yang di-host sendiri dipangkas dari 476 KB menjadi 49 KB, kode dipecah per rute, dan chart digambar dengan SVG dan CSS biasa tanpa library chart.
Sebelum
Membiarkan model kecil langsung memilih total membuat kesalahan sulit dilacak dan tidak mungkin diuji.
Sesudah
Model hanya menyalin teks struk, lalu aturan tetap di kode memilih total, nama toko, dan tanggal dengan urutan label yang jelas dari Grand Total sampai uang tunai yang dibayar. Logikanya bisa diuji dan disesuaikan, dan tulisan pada struk tidak bisa mengambil alih hasil yang disimpan, karena setiap hasil tetap melewati aturan itu dan pemeriksaan pemilik.
Sebelum
iOS Safari dan Chrome di Android mengabaikan styling scrollbar yang dipakai xp.css, sehingga area scroll kehilangan tampilan XP-nya di ponsel.
Sesudah
Scrollbar buatan sendiri membuat ulang track, thumb, dan panah XP di setiap perangkat, lengkap dengan perilaku XP seperti panah yang terus bergeser saat ditahan, ketuk track untuk pindah satu halaman, dan thumb yang bisa diseret. Posisi thumb ditulis langsung ke DOM lewat requestAnimationFrame, sehingga scroll tetap mulus.
