Enterprise Membership Management SaaS Platform

Enterprise Membership Management SaaS Platform is a confidential large-scale, multi-tenant SaaS platform built for membership-based organizations such as recreation centers, community organizations, sports groups, churches, and program-based organizations. The platform manages people, households, memberships, programs, events, registrations, communications, payments, accounting, reporting, public websites, and organization settings from one enterprise system. I worked on the frontend side of this project as a Senior Frontend Engineer. The frontend was built using Angular, Nx monorepo architecture, TypeScript, NgRx Signals, Angular Material, Tailwind CSS, Syncfusion, AG Grid, SurveyJS, and multiple shared libraries. The real product name, company name, domains, tenant names, and internal implementation details are intentionally anonymized due to company privacy and confidentiality policies.

Membership-based organizations often need many systems to manage people, households, programs, memberships, registrations, venues, rentals, communications, payments, refunds, financials, reporting, and public-facing websites. Managing these workflows separately creates operational complexity, duplicate data, poor reporting, and inconsistent user experiences. The challenge was to support a large enterprise SaaS platform from one codebase while serving multiple branded tenant products and multiple frontend applications. The frontend needed to handle complex admin workflows, public website rendering, end-user account management, permissions, state management, forms, tables, schedules, reports, payments, communication tools, and tenant-specific configuration. Another major challenge was working inside a large Nx monorepo with multiple Angular apps and shared libraries. The system required clean architecture, reusable UI components, consistent state patterns, strict TypeScript, permission-driven rendering, and scalable frontend practices. The platform also had to integrate with a powerful backend ecosystem including organization management, people management, programs, registrations, payments, accounting, communications, media, website builder, background jobs, and reporting APIs.

• The frontend was built as an Nx monorepo with multiple Angular applications and shared libraries.
• Applications included:
• Customer Portal: main staff/admin portal for managing organizations, people, programs, events, communications, financials, reporting, website builder, and settings.
• Customer Account: end-user account management including signup, login, profile, password reset, and OAuth callback.
• Customer Website: public-facing website with dynamic page rendering for locations, programs, rentals, and content generated from the portal website builder.
• MemberWorks Admin: internal platform admin dashboard for managing tenants and users.
• Halo Hoops: standalone basketball/events application.
• The shared library architecture followed a clean layered model:
• UI library for presentational components.
• Smart components library for feature-level components.
• State library using NgRx Signals stores.
• Data-access library containing domain HTTP services.
• API library for HttpClient configuration and interceptors.
• Auth library for guards, token handling, permission checks, and organization switching.
• Config library for environment providers, image CDN configuration, and Datadog setup.
• Forms library for domain form builders and validators.
• Types library as the centralized source of truth for enums, interfaces, request/response models, and API wrappers.
• Utils and pipes libraries for shared formatting, auth helpers, time utilities, billing helpers, and reusable transformations.
• The frontend supported multi-tenant product configuration through build-time environment replacement. Multiple branded products such as Yworks, Fireworks, Teamworks, and EastMain could be served from the same codebase across development, sandbox, staging, and production environments.
• The backend platform used .NET 8, ASP.NET Core, Clean Architecture, CQRS, MediatR, EF Core, PostgreSQL/PostGIS, Hangfire, JWT authentication, encrypted PII, permission-based authorization, payment gateway abstraction, media services, and background workers. The Angular frontend integrated with this backend through structured API services and permission-aware UI flows.

1. 01

   Nx monorepo architecture

   The platform used Nx to manage multiple Angular applications and shared libraries from one codebase. This improved code reuse, consistency, build orchestration, and long-term scalability across tenant products.

2. 02

   Shared library-first frontend design

   UI components, smart feature components, data access, state, forms, auth, config, pipes, utilities, and types were separated into dedicated libraries. This kept the codebase maintainable and easier to scale.

3. 03

   NgRx Signals for modern state management

   Signal-based stores were used instead of traditional Redux-style patterns, giving the frontend a more modern Angular state-management approach with better reactivity and cleaner feature stores.

4. 04

   Permission-driven UI rendering

   The portal used guards, permission checks, and directives to control feature access. This was essential because different users, roles, organizations, and tenants required different access levels.

5. 05

   White-label tenant configuration

   The same codebase supported multiple branded products by using product-specific environment configuration, API URLs, media URLs, payment keys, and cross-app URLs.

6. 06

   Dynamic website and content rendering

   The customer website application rendered public-facing pages dynamically based on website builder data, allowing organizations to manage public content, locations, programs, rentals, and pages through the platform.

7. 07

   Enterprise backend integration

   The Angular frontend integrated with a .NET 8 Clean Architecture backend that handled organizations, people, programs, payments, accounting, communications, media, permissions, and background jobs.

• Working inside a large enterprise Nx monorepo with multiple Angular applications and many shared libraries.
• Understanding the architecture of a mature frontend platform with strict separation between UI, components, state, data-access, API, auth, config, forms, pipes, utils, and types.
• Handling permission-driven UI where features, routes, buttons, modules, and actions depend on user roles, organization context, and tenant permissions.
• Working with modern Angular patterns including standalone components, strict TypeScript, signal-based state management, reactive forms, and modular libraries.
• Managing frontend complexity across multiple branded products and multiple environments using tenant-specific build configurations.
• Working with a heavy UI ecosystem including Angular Material, Tailwind CSS, Syncfusion, AG Grid, Radix UI, Bootstrap legacy styles, Quill, SurveyJS, Swiper, and icon libraries.
• Integrating frontend workflows with a large .NET backend that handled people, households, organizations, programs, events, payments, refunds, accounting, communications, website builder, media, and reporting.
• Maintaining frontend quality through linting, formatting, strict typing, code reviews, conventional commits, branch workflows, and Jira-based development.

• Multi-tenant membership management SaaS platform
• Angular frontend development
• Nx monorepo architecture
• Multiple Angular applications
• Customer portal for organization staff/admin users
• Customer account application for end-user account management
• Public customer website with dynamic page rendering
• Internal platform admin dashboard
• Shared UI component library
• Smart feature components
• NgRx Signals state management
• Permission-driven routes and UI rendering
• Role-based and organization-aware frontend flows
• People and household management workflows
• Programs and registration workflows
• Events and classes management
• Membership management
• Communications and messaging workflows
• Website builder and dynamic website rendering
• Financials and accounting-related frontend flows
• Payments, refunds, and transaction-related UI
• Reporting modules
• Settings and configuration screens
• Reactive forms and validation patterns
• Advanced tables, charts, schedulers, calendars, and query builders
• Google Maps integration
• Email builder integration
• Datadog frontend observability
• White-label tenant product support
• Jira-based enterprise delivery workflow
• Code reviews, linting, formatting, and conventional commit

• The frontend used Nx-based build and serve workflows for multiple tenant products and environments.
• Tenant products included Yworks, Fireworks, Teamworks, and EastMain, each with separate development, sandbox, staging, and production configurations.
• Build scripts supported serving and building tenant-specific applications, core application bundles, and all application bundles.
• The project followed professional engineering workflows with Husky git hooks, ESLint, Prettier, lint-staged, Commitlint, conventional commits, Jest testing, Storybook for UI components, and Jira ticket-based delivery.
• The backend deployment architecture included separate deployable services for API, tasks, and media, with CI/CD pipelines for AWS ECR, AWS ECS, database migrations, staging, sandbox, and production environments.

• The Nx monorepo structure allowed multiple frontend applications and shared libraries to scale from one codebase.
• The platform supported multiple tenant products and environments through product-specific configuration and build-time replacement.
• Shared types, utilities, forms, UI components, state stores, data-access services, and auth logic reduced duplication and helped the platform scale across applications.
• The backend used Clean Architecture with Domain, Application, Infrastructure, Server, Tasks, Media, Common, Configuration, Tools, and Aspire projects. This allowed the platform to scale across API services, background jobs, media processing, and tenant-specific deployments.
• The frontend architecture was suitable for adding more tenant products, more public website features, more admin modules, more shared components, and more permission-driven workflows.

• Continue improving shared UI library consistency across Angular Material, Tailwind, Syncfusion, Radix, Bootstrap legacy styles, and custom components.
• Increase test coverage for permission-driven UI, dynamic website rendering, payments, forms, program registration, reporting, and tenant-specific workflows.
• Improve bundle optimization by reviewing the overlap between multiple UI libraries and legacy styling systems.
• Strengthen Storybook documentation for reusable UI components and design-system usage.
• Expand frontend observability for key user journeys including registration, payment, website builder, account management, and admin workflows.
• Continue improving tenant-specific configuration management and build workflows as more branded products or environments are added.

• Nx monorepo architecture improves reuse and consistency, but it requires strong structure and discipline because many applications and libraries depend on each other.
• A shared UI and component library reduces duplication, but changes must be carefully reviewed because one update can affect multiple applications and tenant products.
• Permission-driven UI improves security and user experience, but it increases frontend complexity because routes, components, buttons, and actions must respect role and organization context.
• Supporting multiple branded products from one codebase is scalable, but tenant-specific configuration and environment replacement must be managed carefully.
• Using many UI libraries gives flexibility for complex enterprise features, but it can increase bundle size and styling complexity.
• Dynamic public website rendering gives organizations flexibility, but it requires strong content modeling, rendering rules, and testing to avoid broken layouts.

• Angular
• Nx Monorepo
• TypeScript
• NgRx Signals
• Angular Material
• Tailwind CSS
• Radix UI
• Radix-NG
• Bootstrap
• Syncfusion
• AG Grid
• SurveyJS
• Quill
• Swiper
• Lucide Icons
• Font Awesome
• Angular Reactive Forms
• Vest Validation
• Google Maps JavaScript API
• Payrix
• TRX Services
• Beefree SDK
• Datadog RUM
• Datadog Logs
• Jest
• Storybook
• ESLint
• Prettier
• Husky
• Commitlint
• .NET 8
• ASP.NET Core
• PostgreSQL
• PostGIS
• MediatR
• Hangfire
• OpenTelemetry
• AWS ECS
• AWS EC