Instructor Dashboard — Vue 3 Migration
Work Projects
Summary
Led the full architectural migration of the instructor dashboard from Vue 2 with Vue CLI, Vuex, and CoreUI Pro to Vue 3 with Composition API, Pinia, Nuxt UI, and Tailwind CSS — spanning 30+ views and 130+ components, reducing bundle size by 63% and improving page loads by over 50%. Rebuilt every major feature from scratch as the primary developer, including the ticket system, notification system, integrations, account profile, book catalog, and a redesigned request materials flow powered by Google Address Validation API.
Implemented Zod schema validation across all forms, built a centralized API composable layer with VueUse, and introduced a testing suite with Vitest and Playwright. Modernized patterns throughout with lazy loading and persisted state.
Description
The original instructor dashboard had been built on Vue 2 with Vue CLI, Vuex, and CoreUI Pro. As that ecosystem approached end-of-life and the application's complexity grew, a ground-up migration to a modern Vue 3 stack was needed to ensure long-term maintainability and unlock newer development patterns.
I led this migration as the primary developer, rebuilding every major feature from scratch in a new Vue 3 project using Composition API, Pinia for state management, Nuxt UI for the component library, and Tailwind CSS for styling. The scope covered the full application surface: the books dashboard with draggable sorting and course archiving, a sidebar and header with notification dropdowns, a complete request help system with nine individual ticket topic components, an account profile section with image upload and Zod schema validation, a notification system with full CRUD operations and a dedicated Pinia store, an integrations system with lazy-loaded data and visibility tracking, and a book catalog with search and subject filtering.
The architectural decisions centered on building a composable-driven codebase. I created composables for API fetching with store integration, active course management, breakpoint detection, form state with reset functionality, and loading debounce. All forms used Zod schemas for validation, replacing the manual validation approach from the Vue 2 version. I replaced vue-resource HTTP calls with VueUse's useFetch and built a centralized API client. State persistence shifted from vuex-persist to pinia-plugin-persistedstate. I also set up the CI/CD pipeline with PR deploy workflows and CDN placeholder replacement for staging and production environments.
This migration is my single largest body of work and represents a complete modernization of the predecessor Vue 2 instructor dashboard, demonstrating my ability to architect and execute a full-scale application rebuild while adopting modern tooling across every layer of the stack.
Key Highlights
- Led full architectural migration from Vue 2 with Vue CLI and Vuex to Vue 3 with Composition API and Pinia, spanning 30+ views and 130+ components
- Achieved 63% bundle size reduction and 50%+ faster page loads over the Vue 2 version
- Zod schema validation across all forms replacing manual validation from the Vue 2 version
- Composable-driven architecture with centralized API client, store integration, and loading debounce
- Testing suite with Vitest unit tests and Playwright end-to-end coverage
- Redesigned material request form integrating Google Address Validation API
- LTI 1.1 to 1.3 migration for LMS authentication and launch flows
- CI/CD pipeline with PR deploy workflows and CDN placeholder replacement for staging and production