La Maison-Grand is a "third-place" non-profit in Etalans, France. It's a place that brings together a cooperative workshop, a fablab, a café, and various events like concerts and workshops. As a regular volunteer there, I was asked to build a website that could match their energy and simplify their operations.

Managing complexity with simplicity

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:

1. A unified online presence: a website where anyone could discover what's happening at La Maison-Grand.
2. Administrative tools: they were managing room rentals by hand, which was incredibly time-consuming and sometimes led to errors.

I decided to build a custom solution from scratch to ensure it fit their unique workflow perfectly.

A custom CMS built for the team

Instead of using a generic website builder, I developed a bespoke Content Management System (CMS).

Using Express.js, TypeScript, and MongoDB, I built a robust API to power the site. This 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.

Automating the boring stuff with a rental management system

Because it was painful to manage rentals by hand, I integrated a custom booking system into the member area.

• Online renting: members can view availability and book rooms directly on the website.
• Digital invoices: the system automatically generates invoices and makes it easier to track payment statuses. This change alone saved the coordinator precious time.

Design & experience

I designed the interface to be warm and welcoming, following the association's existing branding. I also focused on the "feel" of the site by adding smooth animations using Framer Motion to make the navigation more engaging.

Built to last ... and Open Source

Because this was a project for a non-profit, and to follow my engagements, I wanted to ensure it was sustainable and ethical

• Privacy-first: I chose to use Umami for analytics, a Google Analytics privacy-friendly alternative.
• Open Source: the entire project is built with free tools, and the code is available on GitLab.
• Modern technologies: built with Vue 3 and TypeScript, the architecture is robust and ready for the future !

Special thanks to La Maison-Grand for their trust and letting me work on their website.