Skip to content

WorkDevelopmentUX

MPG Foundation

Production site for a community non-profit, built to last and be found.

Live site (opens in a new tab)
Role
Developer
Year
2025–2026
Context
NPO client work
Stack
Vite · React · Firestore · Firebase Hosting · Firebase Analytics · EmailJS
MPG Foundation open in a browser on a MacBook Pro

Desktop

MPG Foundation on an iPhone

Mobile

01The challenge

Move a non-profit to a new domain without breaking the QR codes already printed on its material, and give it a site that is secure, fast and easy to find.

“We just show up”, four principles beside a photo grid of community work
Live site, captured October 2026.

02The approach

  1. 01

    A migration nobody notices

    mpgf.co.za moved to mpgf.org.za with 301 redirects preserved, so every printed QR code still lands where it should.

  2. 02

    Forms that close the loop

    Dual-template EmailJS: the foundation gets an admin notification and the sender gets an auto-reply.

  3. 03

    Hardened and findable

    Hardened Firestore security rules. SEO with Open Graph and JSON-LD, Google Search Console, and a YouTube facade so video doesn't slow the page down.

  4. 04

    A brand to grow into

    A brand and style guide delivered alongside the build.

Screens05 Scroll
“Choosing action over silence”, the foundation's story beside the MPG logo
Live site, captured October 2026.
“Get Involved.”, volunteer, donation, partnership and nomination panels
Live site, captured October 2026.
“The same four steps, every project.”: Identify the need, Bring people together, Restore and rebuild
Live site, captured October 2026.
“Bringing the Centurion waterfront back to life.”, the first project, above photos of the volunteers and the restored river
Live site, captured October 2026.
“This city belongs to all of us.”, the closing statement on dark green
Live site, captured October 2026.

03Highlights

  1. 01Domain migration with 301s preserved for printed QR codes
  2. 02Dual-template EmailJS (admin notification + auto-reply)
  3. 03Hardened Firestore security rules
  4. 04Open Graph, JSON-LD and Google Search Console
  5. 05YouTube facade for performance

Built with

  • Vite
  • React
  • Firestore
  • Firebase Hosting
  • Firebase Analytics
  • EmailJS

04Credits

Enzo De Vittorio
Development
Imelda van Staden
UX design
Client
MPG Foundation (Make Pretoria Great)