[{"data":1,"prerenderedAt":217},["ShallowReactive",2],{"project-la-maison-grand":3},{"id":4,"title":5,"backgroundColor":6,"banner":7,"body":8,"color":194,"date":195,"dateString":196,"description":197,"extension":198,"featured":199,"icon":200,"logo":201,"meta":202,"name":203,"navigation":199,"path":204,"role":205,"seo":206,"stack":207,"stem":211,"tags":212,"type":215,"__hash__":216},"projects\u002Fprojects\u002Fla-maison-grand.md","Building a website and custom web-based tools from scratch for a nonprofit","#F3A871","\u002Fprojects\u002Flmg\u002Fbanner.png",{"type":9,"value":10,"toc":184},"minimark",[11,15,20,23,40,43,47,54,61,65,68,83,115,119,126,132,136,139,178],[12,13,14],"p",{},"La Maison-Grand is a \"third-place\" non-profit in Etalans, France.\nIt's a place that brings together a cooperative workshop, a fablab, a café, and various events like concerts and workshops.\nAs a regular volunteer there, I was asked to build a website that could match their energy and simplify their operations.",[16,17,19],"h3",{"id":18},"managing-complexity-with-simplicity","Managing complexity with simplicity",[12,21,22],{},"Uniting so many different activities (rentals, events, news, and community projects) into one website was a significant challenge. The non-profit had two main needs:",[24,25,26,34],"ol",{},[27,28,29,33],"li",{},[30,31,32],"strong",{},"A unified online presence",": a website where anyone could discover what's happening at La Maison-Grand.",[27,35,36,39],{},[30,37,38],{},"Administrative tools",": they were managing room rentals by hand, which was incredibly time-consuming and sometimes led to errors.",[12,41,42],{},"I decided to build a custom solution from scratch to ensure it fit their unique workflow perfectly.",[16,44,46],{"id":45},"a-custom-cms-built-for-the-team","A custom CMS built for the team",[12,48,49,50,53],{},"Instead of using a generic website builder, I developed a ",[30,51,52],{},"bespoke Content Management System (CMS)",".",[12,55,56,57,60],{},"Using ",[30,58,59],{},"Express.js, TypeScript, and MongoDB",", I built a robust API to power the site.\nThis allowed me to create a dedicated admin panel where the website admin can easily update news, add events, and manage images without needing any technical knowledge.",[16,62,64],{"id":63},"automating-the-boring-stuff-with-a-rental-management-system","Automating the boring stuff with a rental management system",[12,66,67],{},"Because it was painful to manage rentals by hand, I integrated a custom booking system into the member area.",[69,70,71,77],"ul",{},[27,72,73,76],{},[30,74,75],{},"Online renting",": members can view availability and book rooms directly on the website.",[27,78,79,82],{},[30,80,81],{},"Digital invoices",": the system automatically generates invoices and makes it easier to track payment statuses.\nThis change alone saved the coordinator precious time.",[84,85,86],"gallery",{},[87,88,95,104,110],"div",{"className":89},[90,84,91,92,93,94],"columns","is-justify-content-center","is-multiline","mt-5","mb-5",[96,97],"gallery-image",{"alt":98,"className":99,"src":102,"ratio":103},"The custom admin dashboard for content and rental management",[100,101],"column","is-full","\u002Fprojects\u002Flmg\u002Fscreenshot_admin.png","16\u002F9",[96,105],{"alt":106,"className":107,"src":109},"The private member area for room bookings",[100,108],"is-half","\u002Fprojects\u002Flmg\u002Fscreenshot_user.png",[96,111],{"alt":112,"className":113,"src":114},"Community gallery showcasing recent events",[100,108],"\u002Fprojects\u002Flmg\u002Fscreenshot_gallery.png",[16,116,118],{"id":117},"design-experience","Design & experience",[12,120,121,122,125],{},"I designed the interface to be warm and welcoming, following the association's existing branding.\nI also focused on the \"feel\" of the site by adding smooth animations using ",[30,123,124],{},"Framer Motion"," to make the navigation more engaging.",[127,128],"video-player",{":auto-play":129,":controls":129,":muted":129,":plays-inline":129,"alt":130,"ratio":103,"src":131},"true","Video showing the smooth landing page animations","\u002Fprojects\u002Flmg\u002Flanding.mp4",[16,133,135],{"id":134},"built-to-last-and-open-source","Built to last ... and Open Source",[12,137,138],{},"Because this was a project for a non-profit, and to follow my engagements, I wanted to ensure it was sustainable and ethical",[69,140,141,151,164],{},[27,142,143,146,147,150],{},[30,144,145],{},"Privacy-first",": I chose to use ",[30,148,149],{},"Umami"," for analytics, a Google Analytics privacy-friendly alternative.",[27,152,153,156,157,53],{},[30,154,155],{},"Open Source",": the entire project is built with free tools, and the code is ",[158,159,163],"a",{"href":160,"rel":161},"https:\u002F\u002Fgitlab.com\u002Flamaisongrand\u002Fsite",[162],"nofollow","available on GitLab",[27,165,166,169,170,173,174,177],{},[30,167,168],{},"Modern technologies",": built with ",[30,171,172],{},"Vue 3"," and ",[30,175,176],{},"TypeScript",", the architecture is robust and ready for the future !",[12,179,180],{},[181,182,183],"em",{},"Special thanks to La Maison-Grand for their trust and letting me work on their website.",{"title":185,"searchDepth":186,"depth":186,"links":187},"",2,[188,190,191,192,193],{"id":18,"depth":189,"text":19},3,{"id":45,"depth":189,"text":46},{"id":63,"depth":189,"text":64},{"id":117,"depth":189,"text":118},{"id":134,"depth":189,"text":135},"#FF6B00",20251201,"december 2025","Development of a dynamic website for a nonprofit using Vue and a custom CMS built with Express.","md",true,"\u002Fprojects\u002Flmg\u002Ficon.png","\u002Fprojects\u002Flmg\u002Flogo.svg",{},"La Maison-Grand","\u002Fprojects\u002Fla-maison-grand","Development",{"title":5,"description":197},[208,209,210],"vue","typescript","mongodb","projects\u002Fla-maison-grand",[213,214],"Fullstack","Design UI","Volunteering","7if6u9emkJp42uk1pjq9vh-0oa0PrKjEWNpklWdbV60",1777822601502]