Spellhand
Overview
Berawal dari pertemuan tak terduga dengan orang tuli yang tidak bisa aku ajak berkomunikasi, Spellhand adalah trainer fingerspelling ASL berbasis mobile yang jalan sepenuhnya di browser. Remake solo dari fingerspelling.xyz yang desktop-only, menargetkan handphone tempat mayoritas pelajar casual sebenarnya berada. Hand tracking jalan on-device lewat MediaPipe HandLandmarker, klasifikasi rule-based (satu fungsi TypeScript per huruf, tanpa model terlatih), dan penyelesaian menerbitkan sertifikat shareable yang didukung magic-link auth Supabase.
Tech Stack
- Next.js 16 + TypeScript untuk aplikasi App Router dengan Turbopack
- TailwindCSS v4 untuk styling pakai konfigurasi CSS-first @theme
- @mediapipe/tasks-vision untuk HandLandmarker (21 keypoint per frame, jalan di browser)
- Custom rule-based recognition module terinspirasi pola gesture-rule fingerpose
- Motion (motion/react) untuk transisi antar stage
- Supabase + @supabase/ssr untuk auth, RLS, dan flow sertifikat
- Vercel untuk hosting dan route OG image dinamis
Features
- 24 Huruf ASL Statis. Referensi SVG public-domain dari Wikimedia untuk setiap huruf kecuali J dan Z yang dinamis dan ditunda ke fase berikutnya.
- Level Progresif & Challenge Akhir. Empat level dengan tingkat kesulitan meningkat plus Challenge mode memori yang jadi gate buat flow sertifikat.
- Hand Tracking di Browser. MediaPipe HandLandmarker jalan sepenuhnya di client-side; tidak ada frame video yang meninggalkan device.
- Classifier Rule-Based Per Huruf. Tiap huruf adalah fungsi TypeScript yang mengurai handshape jadi sub-check independen per jari: curled, extended, sudut, jarak ujung.
- Overlay Sub-Check Per Jari. Saat deteksi gagal, skeleton menyorot persis jari mana yang salah, bukan sekadar menampilkan angka confidence.
- Toggle Right & Left-Handed. Mirror logic deteksi, crop video, dan gambar referensi bareng-bareng, bukan cuma flip visual.
- Magic-Link Auth & Sertifikat Shareable. Share page publik /cert/[token] didukung OG image dinamis dan view Supabase yang anon-readable.
Challenges & Solutions
Recognition tanpa training set. Bundling model TensorFlow akan memperbesar payload JS dan menyamarkan apa yang sebenarnya dikerjakan classifier. Diatasi dengan menulis satu fungsi TypeScript rule-based per huruf, mengurai tiap handshape jadi sub-check independen per jari. Tiap rule debuggable di TS biasa, dan overlay debug expose tiap nilai sub-check secara live.
Feedback yang actionable buat learner. Angka confidence tunggal tidak memberi tahu learner apa-apa yang berguna. Diatasi dengan menjadikan skeleton itu sendiri sebagai permukaan feedback: tiap jari menyala atau tetap abu-abu, jadi learner langsung lihat jari mana yang salah, bukan cuma bahwa ada yang salah.
Handedness tanpa merusak logic. Flip horizontal yang naif terlihat benar tapi merusak klasifikasi karena indeks landmark tetap sama. Diatasi dengan mirror logic deteksi, crop video, dan gambar referensi bareng-bareng, sehingga layout swap tapi rule check tetap mereferensikan tangan yang sebenarnya.
Privacy by default. Mengirim video ke server bakal memaksa review compliance dan menggelembungkan biaya hosting. Diatasi dengan menjalankan tiap frame on-device dan cuma mem-persist state turunan landmark (baris sertifikat itu sendiri) ke Supabase. Tabel dilindungi RLS, dan share view publik cuma expose share_token, display_name, dan issued_at.
Mobile-first tanpa mengorbankan akurasi. Orientasi kamera, ukuran tangan, dan aspect ratio berbeda jauh di handphone, padahal trainer desktop original tidak pernah dituning untuk jalan di sana. Diatasi dengan menormalisasi berdasarkan ukuran tangan dan pakai rasio sudut serta jarak alih-alih posisi pixel absolut.
Lessons Learned
- Rule-based mengalahkan trained model ketika rule-nya pendek dan dataset bakal mahal. Tiap huruf satu fungsi dan tiap kegagalan debuggable di TS biasa.
- Feedback per jari itu produknya. Angka confidence tunggal invisible buat learner; mewarnai skeleton itulah yang beneran mengajarkan.
- Privacy sebagai hard constraint menyederhanakan arsitektur. Tidak ada pipeline video, tidak ada storage layer, tidak ada budget inferensi ML — cuma landmark dan rule.
- Ship schema terkecil yang berfungsi. Dua tabel dan satu view bikin flow sertifikat mudah dipahami; mastery, streak, dan tiered cert bisa nunggu sampai pantas dapat tempat di store.
