GymHub Management System
Multi-Tenant SaaS Platform for Gym & Fitness Operations
Project Overview
GymHub Management System is a comprehensive multi-tenant SaaS web application built for UFC Gym–style facilities. It unifies every aspect of gym operations — from membership and contact management to class scheduling, personal training, racket sports, fight-night events, hall bookings, a product catalog, Stripe-powered payments, invoicing, and detailed reporting — all within a single platform. Each tenant gets its own isolated data, subdomain, and fully configurable branding.
My Role
As the Frontend / Full-Stack Developer, I owned the complete frontend architecture and led the integration with backend APIs. My responsibilities spanned feature module development (dashboard, members, classes, events, personal training, racket sports, hall booking, catalog, invoices, reports), authentication and RBAC setup, real-time SignalR integration, multi-tenant app initializer and branding, and shared guards and services.
Key Features
- Multi-tenant resolution via subdomain or query parameter; app initializer loads tenant branding and configuration before Angular bootstraps, with every API request carrying the __tenant__ header for backend isolation
- JWT authentication with an HttpErrorInterceptor that detects 401 responses, runs a single refresh-token flow, and retries queued requests with the new token to prevent duplicate refreshes
- SignalR hub for real-time member check-in/out and live user notifications; dashboard and notification components subscribe to hub events for instant updates
- CASL ability rules built from role-based subject/action pairs; route guards and the sidebar menu are filtered by permission so users only see what they are allowed to access
- FullCalendar integration for class schedules, event bookings, personal training sessions, and racket sports court reservations with time-zone-aware API requests
- Stripe payment setup and checkout flow; invoicing module with PDF generation and financial reports
- Fight-night and cinema/box-office ticketing flows with seat selection and capacity management
- Catalog and product shop with cart management; hall and conference room reservation with availability calendar
Challenges & Solutions
1.Multi-Tenancy at Scale
Tenant identity is resolved from the subdomain or a query parameter. An Angular app initializer fetches the tenant's configuration and branding (logo, color scheme, language) before the application bootstraps. Every outgoing HTTP request is stamped with the `__tenant__` header so the backend can isolate data without any additional client-side logic.
2.Token Expiry Under Concurrent Requests
An HttpErrorInterceptor catches 401 responses and executes the refresh-token flow exactly once, queuing all concurrent failing requests. Once a new token is obtained, every queued request is retried automatically, eliminating unnecessary logouts and duplicate refresh calls.
3.Real-Time UX with SignalR
A SignalR hub manages member check-in/out events and user notifications. Dashboard widgets and the notification component subscribe to the hub and update in real time, giving front-desk staff immediate visibility without requiring manual page refreshes.
4.Fine-Grained Access Control
CASL ability rules are built from subject/action pairs derived from the user's role. Angular route guards use these rules to allow or block navigation, and the sidebar menu is dynamically filtered so users only see sections they are permitted to access — keeping the UI clean and secure.
Business Impact
GymHub delivers a single, unified operations platform for multi-location gym chains. The multi-tenant design lets many facilities share one deployment while keeping their data and branding completely isolated. Real-time check-in and live notifications improve staff visibility and the member experience, while the integrated payments, invoicing, and reporting modules eliminate the need for separate back-office tools.
Tech Stack
Highlights
- Multi-tenant architecture with per-tenant branding and data isolation
- Real-time check-in/out and notifications via SignalR
- JWT authentication with refresh-token flow and HTTP interceptor
- Role-based access control using CASL for routes and sidebar menu
- Class and event management with FullCalendar integration
- Stripe payment setup, checkout, invoicing, and reporting
- Fight-night, cinema/box-office, and racket sports booking flows
- Hall and conference room reservation system