[{"data":1,"prerenderedAt":400},["ShallowReactive",2],{"/projects/memoryshare":3,"/projects/memoryshare-surround":385},{"id":4,"title":5,"additionalTags":6,"body":7,"description":359,"excerpt":360,"extension":361,"featured":362,"hero":39,"meta":363,"name":30,"navigation":368,"openSource":362,"path":369,"projectDate":370,"projectFolder":360,"seo":371,"sitemap":372,"status":360,"stem":373,"subtitle":374,"tags":375,"thumbnail":383,"__hash__":384},"projects/projects/1.memoryshare.md","Memoryshare",[],{"type":8,"value":9,"toc":349},"minimark",[10,15,35,40,44,115,121,125,130,180,184,198,283,287,308,311,315,321],[11,12,14],"h2",{"id":13},"overview","Overview",[16,17,21,32],"div",{"className":18},[19,20],"not-prose","callout",[22,23,24,31],"p",{},[25,26,30],"a",{"href":27,"rel":28},"https://memoryshare.com",[29],"nofollow","MemoryShare"," is a leading funeral live streaming platform whose web portal, over many years, had become a sprawling Vue 2 monolith (300+ SFCs, and many outdated dependencies) originally built with Vue‑CLI, Vuex, Vuetify 2.",[22,33,34],{},"I was hired to revamp the existing Vue 2 app and lead a complete technical transformation into a lightweight, high‑performance SPA powered by Vue 3 + Vite.",[36,37],"full-img",{"alt":38,"src":39},"MemoryShare is a leading funeral live streaming platform.","/projects/memoryshare/hero.webp",[11,41,43],{"id":42},"observations-challenges","Observations & Challenges",[45,46,47,60],"table",{},[48,49,50],"thead",{},[51,52,53,57],"tr",{},[54,55,56],"th",{},"Issue",[54,58,59],{},"Impact",[61,62,63,75,85,95,105],"tbody",{},[51,64,65,72],{},[66,67,68],"td",{},[69,70,71],"strong",{},"Slow builds",[66,73,74],{},"Slow builds, development server startup time, and sluggish HMR hampering rapid iteration",[51,76,77,82],{},[66,78,79],{},[69,80,81],{},"Reliance only on manual testing",[66,83,84],{},"Low test coverage, frustrating regressions in production",[51,86,87,92],{},[66,88,89],{},[69,90,91],{},"Ever-growing legacy code",[66,93,94],{},"110k+ lines of monolithic Vue 2 project, difficult to maintain",[51,96,97,102],{},[66,98,99],{},[69,100,101],{},"Un-optimized builds",[66,103,104],{},"Large bundle sizes, and dependency bloat",[51,106,107,112],{},[66,108,109],{},[69,110,111],{},"Guestbook Proof‑of‑concept",[66,113,114],{},"Not-production ready and lacking a proper build pipeline",[22,116,117,120],{},[69,118,119],{},"The goal",": Modernize the tech stack, ensure high reliability, reduce bundle\nsize, and increase developer experience.",[11,122,124],{"id":123},"approach-implementation","Approach & Implementation",[22,126,127],{},[69,128,129],{},"Vue 3 + Vite Migration",[131,132,133,140],"ul",{},[134,135,136,139],"li",{},[69,137,138],{},"Strategy"," – Incremental rewrite of a Vue 2 app to Vue 3.",[134,141,142,145,146],{},[69,143,144],{},"Key Steps",":\n",[131,147,148,151,154,157,171,174,177],{},[134,149,150],{},"Update to the latest NodeJS.",[134,152,153],{},"Starting with replacing Vue‑CLI with Vite for faster dev and build times.",[134,155,156],{},"Utilize Git worktrees to develop both branches simultaneously.",[134,158,159,160,165,166],{},"Switched to Composables, Composition API and ",[161,162,164],"code",{"className":163},[19],"\u003Cscript setup>"," for cleaner code on new SFCs.\n",[131,167,168],{},[134,169,170],{},"While incrementally updating existing components over as needed.",[134,172,173],{},"Upgraded from Vuetify version 2 to Vuetify 4.",[134,175,176],{},"Replaced deprecated Vue 2 plugins with Vue 3‑compatible alternatives.",[134,178,179],{},"Migrated from VueX stores to Pinia.",[11,181,183],{"id":182},"results-impact","Results & Impact",[131,185,186,192],{},[134,187,188,191],{},[69,189,190],{},"80% reduction"," in build time",[134,193,194,197],{},[69,195,196],{},"102% Increase"," in Lighthouse performance score.",[45,199,200,218],{},[48,201,202],{},[51,203,204,208,212,215],{},[54,205,207],{"align":206},"right","Metric",[54,209,211],{"align":210},"center","Before",[54,213,214],{"align":210},"After",[54,216,217],{"align":210},"Improvement",[61,219,220,243,263],{},[51,221,222,225,233,236],{},[66,223,224],{"align":206},"Build time",[66,226,227],{"align":210},[228,229,232],"span",{"className":230},[231],"text-red-400","1-3 min",[66,234,235],{"align":210},"~30secs",[66,237,238],{"align":210},[228,239,242],{"className":240},[241],"text-primary","40-80%",[51,244,245,248,254,257],{},[66,246,247],{"align":206},"Dev server startup",[66,249,250],{"align":210},[228,251,253],{"className":252},[231],"30s",[66,255,256],{"align":210},"~400ms",[66,258,259],{"align":210},[228,260,262],{"className":261},[241],"99%",[51,264,265,268,274,277],{},[66,266,267],{"align":206},"HMR time",[66,269,270],{"align":210},[228,271,273],{"className":272},[231],"5s",[66,275,276],{"align":210},"~200ms",[66,278,279],{"align":210},[228,280,282],{"className":281},[241],"96%",[11,284,286],{"id":285},"lessons-learned","Lessons Learned",[288,289,290,296,302],"ol",{},[134,291,292,295],{},[69,293,294],{},"Git Worktrees"," was a crucial factor in seamlessly developing on the new stack while\nhaving the main branch open for any bug/hot-fixes that needed shipping.\nCompletely eliminating the need to stash and then reinstall dependencies.",[134,297,298,301],{},[69,299,300],{},"Incremental migration"," is less risky than a full rewrite; it allows\ncontinuous delivery and immediate quality gains.",[134,303,304,307],{},[69,305,306],{},"Developer Experience",": Increasing HMR and dev server startup times had a direct impact in increasing developer output.",[309,310],"hr",{},[11,312,314],{"id":313},"outcome","Outcome",[16,316,318],{"className":317},[20],[22,319,320],{},"MemoryShare’s transformation showcases how a well‑planned migration to a modern frontend\nstack combined with testing and performance optimizations can\ndeliver measurable business value:",[228,322,326],{"className":323},[324,325],"font-serif","text-lg!",[131,327,328,333,338,343],{},[134,329,330],{},[69,331,332],{},"faster builds",[134,334,335],{},[69,336,337],{},"better user engagement",[134,339,340],{},[69,341,342],{},"quicker development cycle",[134,344,345,346],{},"and ",[69,347,348],{},"smoother releases.",{"title":350,"searchDepth":351,"depth":351,"links":352},"",2,[353,354,355,356,357,358],{"id":13,"depth":351,"text":14},{"id":42,"depth":351,"text":43},{"id":123,"depth":351,"text":124},{"id":182,"depth":351,"text":183},{"id":285,"depth":351,"text":286},{"id":313,"depth":351,"text":314},"Complete overhaul of a legacy app to a modern Vue3 + Vite stack.",null,"md",false,{"slug":364,"layout":365,"summary":366,"author":367},"memoryshare","case-study","My freelance work with MemoryShare resulted in modernizing their Vue 2.x codebase, introduced end‑to‑end testing, built a production‑ready embedded guestbook, and delivered yearly Spotify‑style “Wrapped” experiences.\n","Cesar Vargas",true,"/projects/memoryshare","2024-11-29T00:00:00.000Z",{"description":359},{"loc":369},"projects/1.memoryshare","Case Study",[376,377,378,379,380,381,382],"Vue 2","Vue 3","Vite","Testing","Playwright","SPA","Animation","/projects/memoryshare/thumb.webp","J5oziR34QTDP2P9Y122czoJfsm2B9ObkgjlMnzfhhpM",[360,386],{"title":387,"path":388,"stem":389,"name":387,"description":390,"subtitle":391,"thumbnail":392,"tags":393,"children":-1},"Portfolio Refresh","/projects/portfolio-refresh","projects/1.portfolio-refresh","Rebuilding my website with modern tech.","Gotta go fast","/projects/portfolio/thumb.webp",[394,395,396,397,398,399],"VueJS","Nuxt","GSAP","Tailwind","TypeScript","Git",1784566782537]