Completed★ Featured2024-03
Xavi Habits Web
A habit-tracking SPA with drag-and-drop reordering, rich-text notes, and offline-capable query persistence.
About this project
A modern single-page app for tracking personal habits, built with React, TypeScript, and Vite. Uses Zustand for global state with localStorage persistence, TanStack Query with async-storage persister for offline-capable server state, and DnD Kit for drag-and-drop habit reordering. Notes support rich text via TipTap (with Markdown output). Framer Motion handles animated transitions and Sass Modules keep styles scoped. The project follows strict conventions: typed API layer, co-located tests, and full ESLint + Prettier + TypeScript strict-mode enforcement.
Technologies
ReactTypeScriptViteZustandTanStack QueryTipTapDnD KitFramer MotionSass