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