[{"data":1,"prerenderedAt":410},["ShallowReactive",2],{"/case-studies/memoryshare":3},{"id":4,"title":5,"additionalTags":6,"body":7,"ctaDescription":384,"ctaTitle":384,"description":368,"excerpt":384,"extension":385,"featured":386,"meta":387,"name":23,"navigation":394,"openSource":386,"path":395,"projectDate":384,"seo":396,"sitemap":397,"status":384,"stem":398,"subtitle":399,"tags":400,"thumbnail":408,"__hash__":409},"caseStudies/case-studies/1.memoryshare.md","Overview",[],{"type":8,"value":9,"toc":367},"minimark",[10,14,25,28,31,36,107,113,117,125,185,192,200,207,218,222,307,311,332,334,338,341,364],[11,12,5],"h1",{"id":13},"overview",[15,16,17,24],"p",{},[18,19,23],"a",{"href":20,"rel":21},"https://memoryshare.com",[22],"nofollow","MemoryShare"," is a leading funeral live streaming platform and while their portal\nreceived a consistent stream of updates to functionality, many core dependencies were outdated (like Vue-CLI, Vue 2, VUEX, and Vuetify 2.)",[15,26,27],{},"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.",[29,30],"hr",{},[32,33,35],"h2",{"id":34},"observations-challenges","Observations & Challenges",[37,38,39,52],"table",{},[40,41,42],"thead",{},[43,44,45,49],"tr",{},[46,47,48],"th",{},"Issue",[46,50,51],{},"Impact",[53,54,55,67,77,87,97],"tbody",{},[43,56,57,64],{},[58,59,60],"td",{},[61,62,63],"strong",{},"Slow builds",[58,65,66],{},"Slow builds, development server startup time, and sluggish HMR hampering rapid iteration",[43,68,69,74],{},[58,70,71],{},[61,72,73],{},"Reliance only on manual testing",[58,75,76],{},"Low test coverage, frustrating regressions in production",[43,78,79,84],{},[58,80,81],{},[61,82,83],{},"Ever-growing legacy code",[58,85,86],{},"110k+ lines of monolithic Vue 2 project, difficult to maintain",[43,88,89,94],{},[58,90,91],{},[61,92,93],{},"Un-optimized builds",[58,95,96],{},"Large bundle sizes, and dependency bloat",[43,98,99,104],{},[58,100,101],{},[61,102,103],{},"Guestbook Proof‑of‑concept",[58,105,106],{},"Not-production ready and lacking a proper build pipeline",[15,108,109,112],{},[61,110,111],{},"The goal",": Modernize the tech stack, ensure high reliability, reduce bundle\nsize, and increase developer experience.",[32,114,116],{"id":115},"approach-implementation","Approach & Implementation",[118,119,121,122],"h3",{"id":120},"_1-vue3-vite-migration","1. ",[61,123,124],{},"Vue 3 + Vite Migration",[126,127,128,135,176],"ul",{},[129,130,131,134],"li",{},[61,132,133],{},"Strategy"," – Incremental rewrite of a Vue 2 app to Vue 3.",[129,136,137,140,141],{},[61,138,139],{},"Key Steps",":\n",[126,142,143,146,149,152,167,170,173],{},[129,144,145],{},"Update to the latest NodeJS.",[129,147,148],{},"Starting with replacing Vue‑CLI with Vite for faster dev and build times.",[129,150,151],{},"Utilize Git worktrees to develop both branches simultaneously.",[129,153,154,155,161,162],{},"Switched to Composables, Composition API and ",[156,157,160],"code",{"className":158},[159],"not-prose","\u003Cscript setup>"," for cleaner code on new SFCs.\n",[126,163,164],{},[129,165,166],{},"While incrementally updating existing components over as needed.",[129,168,169],{},"Upgraded from Vuetify version 2 to Vuetify 4.",[129,171,172],{},"Replaced deprecated Vue 2 plugins with Vue 3‑compatible alternatives.",[129,174,175],{},"Migrated from VueX stores to Pinia.",[129,177,178,181,182],{},[61,179,180],{},"Result"," – ",[61,183,184],{},"80% reduction in build time, smoother HMR and increased DX.",[118,186,188,189],{"id":187},"_2-responsive-design-implementation","2. ",[61,190,191],{},"Responsive Design Implementation",[126,193,194,197],{},[129,195,196],{},"Translated high‑fidelity Figma mockups into production‑ready & responsive components.",[129,198,199],{},"Implemented lazy loading for heavy components and libraries to increase initial load times.",[118,201,203,204],{"id":202},"_3-proof-of-concept-to-production-ready-app","3. ",[61,205,206],{},"Proof-of-concept to production-ready app",[126,208,209,212,215],{},[129,210,211],{},"Re‑engineered an internally vibe‑coded prototype into a production-ready application.",[129,213,214],{},"Updated from a CDN-loaded Tailwind implementation to run-time compilation and bundling with Vite.",[129,216,217],{},"Integrated the revamped application into the core live streaming components.",[32,219,221],{"id":220},"results-impact","Results & Impact",[37,223,224,242],{},[40,225,226],{},[43,227,228,232,236,239],{},[46,229,231],{"align":230},"right","Metric",[46,233,235],{"align":234},"center","Before",[46,237,238],{"align":234},"After",[46,240,241],{"align":234},"Improvement",[53,243,244,267,287],{},[43,245,246,249,257,260],{},[58,247,248],{"align":230},"Build time",[58,250,251],{"align":234},[252,253,256],"span",{"className":254},[255],"text-red-400","1-3 min",[58,258,259],{"align":234},"~30secs",[58,261,262],{"align":234},[252,263,266],{"className":264},[265],"text-primary","40-80%",[43,268,269,272,278,281],{},[58,270,271],{"align":230},"Dev server startup",[58,273,274],{"align":234},[252,275,277],{"className":276},[255],"30s",[58,279,280],{"align":234},"~400ms",[58,282,283],{"align":234},[252,284,286],{"className":285},[265],"99%",[43,288,289,292,298,301],{},[58,290,291],{"align":230},"HMR time",[58,293,294],{"align":234},[252,295,297],{"className":296},[255],"5s",[58,299,300],{"align":234},"~200ms",[58,302,303],{"align":234},[252,304,306],{"className":305},[265],"96%",[32,308,310],{"id":309},"lessons-learned","Lessons Learned",[312,313,314,320,326],"ol",{},[129,315,316,319],{},[61,317,318],{},"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.",[129,321,322,325],{},[61,323,324],{},"Incremental migration"," is less risky than a full rewrite; it allows\ncontinuous delivery and immediate quality gains.",[129,327,328,331],{},[61,329,330],{},"Developer Experience",": Increasing HMR and dev server startup times had a direct impact in increasing developer output.",[29,333],{},[32,335,337],{"id":336},"takeaway","Takeaway",[15,339,340],{},"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:",[126,342,343,348,353,358],{},[129,344,345],{},[61,346,347],{},"faster builds",[129,349,350],{},[61,351,352],{},"better user engagement",[129,354,355],{},[61,356,357],{},"quicker development cycle",[129,359,360,361],{},"and ",[61,362,363],{},"smoother releases.",[15,365,366],{},"This project demonstrates my capability to architect, implement, and evangelize frontend solutions\nthat scale with growing product demands. As well as my ability to jump into a project as a remote resource\nand both meet and exceed expectations.",{"title":368,"searchDepth":369,"depth":369,"links":370},"",2,[371,372,381,382,383],{"id":34,"depth":369,"text":35},{"id":115,"depth":369,"text":116,"children":373},[374,377,379],{"id":120,"depth":375,"text":376},3,"1. Vue 3 + Vite Migration",{"id":187,"depth":375,"text":378},"2. Responsive Design Implementation",{"id":202,"depth":375,"text":380},"3. Proof-of-concept to production-ready app",{"id":220,"depth":369,"text":221},{"id":309,"depth":369,"text":310},{"id":336,"depth":369,"text":337},null,"md",false,{"slug":388,"date":389,"layout":390,"hero":391,"summary":392,"author":393},"memoryshare","2023-08-15","case-study","/images/memoryshare-hero.jpg","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,"/case-studies/memoryshare",{"title":5,"description":368},{"loc":395},"case-studies/1.memoryshare","Case Study",[401,402,403,404,405,406,407],"Vue 2","Vue 3","Vite","Testing","Playwright","SPA","Animation","/case-studies/memoryshare/thumb.webp","LPO5WIDcF3nkc7K294dQCSnOtJbCwkaLduqsBROUI-g",1778072419404]