A customizable trick selector that stores your moves locally and filters them by attributes.

— Bag of Tricks

Vue 3
Pinia
TypeScript
Vue Router
Nuxt UI
localStorage
Composition API
Dark Mode Support
Responsive Design

Bag of Tricks is a fully client-side trick selector built with Vue 3 and TypeScript, designed to let users create, categorize, and filter their own tricks without a backend. State is managed using Pinia, with data persisted in localStorage to support offline use.


The app features dynamic form handling with validation, success toasts, error states, and full CRUD functionality. Users can define specific properties for tricks like terrain or type, then selectively filter which are included in the random selection pool. The UI includes dark mode support and advanced filtering options built using the VueUse composables and Nuxt UI components.


This project highlights my ability to architect SPAs, write maintainable TypeScript with Composition API, and deliver clean, scalable UX using modern frontend best practices.

Project Views:

Bag Of Tricks - Landing

Bag Of Tricks - Landing

Bag Of Tricks - Landing - Dark Mode

Bag Of Tricks - Landing - Dark Mode

Bag Of Tricks - Terrain Filter

Bag Of Tricks - Terrain Filter

Bag Of Tricks - Trick Type Filter

Bag Of Tricks - Trick Type Filter

Bag Of Tricks - Selected Trick

Bag Of Tricks - Selected Trick

Bag Of Tricks - Modify Options

Bag Of Tricks - Modify Options

Bag Of Tricks - Add Trick Form

Bag Of Tricks - Add Trick Form

Bag Of Tricks - Add Trick Form: Errors

Bag Of Tricks - Add Trick Form: Errors

Bag Of Tricks - Success Toast

Bag Of Tricks - Success Toast

Bag Of Tricks - Edit Bag

Bag Of Tricks - Edit Bag

Bag Of Tricks - View bag

Bag Of Tricks - View bag