Member Portal — Crohn & Colitis Portugal

📋 Overview

Two years after implementing the member management system in SharePoint Online, the Crohn/Colite Portugal Association reached the natural limits of the platform. Growing membership, the need to process online payments in real time, and the demand for a mobile-first experience for members made it clear that an evolution was needed.

AvantIT developed a brand-new web platform — composed of three interconnected components — that replaces the SPFx Web Part with dedicated SPA applications, hosted on the association’s own server, with no dependency on Microsoft licences or third-party platforms.

---

🎯 The Challenge

Evolution Context

The 2024 solution successfully achieved its initial goal: digitalising and centralising member management, eliminating €300/month in external licences. However, as the association grew and internal processes matured, new requirements emerged that the SharePoint/SPFx architecture could not natively satisfy:

• Online payments at the moment of need: Members needed to pay their quotas directly in the portal, without being redirected to external platforms or relying on manual third-party access.
• Member self-service portal: The previous Web Part was only visible to users authenticated on the Microsoft tenant, limiting reach to members with an active Microsoft account.
• Digital Member Card: Need to issue a digital card with a QR Code for in-person validation and digital sharing.
• Platform independence: Reduce dependency on the Microsoft 365 ecosystem and gain full control over infrastructure and data.
• Dedicated administrative back-office: Advanced quota management (bulk generation, renewal emails, proof-of-payment validation) required a standalone administrative interface.

Technical Requirements

• Integrated payments: Support for Multibanco (dynamically generated references) and MBWay (push payment request) via IfthenPay.
• Own authentication: Login system with JWT and refresh tokens, with no dependency on Microsoft accounts.
• Digital card with QR Code: Dynamically generated with the member’s data and profile photo.
• Annual quota management: Bulk generation of quotas by year, renewal email sending, and tracking of proofs submitted by members.
• Secure REST API: Centralised back-end serving both portals with permission control by layer (member vs. administrator).

---

💡 The Solution

Architectural Approach

A three-tier independent architecture was chosen, each layer with well-defined responsibilities:

┌──────────────────────┐   ┌──────────────────────────┐
│    Member Portal     │   │  Administration Portal   │
│  (React + Vite SPA)  │   │  (React + Vite SPA)      │
└──────────┬───────────┘   └───────────┬──────────────┘
           │                           │
           └──────────┬────────────────┘
                      ▼
          ┌────────────────────────┐
          │       REST API         │
          │  (Node.js + Express)   │
          │  MySQL · IfthenPay     │
          │  JWT · Nodemailer      │
          └────────────────────────┘

This separation allows each portal to evolve independently, with surgical deployments and no downtime for users of other modules.

Member Portal

Self-service interface for association members, accessible with their own credentials (no Microsoft account required):

• Personalised dashboard with account status, overdue quotas and quick access to resources.
• Digital Member Card with profile photo, membership number, unique QR Code and automatically calculated validity. Shareable and displayable on screen.
• Quota Area with full history, payment status per entry (Paid, Pending, Overdue) and inline actions:
  • Payment via Multibanco (reference generated via IfthenPay, valid for a configurable period)
  • Payment via MBWay (push payment request sent to the member’s mobile)
  • Proof-of-payment upload (PDF or image), with visible validation status
• Member Benefits: listing of benefits available to members.
• Editable Profile: update of personal data, address, contacts and photo.

Administration Portal

Dedicated back-office for the association’s team, with separate authentication and permission levels (admin / superadmin):

• Dashboard with KPIs: number of active members, new joiners this month, regularised quotas, birthdays this week.
• Member Management: full CRUD with advanced filters (status, type, debtors), individual email sending and CSV import.
• Per-Member Quota Management: create, edit, mark as paid with one click, and upload proof on behalf of members.
• Pending Proofs: dedicated page aggregating all proofs submitted by members awaiting validation — the admin validates (marks quota as paid, recalculates debt) or rejects (allows new submission).
• Annual Quota Management: bulk generation of quotas for an entire year (respecting historical values), with a preview of eligible members and mass sending of renewal emails from parameterised templates.
• Email Templates: editor for reusable HTML templates for renewals, welcome messages and other scenarios.
• Temporary Members: management of the membership application lifecycle, with promotion to full member status.
• CSV Import: migration of historical data for members, quotas and temporary members.

REST API

Node.js/Express back-end as the central business logic and data access layer:

• Authentication with JWT (short-lived access token + HttpOnly cookie refresh token).
• IfthenPay SDK integrated for MB reference generation and MBWay requests, with automatic payment confirmation callbacks.
• Nodemailer for sending transactional and marketing emails with dynamic HTML templates.
• File uploads (photos, proofs) with automatic image compression via Sharp.
• Automatic debt recalculation per member after each quota change.

Timeline

• Phase 1 — Analysis & Architecture: 1 week
• Phase 2 — REST API + Database: 2 weeks
• Phase 3 — Member Portal: 3 weeks
• Phase 4 — Administration Portal: 3 weeks
• Phase 5 — IfthenPay Payment Integration: 1 week
• Phase 6 — Data Migration & Deployment: 1 week
• Total: 11 weeks

---

📈 The Results

Success Metrics

• 💳 Active online payments: Members pay their quotas directly in the portal, with no friction or manual steps from the team.
• ⚡ Automated proof validation: The administrative team validates proofs with a single click, eliminating back-and-forth emails.
• 📨 Bulk renewal emails: Annual notifications for all members generated and sent in a single process, with per-quota send tracking.
• 🗃️ Full history migration: All member records and historical quotas were migrated from the previous solution with no data loss.
• 📱 Digital member card: Every member has immediate access to their digital card with QR Code, replacing the previous manual process.
• 🔒 Data 100% under association control: Own infrastructure, with no data on third-party SaaS platforms.

Business Impact

The move to an owned platform freed the association from platform constraints and opened the door to features that simply did not exist before — namely the ability for a member to log in to the portal at 11 pm, check their overdue quota, generate a Multibanco reference and pay immediately, with no human intervention. This level of self-service reduces the burden on the team and significantly improves the member experience.

---

🛠️ Tech Stack

• React 18 + TypeScript: Foundation of both SPA portals, with strong typing throughout the entire chain.
• Vite: Modern bundler for fast builds and hot-reload during development.
• Fluent UI v9: Microsoft design system, ensuring visual consistency and accessibility.
• TanStack Query: Server-side state management with cache, automatic invalidation and loading states.
• Node.js + Express: Lightweight and performant REST API with JWT authentication middleware.
• MySQL / MariaDB: Robust relational database, hosted on the association’s own server.
• IfthenPay: Portuguese payment gateway with native support for Multibanco and MBWay.
• Nodemailer: Email sending with support for parameterised HTML templates.
• Sharp: Server-side image processing and compression (profile photos, proofs).

---

💬 Client Testimonial

“The new platform completely changed the way we manage our members. Before, to regularise a quota there was always an email, a bank transfer and then manual confirmation. Now the member logs into the portal, pays with MBWay and it’s done. The administrative team has more time for what really matters: supporting our members.”

Board of Directors — Crohn/Colite Portugal Association

---

🎓 Lessons Learned

• The natural evolution of the previous solution was an advantage: Knowing the client, their operational model and their data deeply (from the 2024 project) enabled faster delivery with fewer revisions. The data migration was smooth because the data structure was well understood.
• Online payments change behaviour: Simply making MB and MBWay references available in the portal immediately increased the rate of quota regularisation, without any additional campaign.
• Well-designed self-service reduces support load: A clear portal, with visible payment statuses and intuitive inline actions, translated into fewer emails and calls from members to the association.
• Separating the portals was the right call: Having a dedicated portal for members and another for administration, instead of a single one with role-based control, simplified the UX of both and made independent deployment of each component easier.