Métis Veterans Legacy Program Website

Context

The Métis Veterans Legacy Program recognizes Métis Veterans who served in the Second World War. It runs two things, a one-time recognition payment for veterans and their families, and a commemoration program that funds projects honouring them. The website is how families find out they qualify and how communities see what the program does.

The old site was on WordPress, and every change went through someone who knew their way around it. The program wanted to post news, add recipient profiles, and put up commemoration projects on their own, and they wanted it to look like it was made this decade. I'm the developer in the IT department, so it came to me.

Problem

Three kinds of content, three different shapes.

• News articles with a header image, an author, a category, and a body someone non-technical has to be able to write.
• Recipient profiles, with the veteran's name, a bio, a list of survivors and beneficiaries, and photos from the ceremony.
• Commemoration projects, with a title, a banner, project photos, a summary, and whatever extra the funded group wants to add.

The static pages about eligibility, how to apply, and the commission could stay in code. Everything that changes month to month had to be editable by staff, with drafts, and without me in the loop.

Approach

• Next.js 16
• React 19
• Strapi 5
• TipTap
• Tailwind 4
• Motion

I split it in two, a Strapi 5 backend that holds the content, and a Next.js 16 front end that reads from it.

The CMS. Four collection types, articles, categories, commemoration programs, and recognition payments. Articles, programs, and recipients all have draft and publish, so staff can get something ready and put it live later. Rich text uses a TipTap editor plugin instead of Strapi's default, with one preset that gives staff headings, lists, links, alignment, and the media library, and nothing else to get lost in. A seed script sets up public read permissions and sample content on first start, so a fresh environment is ready to demo.

Rendering rich text. The editor stores documents as ProseMirror JSON. I wrote a small renderer that turns that into HTML on the server with no DOM dependency, then runs it through DOMPurify before it hits the page. Paragraphs, headings, lists, links, alignment, and marks are all handled explicitly, so what staff see in the editor is what shows up.

The front end. Next.js with the App Router, server components fetching from Strapi, and dynamic routes for each article, recipient, and project. Strapi relations are populated by name rather than with a wildcard, because a wildcard populate can fall over on custom fields. Header images come from Strapi when there is one and fall back to a local placeholder keyed by the slug, so a card is never empty.

Design. Dark hero sections, a light body, cards with soft borders, and a little motion on scroll, counters that count up, sections that fade in. It takes the mood of the program's printed material without copying it. The commission page gives each commissioner a full profile with a portrait, and the eligibility page turns a dense set of rules into three cards a family can actually scan.

Outcome

It's live on a staging domain with real content, over a dozen recipient profiles that program staff published themselves through the CMS, the commission, and both program pages. It moves to its permanent domain when the program is ready to announce it. Staff can post a news story or add a recipient without asking me, which was the whole point.