Task Management Platform
Built an elegant task management tool with a warm paper theme (Lora + Noto Serif SC serif fonts), offline-first architecture, and anonymous cloud sync via Supabase. Features include three-state toggle, drag-and-drop sorting via @dnd-kit, inline editing, keyboard shortcuts, and hCaptcha abuse protection. 25 test cases with Vitest + React Testing Library.
挑战
Implementing offline-first architecture with graceful degradation to localStorage
Anonymous cloud sync with Supabase RLS and hCaptcha abuse protection
Complex drag-and-drop state management with @dnd-kit
解决方案
Auto-detection: uses Supabase when configured, falls back to localStorage otherwise
Supabase Anonymous Auth + Row Level Security for secure multi-device sync
@dnd-kit sortable context with optimistic UI updates for instant feedback
核心收获
Offline-first architecture and progressive enhancement patterns
Supabase BaaS (Auth, RLS, real-time) integration
Accessible drag-and-drop and keyboard navigation design
项目指标
Test Coverage
25 tests
Tech Stack
Next.js 16