Beberapa proyek eksperimental lahir dari kebutuhan sederhana yang sering kali kita temukan sehari-hari. Kali ini, ide itu muncul dari keinginan memiliki ruang kerja visual ala Miro atau Excalidraw, namun tanpa kerumitan fitur kolaborasi real-time multi-user, tanpa keharusan sign-up/password, dan yang terpenting: nyaman diakses dari layar ponsel (mobile-first).
Proyek sandbox terbaru ini kami beri nama Notes, yang kini sudah bisa diakses langsung di notes.dgtlz.com.
Berikut adalah catatan proses iterasi pengembangannya—mulai dari penyusunan arsitektur dasar, pembenahan UX kanvas, hingga penerapan mekanisme penyimpanan stateless.
1. Fondasi Mobile-First & Sensitivitas Layar Sentuh
Tangan kita lebih sering menggenggam ponsel daripada duduk di depan desktop saat sebuah ide mendadak muncul. Oleh karena itu, sejak prompt pertama, fokus utama pembuatan Notes adalah memastikan gestur layar sentuh berjalan alami:
-
Top Bar Compact & Single-Line: Memastikan header tidak memenuhi ruang layar mobile. Kontrol angka zoom yang memenuhi layar desktop disembunyikan di versi mobile untuk memberikan ruang pada tombol aksi utama.
-
Thumb-Zone Accessibility: Penambahan kartu dan node mindmap di HP difokuskan pada Floating Action Button (FAB)
+di pojok kanan bawah agar mudah dijangkau satu tangan. -
Double-Tap to Edit: Menghilangkan hambatan interaksi. Cukup double-click (desktop) atau double-tap (mobile) pada area kartu untuk langsung masuk ke mode pengeditan teks.
2. Dynamic Shortest-Path: Menjinakkan Line Connector
Salah satu tantangan terbesar pada aplikasi berbasis kanvas (mindmap) adalah menjaga kerapihan hubungan antar-kartu. Pada versi awal, setiap garis penghubung dipaksa keluar dari sisi kanan (Right) dan masuk ke sisi kiri (Left). Akibatnya, ketika kartu ditumpuk secara vertikal atau dipindah posisi, garis-garis konektor saling silang dan membentuk lintasan yang rumit.
Solusinya adalah mengimplementasikan algoritma Dynamic Shortest-Path Anchor Points:
-
Sistem secara real-time menghitung titik pusat (center points) antara dua kartu yang terhubung.
-
Garis penghubung (SVG smooth curve) secara otomatis mencari 2 titik jangkar terdekat di antara batas atas, bawah, kiri, atau kanan (Top, Bottom, Left, Right).
-
Hasilnya, konektor beradaptasi secara fleksibel saat kartu digeser tanpa menutupi isi catatan lain.
3. Stateless Persistence via Email Magic Link
Bagaimana cara menyimpan dan mengakses catatan di berbagai perangkat (cross-device) tanpa memaksa pengguna melewati alur sign-up atau login password yang melelahkan?
Di sini kami mengoperasikan mekanisme Magic Link / Secret Token:
-
Penyimpanan Lokal Pasif: Saat membuat catatan, data otomatis tersimpan di Local Storage browser.
-
Generasi Magic Link: Ketika tombol Save & Continue Later diklik, pengguna cukup memasukkan alamat email. Sistem akan mendatangkan edit token unik yang dikirim via email.
-
Pemisahan Mode View vs Edit:
-
Public / Read-Only Link: Bisa dibagikan ke siapa saja untuk melihat catatan secara bebas tanpa risiko teredit.
-
Secret Edit Link: Hanya dimiliki pemilik rahasia untuk melanjutkan atau memperbarui isi kanvas dari browser atau perangkat mana pun.
-
Sistem ini memastikan setiap project/board memiliki ID unik tersendiri sehingga pengguna bisa membuat banyak ruang ide berbeda tanpa saling menimpa.
4. Refinement UI & Micro-Interactions
Detail kecil sering kali menentukan kenyamanan sebuah aplikasi. Beberapa perbaikan mikro yang diterapkan pada tahap akhir meliputi:
-
Palet Warna Pastel Ringkas: Menambah variasi warna kartu (soft lavender, peach, teal, dan gray) dengan tata letak color picker grid yang diproduksi secara proporsional agar tidak menumpuk di layar HP.
-
Ekspor Gambar (PNG): Opsi mengunduh seluruh kanvas beserta konektornya secara bersih dalam bentuk gambar PNG resolusi tinggi tanpa menyertakan elemen UI/header.
-
Pencegahan Highlight Teks saat Dragging: Menerapkan aturan
user-select: nonepada elemen kanvas. Hal ini mencegah teks terus-menerus tersorot warna biru secara tidak sengaja saat pengguna melakukan navigasi menggeser (pan) kanvas.
Uji Coba & Iterasi Lanjutan
Notes kini resmi menjadi bagian dari ekosistem sandbox di dgtlz.com. Aplikasi ini siap digunakan untuk kebutuhan brainstorming cepat, pembuatan to-do list visual, hingga penyusunan peta pikiran sederhana.
Silakan coba langsung di notes.dgtlz.com! Jika ada masukan atau fitur yang menurut kamu menarik untuk ditambahkan, jangan ragu untuk berbagi tanggapan.
