Wanted to demonstrate advanced Vue.js patterns and state management without relying on Vuex/Pinia, while building a practical productivity tool.

Architected a composable-driven state management pattern using Vue 3 reactive primitives instead of external state libraries, with full drag-and-drop, fuzzy search, and accessibility features.

Vuello

A Kanban-style task management SPA built with Vue 3 Composition API, TypeScript, and composable-driven state management.

Features

Drag & Drop — Full drag-and-drop reordering for both lists and cards across columns using vuedraggable
Fuzzy Search — Search filtering across titles and descriptions via Fuse.js integrated through VueUse's useFuse composable
Composable State — Custom state management using Vue 3 reactive primitives (ref, reactive, watch) with automatic localStorage persistence
Accessibility — Modal system with ARIA attributes, focus trapping (useFocusTrap), keyboard navigation (Escape to close)
Priority System — Color-coded urgency indicators (green/yellow/red based on days remaining), custom tag labels with contrast-aware text rendering
Dark/Light Mode — Theme toggle with persistent preference
Form Validation — Inline error messages with comprehensive validation

Wanted to demonstrate advanced Vue.js patterns and state management without relying on Vuex/Pinia, while building a practical productivity tool.

Architected a composable-driven state management pattern using Vue 3 reactive primitives instead of external state libraries, with full drag-and-drop, fuzzy search, and accessibility features.

Vuello

A Kanban-style task management SPA built with Vue 3 Composition API, TypeScript, and composable-driven state management.

Features

Drag & Drop — Full drag-and-drop reordering for both lists and cards across columns using vuedraggable
Fuzzy Search — Search filtering across titles and descriptions via Fuse.js integrated through VueUse's useFuse composable
Composable State — Custom state management using Vue 3 reactive primitives (ref, reactive, watch) with automatic localStorage persistence
Accessibility — Modal system with ARIA attributes, focus trapping (useFocusTrap), keyboard navigation (Escape to close)
Priority System — Color-coded urgency indicators (green/yellow/red based on days remaining), custom tag labels with contrast-aware text rendering
Dark/Light Mode — Theme toggle with persistent preference
Form Validation — Inline error messages with comprehensive validation

Vuello — Kanban Task Management App

Tech Stack

The Problem

The Solution

Vuello

Features

Vuello — Kanban Task Management App

Tech Stack

The Problem

The Solution

Vuello

Features