Overview
MemoryShare is a leading funeral live streaming platform and while their portal received a consistent stream of updates to functionality, many core dependencies were outdated (like Vue-CLI, Vue 2, VUEX, and Vuetify 2.)
I was originally brought on to revamp a Vue 2.x application. I would also be tasked with leading the technical transformation of their web portal from an aging Vue 2 monolith with over 300 SFCs (originally built with Vue‑CLI) into a lean & lightweight, modern SPA powered by Vue 3 & Vite.
Observations & Challenges
| Issue | Impact |
|---|---|
| Slow builds | Slow builds, development server startup time, and sluggish HMR hampering rapid iteration |
| Reliance only on manual testing | Low test coverage, frustrating regressions in production |
| Ever-growing legacy code | 110k+ lines of monolithic Vue 2 project, difficult to maintain |
| Un-optimized builds | Large bundle sizes, and dependency bloat |
| Guestbook Proof‑of‑concept | Not-production ready and lacking a proper build pipeline |
The goal: Modernize the tech stack, ensure high reliability, reduce bundle size, and increase developer experience.
Approach & Implementation
1. Vue 3 + Vite Migration
- Strategy – Incremental rewrite of a Vue 2 app to Vue 3.
- Key Steps:
- Update to the latest NodeJS.
- Starting with replacing Vue‑CLI with Vite for faster dev and build times.
- Utilize Git worktrees to develop both branches simultaneously.
- Switched to Composables, Composition API and
<script setup>for cleaner code on new SFCs.- While incrementally updating existing components over as needed.
- Upgraded from Vuetify version 2 to Vuetify 4.
- Replaced deprecated Vue 2 plugins with Vue 3‑compatible alternatives.
- Migrated from VueX stores to Pinia.
- Result – 80% reduction in build time, smoother HMR and increased DX.
2. Responsive Design Implementation
- Translated high‑fidelity Figma mockups into production‑ready & responsive components.
- Implemented lazy loading for heavy components and libraries to increase initial load times.
3. Proof-of-concept to production-ready app
- Re‑engineered an internally vibe‑coded prototype into a production-ready application.
- Updated from a CDN-loaded Tailwind implementation to run-time compilation and bundling with Vite.
- Integrated the revamped application into the core live streaming components.
Results & Impact
| Metric | Before | After | Improvement |
|---|---|---|---|
| Build time | 1-3 min | ~30secs | 40-80% |
| Dev server startup | 30s | ~400ms | 99% |
| HMR time | 5s | ~200ms | 96% |
Lessons Learned
- Git Worktrees was a crucial factor in seamlessly developing on the new stack while having the main branch open for any bug/hot-fixes that needed shipping. Completely eliminating the need to stash and then reinstall dependencies.
- Incremental migration is less risky than a full rewrite; it allows continuous delivery and immediate quality gains.
- Developer Experience: Increasing HMR and dev server startup times had a direct impact in increasing developer output.
Takeaway
MemoryShare’s transformation showcases how a well‑planned migration to a modern frontend stack combined with testing and performance optimizations can deliver measurable business value:
- faster builds
- better user engagement
- quicker development cycle
- and smoother releases.
This project demonstrates my capability to architect, implement, and evangelize frontend solutions that scale with growing product demands. As well as my ability to jump into a project as a remote resource and both meet and exceed expectations.